/* Tecnifum — Tokens de diseño
   Fuente de verdad de color, tipografía, espacio y elevación.
   Todos los pares de color están validados WCAG 2.1 AA (temp/validar_contraste.py).
   Ningún otro archivo debe declarar colores literales. */

:root {
  /* --- Marca (invariante entre temas: son los colores del logo) --- */
  --marca-acero: #396583;   /* azul del logo: texto, marco, tipografía */
  --marca-gris: #8A949B;    /* gris del logo: el ratón */

  /* --- Tipografía --- */
  --fuente-titulo: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;
  --texto-4xl: clamp(2.5rem, 6vw, 4rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --interlinea-apretada: 1.15;
  --interlinea-normal: 1.6;

  /* --- Espacio (escala de 4 px) --- */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-12: 3rem;
  --espacio-16: 4rem;
  --espacio-24: 6rem;

  /* --- Radio y trazo --- */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 16px;
  --radio-xl: 24px;
  --radio-completo: 999px;
  --trazo-icono: 1.5;

  /* --- Movimiento --- */
  --transicion-rapida: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  --ancho-contenido: 1180px;
}

/* =========================================================
   TEMA CLARO (predeterminado)
   ========================================================= */
:root,
:root[data-tema="claro"] {
  color-scheme: light;

  --fondo: #F4F6F8;
  --superficie: #FFFFFF;
  --superficie-alterna: #EDF1F5;
  --borde: #D6E3EC;
  --borde-fuerte: #B9CCDB;

  --texto: #26455A;
  --texto-secundario: #5F6B73;
  --texto-tenue: #8A949B;        /* solo rótulos grandes: 3.09:1 */

  --marca: #396583;              /* enlaces e íconos */
  --marca-fuerte: #26455A;       /* relleno de botón primario */
  --marca-suave: #D6E3EC;        /* fondos de chip */
  --sobre-marca: #FFFFFF;

  --conforme: #22694A;
  --atencion: #8A5A0B;
  --critico: #A6382F;
  --conforme-suave: #E3F1EA;
  --atencion-suave: #FAF0DC;
  --critico-suave: #FBE7E4;

  /* Vidrio: la capa sólida garantiza el contraste, el desenfoque solo da profundidad */
  --vidrio-solido: rgba(255, 255, 255, 0.78);
  --vidrio-borde: rgba(38, 69, 90, 0.12);
  --vidrio-desenfoque: 18px;
  --vidrio-realce: rgba(255, 255, 255, 0.65);

  --sombra-sm: 0 1px 2px rgba(38, 69, 90, 0.08);
  --sombra-md: 0 4px 14px rgba(38, 69, 90, 0.10);
  --sombra-lg: 0 18px 44px rgba(38, 69, 90, 0.16);

  --foco: #396583;
}

/* =========================================================
   TEMA OSCURO
   Se activa por preferencia del sistema o por data-tema="oscuro".
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --fondo: #0C1C2C;
    --superficie: #12283C;
    --superficie-alterna: #18334B;
    --borde: #2A4763;
    --borde-fuerte: #3D6285;

    --texto: #F2F8FD;
    --texto-secundario: #B6CADC;
    --texto-tenue: #8FA6BC;

    --marca: #93C2E6;
    --marca-fuerte: #3A79A8;
    --marca-suave: #1C3A55;
    --sobre-marca: #FFFFFF;

    --conforme: #5FC79A;
    --atencion: #E5B45C;
    --critico: #F58C82;
    --conforme-suave: #123A2C;
    --atencion-suave: #352C12;
    --critico-suave: #3C2220;

    --vidrio-solido: rgba(18, 40, 60, 0.72);
    --vidrio-borde: rgba(242, 248, 253, 0.16);
    --vidrio-desenfoque: 18px;
    --vidrio-realce: rgba(242, 248, 253, 0.10);

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.46);
    --sombra-lg: 0 18px 44px rgba(0, 0, 0, 0.58);

    --foco: #93C2E6;
  }
}

/* Selección manual del usuario: gana sobre la preferencia del sistema */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #0C1C2C;
  --superficie: #12283C;
  --superficie-alterna: #18334B;
  --borde: #2A4763;
  --borde-fuerte: #3D6285;

  --texto: #F2F8FD;
  --texto-secundario: #B6CADC;
  --texto-tenue: #8FA6BC;

  --marca: #93C2E6;
  --marca-fuerte: #3A79A8;
  --marca-suave: #1C3A55;
  --sobre-marca: #FFFFFF;

  --conforme: #5FC79A;
  --atencion: #E5B45C;
  --critico: #F58C82;
  --conforme-suave: #123A2C;
  --atencion-suave: #352C12;
  --critico-suave: #3C2220;

  --vidrio-solido: rgba(18, 40, 60, 0.72);
  --vidrio-borde: rgba(242, 248, 253, 0.16);
  --vidrio-desenfoque: 18px;
  --vidrio-realce: rgba(242, 248, 253, 0.10);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.46);
  --sombra-lg: 0 18px 44px rgba(0, 0, 0, 0.58);

  --foco: #93C2E6;
}

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicion-rapida: 1ms;
    --transicion-normal: 1ms;
  }
}