/* Askel — Design tokens (Dark Nordic)
   Único lugar con valores literales: colores, radios, sombras, espacios,
   tipografía y movimiento. Los componentes solo usan estas variables. */
:root {
  color-scheme: dark;

  /* ---------- Superficies ---------- */
  --bg-app: #222222;
  --bg-panel: #2D2D2D;
  --bg-surface: #363636;
  --bg-surface-hover: #3F3F3F;
  --bg-elevated: #313131;
  --bg-sunken: #1C1C1C;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-header: rgba(45, 45, 45, 0.85);
  --overlay-backdrop: rgba(0, 0, 0, 0.55);

  /* Vidrio: paneles translúcidos con desenfoque */
  --bg-glass: rgba(45, 45, 45, 0.82);
  --border-glass: rgba(255, 255, 255, 0.06);
  --border-glass-top: rgba(255, 255, 255, 0.12);
  --blur-glass: blur(18px) saturate(140%);

  /* ---------- Bordes ---------- */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);

  /* ---------- Texto ---------- */
  --text-primary: #FFFFFF;
  --text-secondary: #B0B6BF;
  --text-muted: #9EA4AE;
  --text-on-accent: #0B1F1C;
  --text-on-solid: #FFFFFF;

  /* ---------- Acento (acción, elementos interactivos) ---------- */
  --accent: #2DD4BF;
  --accent-hover: #5EEAD4;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --accent-border: rgba(45, 212, 191, 0.35);

  /* ---------- Semánticos ---------- */
  /* success: completado · warning: próximo a vencer · danger: atrasado, error */
  --success: #10B981;
  --success-hover: #22C995;
  --success-soft: rgba(16, 185, 129, 0.10);
  --text-on-success: #04150F;

  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.10);

  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.10);
  --danger-solid: #DC2626;
  --danger-solid-hover: #B91C1C;

  --neutral-marker: #64748B;

  /* Marcadores de Horizontes y Rutas (rotan por id) */
  --container-1: #60A5FA;
  --container-2: #34D399;
  --container-3: #F472B6;
  --container-4: #FBBF24;
  --container-5: #A78BFA;
  --container-6: #F87171;
  --container-7: #22D3EE;
  --container-8: #FB923C;

  /* ---------- Forma ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-width: 1px;
  --border-width-strong: 2px;
  --dot-size: 6px;
  --progress-height: 6px;

  /* ---------- Espacio (escala de 4px) ---------- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Elevación ---------- */
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 12px rgba(45, 212, 191, 0.45);
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent-border);
  --shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.20);
  --blur-header: blur(16px);
  --blur-overlay: blur(6px);

  /* ---------- Tipografía ---------- */
  --font-display: var(--font-body);
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif;

  --fs-2xs: 0.6875rem;  /* 11px: solo mayúsculas cortas (estados, ejes) */
  --fs-xs: 0.75rem;     /* 12px: mínimo para texto corrido */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-md: 0.875rem;    /* 14px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-lg: 1rem;        /* 16px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-title: clamp(1.5rem, 2.4vw, 2rem);
  --fs-brand: clamp(1.25rem, 2vw, 1.6rem);
  --fs-stat: clamp(1.75rem, 2.6vw, 2.25rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-label: 0.05em;
  --tracking-wide: 0.12em;
  --tracking-tight: -0.01em;
  --tracking-display: -0.02em;

  /* ---------- Movimiento ---------- */
  --transition-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --motion-fast: 120ms;
  --motion-medium: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-ring: 600ms;
  --duration-nav: 320ms;
  --duration-page: 220ms;
  --transition-ui:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast),
    filter var(--transition-fast);
}

/* ---------- Tema claro ----------
   Solo cambian los colores; forma, espacio, tipografía y movimiento son los mismos.
   page-head.php pone data-theme-effective en <html> (resolviendo "system" antes de pintar).
   Gris neutro (no blanco) para no encandilar; bordes visibles y texto/acento con
   contraste AA (≥ 4.5:1) sobre todas las superficies. */
:root[data-theme-effective="light"] {
  color-scheme: light;

  --bg-app: #D4D6DA;
  --bg-panel: #E4E6E9;
  --bg-surface: #EEEFF1;
  --bg-surface-hover: #E2E4E8;
  --bg-elevated: #F2F3F5;
  --bg-sunken: #C9CCD1;
  --bg-hover: rgba(15, 23, 42, 0.06);
  --bg-header: rgba(228, 230, 233, 0.88);
  --overlay-backdrop: rgba(15, 23, 42, 0.40);

  --bg-glass: rgba(228, 230, 233, 0.92);
  --border-glass: rgba(15, 23, 42, 0.16);
  --border-glass-top: rgba(15, 23, 42, 0.16);

  --border-subtle: rgba(15, 23, 42, 0.16);
  --border-strong: rgba(15, 23, 42, 0.30);

  --text-primary: #111318;
  --text-secondary: #3A3F47;
  --text-muted: #50565F;
  --text-on-accent: #FFFFFF;
  --text-on-solid: #FFFFFF;

  /* Teal oscuro: el del tema oscuro no llega a contraste AA sobre gris claro */
  --accent: #0B5F58;
  --accent-hover: #094E48;
  --accent-soft: rgba(11, 95, 88, 0.12);
  --accent-border: rgba(11, 95, 88, 0.45);

  --success: #03664A;
  --success-hover: #024F39;
  --success-soft: rgba(3, 102, 74, 0.12);
  --text-on-success: #FFFFFF;

  --warning: #8A4B06;
  --warning-soft: rgba(180, 83, 9, 0.14);

  --danger: #A61B1B;
  --danger-soft: rgba(185, 28, 28, 0.10);

  --neutral-marker: #6B7280;

  --container-1: #1D4ED8;
  --container-2: #047857;
  --container-3: #BE185D;
  --container-4: #B45309;
  --container-5: #6D28D9;
  --container-6: #B91C1C;
  --container-7: #0E7490;
  --container-8: #C2410C;

  --shadow-popover: 0 12px 32px rgba(15, 23, 42, 0.22);
  --shadow-glow: 0 0 12px rgba(11, 95, 88, 0.30);
  --shadow-glass: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 18px rgba(15, 23, 42, 0.10);
}