/* ── Design tokens de ops.ua.co.cr ────────────────────────────────────────────
   Única fuente de colores, tipografía, radios, sombras, espaciado y capas.
   Fase 0: solo define valores (namespace --ua-*). Los componentes aún usan sus
   variables/literales; se migran por ventana en las fases siguientes.
   Regla: no agregar hex, px de fuente ni z-index nuevos fuera de este archivo.
   Se carga ANTES de styles.css. Al cambiar algo aquí, subir ?v=N en index.html
   y login.html (/static/* es immutable). */

:root {
  /* Neutros (escala gris Tailwind: los grises más usados hoy en el código) */
  --ua-white: #ffffff;
  --ua-ink: #111111;          /* texto principal, sidebar, estado activo */
  --ua-neutral-50:  #f9fafb;
  --ua-neutral-100: #f3f4f6;
  --ua-neutral-200: #e5e7eb;  /* bordes suaves, separadores */
  --ua-neutral-300: #d1d5db;  /* bordes de input */
  --ua-neutral-400: #9ca3af;  /* placeholder, deshabilitado (no usar para texto útil: contraste <3:1) */
  --ua-neutral-500: #6b7280;  /* texto secundario */
  --ua-neutral-600: #4b5563;
  --ua-neutral-700: #374151;  /* texto de apoyo */
  --ua-neutral-800: #1f2937;
  --ua-neutral-900: #111827;

  /* Acción (un solo color primario) */
  --ua-primary-50:  #eef2ff;
  --ua-primary-600: #1d4ed8;
  --ua-primary-700: #1e40af;

  /* Estados semánticos: color de texto/borde (500-700) y fondo suave (bg) */
  --ua-success:    #15803d;
  --ua-success-bg: #f0fdf4;
  --ua-success-strong: #059669;   /* botones/indicadores llenos */
  --ua-warning:    #93650f;
  --ua-warning-bg: #fffbeb;
  --ua-warning-strong: #d97706;
  --ua-danger:     #b91c1c;
  --ua-danger-bg:  #fef2f2;
  --ua-danger-strong: #dc2626;
  --ua-info:       var(--ua-primary-700);
  --ua-info-bg:    var(--ua-primary-50);

  /* Superficies y bordes (alias semánticos; los componentes nuevos usan estos) */
  --ua-bg:             #f5f5f5;
  --ua-surface:        var(--ua-white);
  --ua-surface-sunken: var(--ua-neutral-50);
  --ua-border:         var(--ua-neutral-200);
  --ua-border-strong:  var(--ua-neutral-300);
  --ua-text:           var(--ua-ink);
  --ua-text-muted:     var(--ua-neutral-500);
  --ua-text-soft:      var(--ua-neutral-700);

  /* Paleta de datos para gráficos (categóricas, 8 colores, orden fijo) */
  --ua-data-1: #1d4ed8;
  --ua-data-2: #0f9aa8;
  --ua-data-3: #3f8f5b;
  --ua-data-4: #c9a13b;
  --ua-data-5: #d97706;
  --ua-data-6: #b91c1c;
  --ua-data-7: #7c3aed;
  --ua-data-8: #6b7280;

  /* Tipografía */
  --ua-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ua-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ua-text-xs:   11px;   /* etiquetas en mayúscula, metadatos */
  --ua-text-sm:   12px;   /* texto denso, chips, cabeceras de tabla */
  --ua-text-base: 13px;   /* cuerpo de tablas y formularios */
  --ua-text-md:   14px;   /* cuerpo de lectura */
  --ua-text-lg:   16px;   /* títulos de panel */
  --ua-text-xl:   20px;   /* título de página, cifras KPI chicas */
  --ua-text-2xl:  24px;   /* cifras KPI */
  --ua-weight-regular: 400;
  --ua-weight-medium:  500;
  --ua-weight-semibold: 600;
  --ua-weight-bold:    700;
  --ua-leading-tight:  1.25;
  --ua-leading-normal: 1.5;

  /* Radios */
  --ua-radius-sm:   4px;   /* chips, inputs pequeños */
  --ua-radius-md:   8px;   /* botones, inputs, tarjetas pequeñas */
  --ua-radius-lg:   12px;  /* paneles, modales */
  --ua-radius-pill: 999px;

  /* Sombras */
  --ua-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ua-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --ua-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);

  /* Espaciado (base 4px) */
  --ua-space-1: 4px;
  --ua-space-2: 8px;
  --ua-space-3: 12px;
  --ua-space-4: 16px;
  --ua-space-5: 24px;
  --ua-space-6: 32px;

  /* Capas (reemplaza los z-index sueltos: 30…9999) */
  --ua-z-sticky:   100;
  --ua-z-dropdown: 200;
  --ua-z-overlay:  1000;
  --ua-z-modal:    1100;
  --ua-z-toast:    1200;

  /* Layout */
  --ua-sidebar-w: 260px;
}