/* ============================================================================
   Sistema de diseño · Departamento de Matemáticas y Estadística (Unimagdalena)
   Adaptación del sistema descrito en DISENO_SISTEMA.md y FOOTER_DISENO.md a
   este proyecto, que no compila Tailwind: los mismos tokens, utilidades y
   reglas de composición, expresados en CSS plano.

   Las siete reglas del sistema, resumidas, porque gobiernan todo lo que sigue:
     1. Cero bordes redondeados salvo en decoración (blobs, marca de agua).
     2. Alternancia claro / oscuro por secciones.
     3. `ring` (filete de 1px sin desplazar la caja) en lugar de `border`.
     4. Dorado solo sobre oscuro; vino y terracota solo sobre claro.
     5. Kicker + título display en cada sección.
     6. Movimiento sobrio: elevar medio píxel, revelar al entrar, nada rebota.
     7. Marca de agua matemática, tenue y decorativa.

   Ningún otro fichero declara hex.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Paleta institucional (idéntica a @theme del sistema) ------------- */
  --azul: #00356a;
  --azul-claro: #0a4d8f;
  --vino: #7a032c;
  --dorado: #e3a442;
  --terracota: #c46041;
  --niebla: #f6f8fb;
  --tinta: #12233a;

  /* Extremos del gradiente oscuro; el sistema los usa literales. */
  --azul-profundo: #00243f;
  --azul-alto: #143a6b;

  /* --- Superficies ------------------------------------------------------
     Sobre `bg-white` las tarjetas van en niebla; sobre niebla, en blanco. */
  --paper: #ffffff;
  --paper-sunk: var(--niebla);
  --paper-raised: #ffffff;

  /* --- Filetes (el «ring» del sistema) ----------------------------------- */
  --ring: rgb(0 53 106 / 0.10);
  --ring-strong: rgb(0 53 106 / 0.18);
  --ring-soft: rgb(0 53 106 / 0.06);
  --hairline: var(--ring);
  --hairline-soft: var(--ring-soft);

  /* --- Texto: la escala de opacidad del sistema --------------------------
     Titular azul · cuerpo tinta/75 · secundario tinta/70 · terciario tinta/55 */
  --ink: var(--tinta);
  --ink-strong: var(--azul);
  --ink-soft: rgb(18 35 58 / 0.78);
  --ink-muted: rgb(18 35 58 / 0.58);
  --ink-inverse: #ffffff;

  /* Sobre fondo oscuro */
  --on-dark: rgb(255 255 255 / 0.75);
  --on-dark-muted: rgb(255 255 255 / 0.55);
  --ring-dark: rgb(255 255 255 / 0.10);
  --surface-dark: rgb(255 255 255 / 0.05);
  --surface-dark-hover: rgb(255 255 255 / 0.10);

  /* --- Competencias -----------------------------------------------------
     Tres matices de la propia paleta, para no importar colores de fuera:
     interpretación → azul, formulación → terracota, argumentación → vino. */
  --comp-i: var(--azul);
  --comp-i-bg: rgb(0 53 106 / 0.08);
  --comp-f: #9a4526;
  --comp-f-bg: rgb(196 96 65 / 0.14);
  --comp-a: var(--vino);
  --comp-a-bg: rgb(122 3 44 / 0.09);

  /* --- Semántica --------------------------------------------------------
     El sistema define éxito como dorado/15 sobre azul y error como vino/10.
     El cuestionario necesita además un par correcto/incorrecto inequívoco:
     verde institucional apagado frente a vino, siempre con marca y etiqueta. */
  --ok: #1a6144;
  --ok-bg: rgb(26 97 68 / 0.10);
  --ok-line: rgb(26 97 68 / 0.35);
  --bad: var(--vino);
  --bad-bg: rgb(122 3 44 / 0.08);
  --bad-line: rgb(122 3 44 / 0.30);
  --warn: #96601a;
  --warn-bg: rgb(227 164 66 / 0.15);
  --warn-line: rgb(227 164 66 / 0.45);
  --info: var(--azul);
  --info-bg: rgb(0 53 106 / 0.06);

  /* --- Foco -------------------------------------------------------------- */
  /* Acento dependiente del fondo (regla 4): sobre claro, terracota y vino;
     sobre oscuro, dorado. El tema oscuro solo cambia estos dos tokens y todo
     lo que los usa —kickers, etiquetas, palabra destacada— vira con ellos. */
  --acento: var(--terracota);
  --acento-em: var(--vino);

  --focus-ring: var(--dorado);
  --focus-halo: rgb(0 53 106 / 0.15);

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(2rem, 3.6vw, 3rem);
  --fs-3xl: clamp(2.75rem, 6vw, 4.5rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-normal: 1.6;

  /* Kicker: mayúsculas con tracking amplio. */
  --tracking-label: 0.18em;
  --tracking-label-tight: 0.14em;
  --tracking-display: -0.02em;

  /* --- Espaciado --------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* --- Formas -----------------------------------------------------------
     Regla 1 del sistema: nada se redondea. `--r-full` queda solo para lo
     decorativo (blobs difuminados), nunca para contenido. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-full: 999px;
  --rail: 2px; /* filete de acento de los bloques marcados */

  /* --- Elevación ---------------------------------------------------------
     El sistema usa shadow-sm en tarjetas y shadow-lg teñido en botones. */
  --shadow-sm: 0 1px 2px rgb(0 36 63 / 0.06);
  --shadow-md: 0 10px 24px rgb(0 36 63 / 0.10);
  --shadow-lg: 0 18px 40px rgb(0 36 63 / 0.16);
  --shadow-azul: 0 10px 22px rgb(0 53 106 / 0.25);
  --shadow-vino: 0 10px 22px rgb(122 3 44 / 0.30);
  --shadow-dorado: 0 10px 22px rgb(227 164 66 / 0.25);

  /* --- Medidas -----------------------------------------------------------
     max-w-7xl del sistema = 80rem; los canalones, px-4 / sm:px-6 / lg:px-8. */
  --shell-max: 80rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --speed-fast: 150ms;
  --speed: 300ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}