/* tokens.css — fuente única de color, tipografía, espacio, radio, sombra y
   motion del sistema visual de AIVI.

   Tres niveles:
     1. Primitivos (--ui-p-*): valores crudos. Solo este archivo los usa.
     2. Semánticos (--ui-*): lo que el resto del CSS consume.
     3. De componente: se declaran en components.css apuntando a semánticos.

   Dos registros, una sola paleta. `data-register` en <body> (o en cualquier
   contenedor) cambia tipografía, escala, espaciado y densidad; NUNCA los
   colores:
     editorial   — superficies públicas, reportes y PDFs (Newsreader en titulares).
     operational — panel autenticado (Inter en todo, denso).

   Regla del repo: el CSS migrado fuera de este archivo no escribe colores hex
   ni !important (lo verifica ui/tests/hygiene.test.js). Los contrastes AA de
   cada par de uso real los verifica ui/tests/tokens.test.js. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../home/fonts/inter-latin-variable.65850a373e25.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../home/fonts/newsreader-latin-variable.0a301b6df4c7.woff2") format("woff2");
}

:root {
  /* ---- Nivel 1: primitivos ---- */
  --ui-p-ivory: #f7f4ed;
  --ui-p-ivory-sunken: #efeadd;
  --ui-p-paper: #fffdf9;
  --ui-p-white: #ffffff;
  --ui-p-ink: #19201d;
  --ui-p-ink-muted: #4d5651;
  --ui-p-ink-subtle: #5a645d;
  --ui-p-line: #e2ddd0;
  --ui-p-line-input: #857e6b;

  --ui-p-green: #29443a;
  --ui-p-green-hover: #1f342c;
  --ui-p-green-active: #172820;
  --ui-p-green-soft: #e5ece7;
  --ui-p-green-link: #24493d;
  --ui-p-green-link-hover: #163126;

  --ui-p-amber: #a96722;
  --ui-p-amber-text: #8a5119;
  --ui-p-amber-soft: #f6e6d0;
  --ui-p-amber-line: #e3c79f;

  --ui-p-info: #1f5382;
  --ui-p-info-soft: #e0ebf6;
  --ui-p-info-line: #b9d0e8;

  --ui-p-success: #1e6a44;
  --ui-p-success-hover: #17553a;
  --ui-p-success-soft: #e3f1e8;
  --ui-p-success-line: #b7dcc5;

  --ui-p-warning: #7a4d00;
  --ui-p-warning-soft: #fbeecf;
  --ui-p-warning-line: #ecd28f;

  --ui-p-danger: #a12b25;
  --ui-p-danger-hover: #86211c;
  --ui-p-danger-soft: #f8e3e0;
  --ui-p-danger-line: #eab6b1;

  --ui-p-neutral: #3f4843;
  --ui-p-neutral-soft: #ebe7dc;
  --ui-p-neutral-line: #d6d0c0;

  /* ---- Nivel 2: semánticos de color ---- */
  --ui-bg: var(--ui-p-ivory);
  --ui-surface: var(--ui-p-paper);
  --ui-surface-sunken: var(--ui-p-ivory-sunken);
  --ui-text: var(--ui-p-ink);
  --ui-text-muted: var(--ui-p-ink-muted);
  --ui-text-subtle: var(--ui-p-ink-subtle);
  --ui-border: var(--ui-p-line);
  --ui-border-input: var(--ui-p-line-input);

  --ui-primary: var(--ui-p-green);
  --ui-primary-hover: var(--ui-p-green-hover);
  --ui-primary-active: var(--ui-p-green-active);
  --ui-primary-soft: var(--ui-p-green-soft);
  --ui-on-primary: var(--ui-p-white);
  --ui-link: var(--ui-p-green-link);
  --ui-link-hover: var(--ui-p-green-link-hover);

  --ui-accent: var(--ui-p-amber);
  --ui-accent-text: var(--ui-p-amber-text);
  --ui-accent-soft: var(--ui-p-amber-soft);
  --ui-accent-line: var(--ui-p-amber-line);

  --ui-focus: var(--ui-p-amber-text);
  /* Mismo color que --ui-focus (138 81 25); tokens.test.js lo verifica. */
  --ui-focus-ring: rgb(138 81 25 / 0.35);

  --ui-on-solid: var(--ui-p-white);
  --ui-success-solid: var(--ui-p-success);
  --ui-success-solid-hover: var(--ui-p-success-hover);
  --ui-danger-solid: var(--ui-p-danger);
  --ui-danger-solid-hover: var(--ui-p-danger-hover);
  /* Confidential (Work) band on PM cards, dialogs and the mission page. */
  --ui-confidential-solid: var(--ui-p-info);
  --ui-confidential-on: var(--ui-p-white);

  /* Tonos de estado: texto, fondo y borde. */
  --ui-tone-neutral-fg: var(--ui-p-neutral);
  --ui-tone-neutral-bg: var(--ui-p-neutral-soft);
  --ui-tone-neutral-border: var(--ui-p-neutral-line);
  --ui-tone-info-fg: var(--ui-p-info);
  --ui-tone-info-bg: var(--ui-p-info-soft);
  --ui-tone-info-border: var(--ui-p-info-line);
  --ui-tone-success-fg: var(--ui-p-success);
  --ui-tone-success-bg: var(--ui-p-success-soft);
  --ui-tone-success-border: var(--ui-p-success-line);
  --ui-tone-warning-fg: var(--ui-p-warning);
  --ui-tone-warning-bg: var(--ui-p-warning-soft);
  --ui-tone-warning-border: var(--ui-p-warning-line);
  --ui-tone-danger-fg: var(--ui-p-danger);
  --ui-tone-danger-bg: var(--ui-p-danger-soft);
  --ui-tone-danger-border: var(--ui-p-danger-line);
  --ui-tone-accent-fg: var(--ui-p-amber-text);
  --ui-tone-accent-bg: var(--ui-p-amber-soft);
  --ui-tone-accent-border: var(--ui-p-amber-line);
  --ui-tone-inverse-fg: var(--ui-p-white);
  --ui-tone-inverse-bg: var(--ui-p-ink);
  --ui-tone-inverse-border: var(--ui-p-ink);

  /* ---- Nivel 2: escalas que no cambian entre registros ---- */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-10: 2.5rem;
  --ui-space-12: 3rem;

  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.625rem;
  --ui-radius-lg: 1rem;
  --ui-radius-pill: 999px;

  /* Las sombras usan el mismo color que --ui-p-ink (25 32 29). */
  --ui-shadow-1: 0 1px 2px rgb(25 32 29 / 0.06), 0 1px 1px rgb(25 32 29 / 0.04);
  --ui-shadow-2: 0 8px 24px -8px rgb(25 32 29 / 0.16), 0 2px 6px rgb(25 32 29 / 0.06);

  --ui-motion-fast: 120ms;
  --ui-motion-ui: 220ms;
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --ui-page-max: 76rem;

  --ui-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ---- Registros: tipografía, escala y densidad. Nunca color. ---- */

