/**
 * Tokens de marca compartidos de la Encuesta de comedores UTMACH.
 *
 * Los importan la landing (index.html) y la página de la encuesta (encuesta/index.html).
 * Contienen solo variables CSS: ninguna regla de maquetación ni de componente.
 *
 * Capas:
 *   1. Primitivos (--utm-*): valores crudos de la identidad institucional. Azul Pantone 301 EC
 *      (#005ca2) y rojo Pantone 185 EC (#c2354a) del manual; neutros cálidos que casan con los
 *      renders (papel, arena) y una noche teñida hacia el azul de marca. Nunca naranja.
 *   2. Semánticos de tema (--superficie, --tinta, --accion...): cambian con el tema. Por defecto
 *      claro; oscuro con prefers-color-scheme salvo que la raíz lleve data-tema="claro", y oscuro
 *      forzado con data-tema="oscuro".
 *   3. Tipografía, espaciado (escala de 4 px), radios, sombras, duraciones y curvas.
 *
 * Sistema de color declarado:
 *   - Azul = acción. Es el único color saturado que se toca (botones, enlaces, foco).
 *   - Rojo = trazo a mano (subrayados, chincheta, flechas dibujadas) y mensajes de error.
 *     Nunca decora un elemento clicable.
 *   - La jerarquía del texto se hace con la opacidad de una sola tinta (100 / 78 / 64 %),
 *     nunca con un segundo gris. El escalón de 16 % queda para líneas y divisores.
 *   - --borde-control es el borde de campos, opciones y chips: da al menos 3:1 contra la
 *     superficie en claro y en oscuro (WCAG 1.4.11). --linea y --linea-fuerte son solo divisores.
 *
 * Tipografía institucional: titulares en Book Antiqua (pila con Palatino, P052 y Source Serif 4
 * como respaldo) y texto en Myriad Pro (respaldo Source Sans 3). Los respaldos se alojan en el
 * propio sitio (assets/css/fuentes.css + assets/fonts/, licencia OFL): ninguna visita llama a un
 * tercero. Los tamaños llevan un piso en px para que nunca bajen de lo legible cuando el rem de
 * una página se escala.
 */
