/* ══════════════════════════════════════════════════════════
   core/tokens.css — Tokens de diseño de COREDUCACIÓN
   Fuente única de identidad para Portal, Login y Landings.

   Capas:
     1. Primitivos de marca/neutros (--brand-*, --neutral-*): valores
        crudos. Nadie los usa directo salvo esta hoja.
     2. Semánticos (--bg-*, --text-*, --border*, --primary*, --success*…):
        lo que usan los componentes. Cambian entre claro/oscuro.
     3. Escalas (tipografía, espaciado, radios, sombras, movimiento, capas).

   Modo oscuro: el Portal (y el login) lo activan con body[data-tema="oscuro"].
   (Los alias heredados --color-… y --fs-… de la primera versión se retiraron
   al terminar la migración de todas las vistas.)
   ══════════════════════════════════════════════════════════ */

:root{
  /* ── 1. Primitivos ── */
  --brand-magenta-50:  #fbeef5;
  --brand-magenta-100: #f3d6e6;
  --brand-magenta-200: #e6b0cd;
  --brand-magenta-400: #c23e85;
  --brand-magenta-500: #b0256f;
  --brand-magenta-600: #9e1f63;   /* color institucional */
  --brand-magenta-700: #841a53;
  --brand-magenta-800: #6b123f;
  --brand-magenta-900: #4d0c2c;

  --brand-orange-50:  #fdece5;
  --brand-orange-500: #f15a29;    /* color institucional secundario */
  --brand-orange-700: #c23f16;
  --brand-orange-800: #9a3212;

  --neutral-0:   #ffffff;
  --neutral-25:  #fbfafa;
  --neutral-50:  #f5f3f4;
  --neutral-100: #eeebed;
  --neutral-200: #e4e0e2;
  --neutral-300: #d3cecf;
  --neutral-400: #a8a2a6;
  --neutral-500: #857f84;
  --neutral-600: #625d62;
  --neutral-700: #48444a;
  --neutral-800: #2e2b2d;
  --neutral-900: #201e1d;

  /* ── 2. Semánticos (claro) ── */
  --bg-canvas:  var(--neutral-50);   /* fondo de la página */
  --bg-surface: var(--neutral-0);    /* tarjetas, barras, modales */
  --bg-subtle:  var(--neutral-25);   /* cabecera de tabla, hover dentro de una tarjeta */
  --bg-muted:   var(--neutral-100);  /* campos deshabilitados, pistas */
  --bg-raised:  var(--neutral-0);    /* elemento activo sobre --bg-muted (segmentado) */
  --bg-overlay: rgba(24, 18, 22, .52);

  --text:        var(--neutral-900);
  --text-muted:  var(--neutral-600); /* 6.0:1 sobre blanco — apto para texto chico */
  --text-subtle: #736d72;            /* placeholders y metadatos: 5.0:1 sobre blanco, 4.6:1 sobre el canvas (antes --neutral-500, 3.9:1 — no llegaba a AA) */
  --text-on-primary: #ffffff;

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  /* Borde de controles de formulario (input/select/textarea/switch): es lo
     único que los delimita sobre una superficie blanca, así que necesita
     3:1 (WCAG 1.4.11) — #8f898e da 3.4:1 sobre blanco. --border-strong
     (1.6:1) queda para bordes decorativos: tarjetas, botones secundarios. */
  --border-control: #8f898e;

  --primary:              var(--brand-magenta-600);
  --primary-hover:        var(--brand-magenta-700);
  --primary-active:       var(--brand-magenta-800);
  --primary-subtle:       var(--brand-magenta-50);
  --primary-subtle-hover: var(--brand-magenta-100);
  --primary-text:         var(--brand-magenta-700); /* texto primario sobre fondo sutil */
  --primary-solid:        var(--brand-magenta-600); /* relleno con texto blanco (botones) */
  --primary-solid-hover:  var(--brand-magenta-700);

  --secondary:        var(--brand-orange-500);
  --secondary-subtle: var(--brand-orange-50);
  --secondary-text:   var(--brand-orange-800);

  /* Estados: base (íconos, bordes), -subtle (fondo), -text (texto sobre
     -subtle con contraste AA — el amarillo base no lo cumple solo). */
  --success: #1a9e6d; --success-subtle: #e6f6ef; --success-text: #11704c;
  --warning: #c98a00; --warning-subtle: #fff4db; --warning-text: #7d5600;
  --danger:  #d63859; --danger-subtle:  #fdebef; --danger-text:  #a82142;
  --danger-solid: var(--danger); /* relleno con texto blanco (.btn-danger) — ya cumple 4.6:1 */
  --info:    #2b7fc9; --info-subtle:    #e8f2fc; --info-text:    #1b5e99;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);

  /* Degradado de marca para superficies protagonistas (hero del Inicio). */
  --gradient-brand: linear-gradient(135deg, var(--brand-magenta-900) 0%, var(--brand-magenta-600) 62%, var(--brand-orange-500) 100%);

  /* ── 3. Escalas ── */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans); /* las landings lo cambian por Oswald */

  --text-xs:   11.5px;  /* etiquetas en mayúscula, metadatos */
  --text-sm:   12.5px;  /* ayudas, celdas secundarias */
  --text-base: 14px;    /* cuerpo, controles */
  --text-md:   15px;    /* títulos de tarjeta */
  --text-lg:   17px;    /* títulos de modal/drawer, secciones */
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  clamp(24px, 2.2vw + 12px, 30px); /* título de página */

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-caps: .06em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --radius-xs: 4px;
  --radius-sm: 8px;    /* controles: botones, campos */
  --radius-md: 12px;   /* tarjetas, tablas */
  --radius-lg: 16px;   /* modales, drawers, hero */
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(32, 30, 29, .06);
  --shadow-sm: 0 1px 3px rgba(32, 30, 29, .07), 0 1px 2px -1px rgba(32, 30, 29, .06);
  --shadow-md: 0 8px 24px -6px rgba(32, 30, 29, .14), 0 2px 6px -2px rgba(32, 30, 29, .06);
  --shadow-lg: 0 24px 56px -12px rgba(32, 30, 29, .30), 0 4px 12px -4px rgba(32, 30, 29, .10);

  --control-sm: 32px; --control-md: 38px; --control-lg: 44px;

  --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  --z-sticky: 60; --z-sidebar: 150; --z-dropdown: 200; --z-overlay: 300; --z-toast: 500;
}