[data-register="editorial"] {
  --ui-font-heading: var(--ui-font-serif);
  --ui-font-body: var(--ui-font-sans);
  --ui-fs-xs: 0.8125rem;
  --ui-fs-sm: 0.9375rem;
  --ui-fs-base: 1.0625rem;
  --ui-fs-lg: 1.25rem;
  --ui-fs-xl: 1.625rem;
  --ui-fs-2xl: 2.25rem;
  --ui-fs-3xl: 3rem;
  --ui-lh-body: 1.65;
  --ui-lh-heading: 1.12;
  --ui-heading-weight: 500;
  --ui-heading-tracking: -0.02em;
  --ui-control-h: 2.75rem;
  --ui-row-y: 0.9rem;
  --ui-card-pad: 1.75rem;
  --ui-gap: 1.5rem;
  --ui-measure: 65ch;
}

[data-register="operational"] {
  --ui-font-heading: var(--ui-font-sans);
  --ui-font-body: var(--ui-font-sans);
  --ui-fs-xs: 0.75rem;
  --ui-fs-sm: 0.8125rem;
  --ui-fs-base: 0.9375rem;
  --ui-fs-lg: 1.0625rem;
  --ui-fs-xl: 1.25rem;
  --ui-fs-2xl: 1.625rem;
  --ui-fs-3xl: 2rem;
  --ui-lh-body: 1.5;
  --ui-lh-heading: 1.2;
  --ui-heading-weight: 650;
  --ui-heading-tracking: -0.015em;
  --ui-control-h: 2.5rem;
  --ui-row-y: 0.6rem;
  --ui-card-pad: 1.25rem;
  --ui-gap: 1rem;
  --ui-measure: 72ch;
}

/* ---- Puente: Bootstrap 5.3 y alias legados (home/theme.css) ----
   Solo tiene efecto donde se cargue este archivo Y exista data-register: las
   páginas públicas todavía no lo cargan. Los triplets --bs-*-rgb repiten el
   color del token indicado; tokens.test.js verifica que coincidan. */

[data-register] {
  --bs-body-bg: var(--ui-bg);
  --bs-body-color: var(--ui-text);
  --bs-body-font-family: var(--ui-font-body);
  --bs-body-font-size: var(--ui-fs-base);
  --bs-body-line-height: var(--ui-lh-body);
  --bs-secondary-color: var(--ui-text-muted);
  --bs-border-color: var(--ui-border);
  --bs-border-radius: var(--ui-radius-md);
  --bs-border-radius-lg: var(--ui-radius-lg);
  --bs-primary: var(--ui-primary);
  --bs-primary-rgb: 41, 68, 58;
  --bs-link-color: var(--ui-link);
  --bs-link-color-rgb: 36, 73, 61;
  --bs-link-hover-color: var(--ui-link-hover);
  --bs-link-hover-color-rgb: 22, 49, 38;
  --bs-success-rgb: 30, 106, 68;
  --bs-danger-rgb: 161, 43, 37;

  --color-bg: var(--ui-bg);
  --color-bg-alt: var(--ui-surface-sunken);
  --color-surface: var(--ui-surface);
  --color-text: var(--ui-text);
  --color-text-muted: var(--ui-text-muted);
  --color-accent: var(--ui-primary);
  --color-accent-dark: var(--ui-primary-hover);
  --color-accent-soft: var(--ui-primary-soft);
  --font-heading: var(--ui-font-heading);
  --font-body: var(--ui-font-body);
}