/* ==========================================================================
   El Ayudador de Pibes — Tokens del sistema visual
   Versión 2.0 · Fuente de verdad: docs/SISTEMA-VISUAL.md

   Ningún archivo del proyecto debe declarar colores, tamaños de fuente,
   espaciados ni radios literales. Todo sale de aquí.

   REGLA DEL COLOR (v2):
   - Violeta de marca = acción. Botones, enlaces, foco.
   - Seis colores de categoría = identidad. Solo marcador, nunca botón.
   - Ámbar = el archivo se transmite a un servidor. Uso exclusivo.
   - Rojo = error o pérdida. Uso exclusivo.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Superficies y texto: claro ---------------------------------------- */
  --fondo:              #FBFAFF;
  --superficie:         #FFFFFF;
  --superficie-hundida: #F1EFF9;

  --texto-1: #151221;  /* 17.73:1 — AAA */
  --texto-2: #4B4560;  /*  8.72:1 — AAA */
  --texto-3: #6B6480;  /*  5.38:1 — AA. Solo metadatos prescindibles */

  --borde:             #DCD8EC;
  --borde-interactivo: #8A82A0;  /* 3.50:1 — cumple WCAG 1.4.11 */

  /* --- Marca: violeta. Solo para acciones -------------------------------- */
  --acento:         #6320C9;  /* 7.84:1 — AAA */
  --acento-hundido: #4E1AA0;
  --acento-tenue:   #F0E9FD;
  --acento-contra:  #FFFFFF;  /* 8.14:1 sobre --acento */

  /* --- Señales reservadas. Nunca por estética ---------------------------- */
  --ambar:       #9A5B00;  /* 5.22:1 — el archivo se transmite */
  --ambar-tenue: #FDF2DE;
  --error:       #B91C1C;  /* 6.23:1 */
  --error-tenue: #FDEAEA;

  /* --- Categorías: espectro. Solo como marcador de identidad ------------- */
  --cat-imagenes:     #A21CAF;  /* 6.09:1 */
  --cat-pdf:          #BE185D;  /* 5.81:1 */
  --cat-texto:        #4338CA;  /* 7.61:1 */
  --cat-programacion: #0E7490;  /* 5.16:1 */
  --cat-seguridad:    #047857;  /* 5.28:1 */
  --cat-estudiantes:  #4D7C0F;  /* 4.81:1 */

  --cat-imagenes-tenue:     #FBEAFC;
  --cat-pdf-tenue:          #FDE9F1;
  --cat-texto-tenue:        #EAE9FB;
  --cat-programacion-tenue: #E4F4F9;
  --cat-seguridad-tenue:    #E1F5EE;
  --cat-estudiantes-tenue:  #EFF7E1;

  --sombra-flotante: 0 1px 2px rgba(21, 18, 33, 0.08),
                     0 8px 24px rgba(21, 18, 33, 0.12);
  --sombra-menu:     0 4px 6px rgba(21, 18, 33, 0.06),
                     0 12px 32px rgba(21, 18, 33, 0.16);

  /* --- Tipografía -------------------------------------------------------- */
  --fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-dato:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --txt-display:   3rem;
  --txt-h1:        2.25rem;
  --txt-h2:        1.75rem;
  --txt-h3:        1.375rem;
  --txt-cuerpo-lg: 1.125rem;
  --txt-cuerpo:    1rem;
  --txt-peq:       0.875rem;
  --txt-micro:     0.75rem;
  --txt-dato:      2rem;
  --txt-dato-peq:  0.875rem;

  --interlinea-titulo: 1.15;
  --interlinea-cuerpo: 1.6;
  --tracking-titulo:  -0.02em;
  --tracking-micro:    0.01em;
  --tracking-etiqueta: 0.08em;

  --medida-lectura: 68ch;

  /* --- Espaciado: escala base 4px ---------------------------------------- */
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;

  /* --- Forma. Radios más generosos que en v1 ----------------------------- */
  --radio-sm:   6px;
  --radio-md:   10px;
  --radio-lg:   16px;
  --radio-full: 999px;

  --contenedor: 1140px;
  --toque-min: 44px;

  /* --- Movimiento -------------------------------------------------------- */
  --dur: 180ms;
  --dur-menu: 120ms;
  --curva: cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- Modo oscuro -----------------------------------------------------------
   No es el claro invertido. El fondo lleva tinte violeta y todos los colores
   suben de luminosidad, porque los tonos saturados oscuros sobre negro son
   ilegibles.
   -------------------------------------------------------------------------- */