/* ── Modo oscuro ── */
body[data-tema="oscuro"]{
  color-scheme: dark;

  --bg-canvas:  #19171b;
  --bg-surface: #222025;
  --bg-subtle:  #28252b;
  --bg-muted:   #302d33;
  --bg-raised:  #403c45;
  --bg-overlay: rgba(6, 4, 8, .66);

  --text:        #f2f0f2;
  --text-muted:  #bab4bd;
  --text-subtle: #9a949e;
  --text-on-primary: #ffffff;

  --border:        rgba(255, 255, 255, .11);
  --border-strong: rgba(255, 255, 255, .2);
  --border-control: rgba(255, 255, 255, .36); /* 3.3:1 sobre --bg-surface */

  --primary:              #e8558f;
  --primary-hover:        #f06a9f;
  --primary-active:       #f58ab4;
  --primary-subtle:       rgba(232, 85, 143, .15);
  --primary-subtle-hover: rgba(232, 85, 143, .24);
  --primary-text:         #ff9dc4;
  --primary-solid:        #c93a74; /* 4.8:1 con blanco; #e8558f solo da 3.4:1 */
  --primary-solid-hover:  #d6457f;

  --secondary:        #ff7043;
  --secondary-subtle: rgba(255, 112, 67, .15);
  --secondary-text:   #ffab8f;

  --success: #3ddb9b; --success-subtle: rgba(61, 219, 155, .14);  --success-text: #6fe6b6;
  --warning: #ffcf5c; --warning-subtle: rgba(255, 207, 92, .14);  --warning-text: #ffd97f;
  --danger:  #ff7d95; --danger-subtle:  rgba(255, 125, 149, .14); --danger-text:  #ff9aad;
  --danger-solid: #d92647; /* 4.9:1 con blanco; #ff7d95 solo da 2.4:1 (igual razón que --primary-solid) */
  --info:    #6fb3ec; --info-subtle:    rgba(111, 179, 236, .14); --info-text:    #93c6f1;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px -1px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 28px 64px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}

@media (prefers-reduced-motion: reduce){
  :root, body{ --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
}