:root {
  --utm-azul-950: #04192b;
  --utm-azul-900: #072540;
  --utm-azul-800: #0a3a63;
  --utm-azul-700: #004b86;
  --utm-azul-600: #005ca2;
  --utm-azul-300: #86b8e3;
  --utm-azul-100: #dce9f5;
  --utm-azul-50: #eef4fa;

  --utm-rojo-700: #a12a3c;
  --utm-rojo-600: #c2354a;

  --utm-bronce-500: #8c6d46;

  --utm-papel-50: #fbf8f2;
  --utm-papel-100: #f5f0e6;
  --utm-papel-200: #e9e1d2;
  --utm-arena-400: #b9ab94;
  --utm-tinta-900: #101a24;
  --utm-noche-950: #070d14;
  --utm-noche-900: #0c1520;

  --superficie: var(--utm-papel-50);
  --superficie-elevada: #fffdf9;
  --superficie-hundida: var(--utm-papel-100);
  --tinta: var(--utm-tinta-900);
  --tinta-media: rgb(16 26 36 / 0.78);
  --tinta-tenue: rgb(16 26 36 / 0.64);
  --linea: rgb(16 26 36 / 0.16);
  --linea-fuerte: rgb(16 26 36 / 0.32);
  --borde-control: rgb(16 26 36 / 0.5);
  --accion: var(--utm-azul-600);
  --accion-hover: var(--utm-azul-700);
  --sobre-accion: var(--utm-papel-50);
  --accion-suave: var(--utm-azul-50);
  --foco: var(--utm-azul-600);
  --trazo-mano: var(--utm-rojo-600);
  --error: var(--utm-rojo-700);
  --velo: rgb(7 13 20 / 0.5);

  --familia-titular: "Book Antiqua", "Palatino Linotype", Palatino, "P052", "Source Serif 4", serif;
  --familia-texto: "Myriad Pro", "Source Sans 3", system-ui, sans-serif;
  --peso-titular: 400;
  --peso-texto: 400;
  --peso-texto-fuerte: 600;

  --texto-etiqueta: max(0.75rem, 12px);
  --texto-cuerpo: max(1rem, 16px);
  --texto-entrada: max(1.5rem, 20px);
  --texto-titular: max(3.5rem, 36px);
  --texto-display: max(5.625rem, 44px);

  --interlineado-display: 1;
  --interlineado-titular: 1.05;
  --interlineado-entrada: 1.25;
  --interlineado-cuerpo: 1.5;
  --interlineado-etiqueta: 1.3;

  --tracking-display: -0.02em;
  --tracking-titular: -0.015em;
  --tracking-etiqueta: 0.08em;

  --espacio-2xs: 0.25rem;
  --espacio-xs: 0.5rem;
  --espacio-sm: 0.75rem;
  --espacio-md: 1rem;
  --espacio-lg: 1.5rem;
  --espacio-xl: 2rem;
  --espacio-2xl: 3rem;
  --espacio-3xl: 4rem;
  --espacio-4xl: 6rem;
  --espacio-5xl: 8rem;

  --radio-control: 4px;
  --radio-tarjeta: 8px;
  --radio-redondo: 999px;

  --sombra-suave: 0 1px 2px rgb(7 13 20 / 0.12), 0 4px 12px -4px rgb(7 13 20 / 0.18);
  --sombra-papel: 0 1px 2px rgb(7 13 20 / 0.2), 0 14px 32px -10px rgb(7 13 20 / 0.42);
  --sombra-elevada: 0 2px 4px rgb(7 13 20 / 0.16), 0 28px 64px -18px rgb(7 13 20 / 0.5);

  --duracion-rapida: 150ms;
  --duracion-normal: 250ms;
  --duracion-lenta: 700ms;
  --curva-entrada: cubic-bezier(0.2, 0, 0, 1);
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);

  --ancho-lectura: 65ch;
  --objetivo-tactil: 44px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --superficie: var(--utm-noche-950);
    --superficie-elevada: var(--utm-noche-900);
    --superficie-hundida: #05090e;
    --tinta: var(--utm-papel-100);
    --tinta-media: rgb(245 240 230 / 0.8);
    --tinta-tenue: rgb(245 240 230 / 0.66);
    --linea: rgb(245 240 230 / 0.16);
    --linea-fuerte: rgb(245 240 230 / 0.32);
    --borde-control: rgb(245 240 230 / 0.42);
    --accion: var(--utm-azul-300);
    --accion-hover: var(--utm-azul-100);
    --sobre-accion: var(--utm-azul-950);
    --accion-suave: rgb(134 184 227 / 0.14);
    --foco: var(--utm-azul-300);
    --trazo-mano: #e0677a;
    --error: #ef8d9c;
    --velo: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --superficie: var(--utm-noche-950);
  --superficie-elevada: var(--utm-noche-900);
  --superficie-hundida: #05090e;
  --tinta: var(--utm-papel-100);
  --tinta-media: rgb(245 240 230 / 0.8);
  --tinta-tenue: rgb(245 240 230 / 0.66);
  --linea: rgb(245 240 230 / 0.16);
  --linea-fuerte: rgb(245 240 230 / 0.32);
  --borde-control: rgb(245 240 230 / 0.42);
  --accion: var(--utm-azul-300);
  --accion-hover: var(--utm-azul-100);
  --sobre-accion: var(--utm-azul-950);
  --accion-suave: rgb(134 184 227 / 0.14);
  --foco: var(--utm-azul-300);
  --trazo-mano: #e0677a;
  --error: #ef8d9c;
  --velo: rgb(0 0 0 / 0.6);
  color-scheme: dark;
}