:root[data-tema="oscuro"] {
  --fondo:              #12101C;
  --superficie:         #1B1830;
  --superficie-hundida: #0C0A14;

  --texto-1: #EFEBFA;  /* 16.06:1 — AAA */
  --texto-2: #ADA6C4;  /*  8.09:1 — AAA */
  --texto-3: #867E9E;  /*  4.92:1 — AA  */

  --borde:             #2E2A45;
  --borde-interactivo: #6A6386;  /* 3.35:1 */

  --acento:         #B79CFF;  /* 8.25:1 — AAA */
  --acento-hundido: #D0BEFF;
  --acento-tenue:   #241C3D;
  --acento-contra:  #12101C;

  --ambar:       #F5BE55;  /* 11.09:1 */
  --ambar-tenue: #2E2412;
  --error:       #FF9B95;  /*  9.29:1 */
  --error-tenue: #2E1618;

  --cat-imagenes:     #F0A0F5;  /*  9.90:1 */
  --cat-pdf:          #FF9DBE;  /*  9.69:1 */
  --cat-texto:        #A5B4FC;  /*  9.43:1 */
  --cat-programacion: #67D6EE;  /* 11.13:1 */
  --cat-seguridad:    #5EE9B5;  /* 12.36:1 */
  --cat-estudiantes:  #B5DE6B;  /* 12.20:1 */

  --cat-imagenes-tenue:     #2B1430;
  --cat-pdf-tenue:          #301521;
  --cat-texto-tenue:        #1A1B3A;
  --cat-programacion-tenue: #0E2830;
  --cat-seguridad-tenue:    #0C2A22;
  --cat-estudiantes-tenue:  #1D2810;

  --sombra-flotante: 0 1px 2px rgba(0, 0, 0, 0.40),
                     0 8px 24px rgba(0, 0, 0, 0.50);
  --sombra-menu:     0 4px 6px rgba(0, 0, 0, 0.40),
                     0 12px 32px rgba(0, 0, 0, 0.60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:              #12101C;
    --superficie:         #1B1830;
    --superficie-hundida: #0C0A14;
    --texto-1: #EFEBFA;
    --texto-2: #ADA6C4;
    --texto-3: #867E9E;
    --borde:             #2E2A45;
    --borde-interactivo: #6A6386;
    --acento:         #B79CFF;
    --acento-hundido: #D0BEFF;
    --acento-tenue:   #241C3D;
    --acento-contra:  #12101C;
    --ambar:       #F5BE55;
    --ambar-tenue: #2E2412;
    --error:       #FF9B95;
    --error-tenue: #2E1618;
    --cat-imagenes:     #F0A0F5;
    --cat-pdf:          #FF9DBE;
    --cat-texto:        #A5B4FC;
    --cat-programacion: #67D6EE;
    --cat-seguridad:    #5EE9B5;
    --cat-estudiantes:  #B5DE6B;
    --cat-imagenes-tenue:     #2B1430;
    --cat-pdf-tenue:          #301521;
    --cat-texto-tenue:        #1A1B3A;
    --cat-programacion-tenue: #0E2830;
    --cat-seguridad-tenue:    #0C2A22;
    --cat-estudiantes-tenue:  #1D2810;
    --sombra-flotante: 0 1px 2px rgba(0, 0, 0, 0.40),
                       0 8px 24px rgba(0, 0, 0, 0.50);
    --sombra-menu:     0 4px 6px rgba(0, 0, 0, 0.40),
                       0 12px 32px rgba(0, 0, 0, 0.60);
  }
}

@media (max-width: 600px) {
  :root {
    --txt-display: 2.25rem;
    --txt-h1:      1.875rem;
    --txt-dato:    1.75rem;
  }
}

/* --- Piso de calidad ------------------------------------------------------ */

*:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

*:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}