/*
 * tokens.css — fuente tecnica de los valores visuales de Website V2.
 *
 * Traduccion MECANICA de "Sistema Visual V2", secciones 3, 5, 6 y 11.
 * Ningun valor se inventa, se redondea ni se reinterpreta aqui. Si falta
 * uno, se pide; no se deduce.
 *
 * CSS servido directamente al navegador: sin PostCSS, sin @custom-media,
 * sin preprocesador. Los breakpoints existen como custom properties para
 * consumo desde JavaScript, pero dentro de @media el numero se repite
 * literalmente porque la sintaxis de CSS lo obliga. Esa es la unica
 * duplicacion admitida del sistema.
 *
 * Fase 2 define tokens. La fase 3 materializa el shell.
 */

/* ------------------------------------------------------------------ *
 * Fuentes autoalojadas — Sistema Visual V2, seccion 3
 * Subset latin + latin-ext, roman variable, sin italicas.
 * Procedencia y comando de generacion en assets/fonts/PROVENANCE.md
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-roman-var.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-roman-var.woff2") format("woff2");
}

:root {
  /* ---------------------------------------------------------------- *
   * Familias y fallbacks — seccion 3
   * ---------------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  /* ---------------------------------------------------------------- *
   * Superficies — seccion 5
   * ---------------------------------------------------------------- */
  --surface-base: #f6f8fc;      /* fondo principal, nunca blanco puro   */
  --surface-raised: #ffffff;    /* elevacion puntual                     */
  --surface-soft: #eaeff7;      /* agrupacion sutil                      */
  --surface-inverse: #071022;   /* hero, superficie de valor, footer     */

  /* ---------------------------------------------------------------- *
   * Tinta — seccion 5
   * ---------------------------------------------------------------- */
  --ink-primary: #0a1428;
  --ink-secondary: #33415c;
  --ink-muted: #596880;
  --ink-inverse: #e9eff8;

  /* Variantes para superficie inverse */
  --ink-primary-on-inverse: #e9eff8;
  --ink-secondary-on-inverse: #afc0d6;
  --ink-muted-on-inverse: #8496af;

  /* ---------------------------------------------------------------- *
   * Accion — seccion 5
   * ---------------------------------------------------------------- */
  --accent-action: #0a6c8c;
  --accent-action-hover: #08566f;
  --accent-action-on-inverse: #12c7ec;
  --accent-action-hover-on-inverse: #3fd4f0;

  /* ---------------------------------------------------------------- *
   * Estado — seccion 5
   * ---------------------------------------------------------------- */
  --state-available: #0a7c96;
  --state-progress: #9c5d00;
  --state-future: #616f84;

  --state-available-on-inverse: #12c7ec;
  --state-progress-on-inverse: #e8a33c;
  --state-future-on-inverse: #8fa0b8;

  /* ---------------------------------------------------------------- *
   * Estructura — seccion 5
   * --rule inverse corregido de #24354F a #596880 el 2026-08-25.
   * Ver "2026-08-25 - Correccion de la Matriz de Contraste".
   * --rule-soft es decorativo y esta exento del gate de contraste.
   * ---------------------------------------------------------------- */
  --rule: #7e90a8;
  --rule-soft: #d3dce8;
  --focus: #0a6c8c;

  --rule-on-inverse: #596880;
  --rule-soft-on-inverse: #16233a;
  --focus-on-inverse: #12c7ec;

  /* ---------------------------------------------------------------- *
   * Contenedores — seccion 6
   * ---------------------------------------------------------------- */
  --w-text: 680px;
  --w-content: 1120px;
  --w-wide: 1320px;
  --w-full: 100%;

  /* ---------------------------------------------------------------- *
   * Breakpoints — seccion 6
   * Sin unidad, para que JavaScript los componga en matchMedia.
   * Dentro de @media el numero se repite literalmente: las custom
   * properties no funcionan como condicion de media query.
   * ---------------------------------------------------------------- */
  --bp-320: 320;
  --bp-375: 375;
  --bp-768: 768;
  --bp-1024: 1024;
  --bp-1280: 1280;
  --bp-1440: 1440;

  /* Grid del breakpoint mas estrecho. Se redefine por @media abajo. */
  --grid-columns: 4;
  --grid-gutter: 12px;
  --grid-margin: 16px;

  /* ---------------------------------------------------------------- *
   * Espaciado base 4 — seccion 6
   * Ritmo variable. Prohibido usar un unico valor como padding por
   * defecto de todo contenedor.
   * ---------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------------------------------------------------------------- *
   * Escala tipografica — seccion 6
   * Fluida con clamp(). Los extremos son los valores canonicos de
   * movil y desktop; el tramo intermedio interpola por viewport.
   * ---------------------------------------------------------------- */
  --size-display: clamp(40px, 2.5rem + 2.5vw, 68px);
  --size-h2: clamp(30px, 1.875rem + 1.5vw, 42px);
  --size-h3: clamp(22px, 1.375rem + 0.5vw, 26px);
  --size-body-large: clamp(18px, 1.125rem + 0.25vw, 20px);
  --size-body: clamp(16px, 1rem + 0.125vw, 17px);
  --size-small: clamp(14px, 0.875rem + 0.125vw, 15px);
  --size-caption: 13px;
  --size-state-label: clamp(11px, 0.6875rem + 0.125vw, 12px);
  --size-data-large: clamp(38px, 2.375rem + 2.25vw, 56px);

  --lh-display: 1.02;
  --lh-h2: 1.1;
  --lh-h3: 1.24;
  --lh-body-large: 1.55;
  --lh-body: 1.62;
  --lh-small: 1.55;
  --lh-caption: 1.45;
  --lh-state-label: 1.2;
  --lh-data-large: 1;

  --weight-regular: 400;
  --weight-semibold: 600;

  --tracking-display: -0.03em;
  --tracking-h2: -0.02em;
  --tracking-h3: -0.01em;
  --tracking-body: 0;
  --tracking-caption: 0.01em;
  --tracking-state-label: 0.09em;
  --tracking-data-large: -0.02em;

  --measure: 68ch; /* medida de linea 65-75 caracteres */

  /* ---------------------------------------------------------------- *
   * Geometria — seccion 6
   * Prohibidos radios >= 12px. El rombo no se usa en controles.
   * ---------------------------------------------------------------- */
  --radius-control: 4px;   /* boton, input                */
  --radius-figure: 6px;    /* figura, captura, video      */
  --radius-inverse: 0;     /* superficie inverse, a sangre */
  --size-data-unit: 10px;  /* circulo de unidad de dato   */
  --size-trace-node: 9px;  /* cuadrado rotado 45 grados   */
  --stroke-rule: 1px;      /* filete, borde de input      */

  /* ---------------------------------------------------------------- *
   * Motion — seccion 11
   * Nunca ease-in en interfaz. Maximo dos elementos animados por vista.
   * Los consume la fase 9; se declaran aqui porque son tokens.
   * ---------------------------------------------------------------- */
  --duration-fast: 160ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-trace: 700ms;
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emphasis: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-scrub: linear;
  --stagger: 50ms;
  --scrub: 0.7;
}

/* ------------------------------------------------------------------ *
 * Grid por breakpoint — seccion 6
 * El numero se repite literalmente por la sintaxis de @media.
 * ------------------------------------------------------------------ */

@media (min-width: 375px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 16px;
    --grid-margin: 20px;
  }
}

@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-gutter: 24px;
    --grid-margin: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 24px;
    --grid-margin: 48px;
  }
}

@media (min-width: 1280px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 28px;
    --grid-margin: 64px;
  }
}

@media (min-width: 1440px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 32px;
    --grid-margin: 88px;
  }
}

/* ------------------------------------------------------------------ *
 * Superficie inverse — seccion 2
 * Inverse esta acotado al hero, una superficie de valor y el footer.
 * NO es un tema oscuro y no responde a prefers-color-scheme.
 * ------------------------------------------------------------------ */

[data-surface="inverse"] {
  --ink-primary: var(--ink-primary-on-inverse);
  --ink-secondary: var(--ink-secondary-on-inverse);
  --ink-muted: var(--ink-muted-on-inverse);
  --accent-action: var(--accent-action-on-inverse);
  --accent-action-hover: var(--accent-action-hover-on-inverse);
  --state-available: var(--state-available-on-inverse);
  --state-progress: var(--state-progress-on-inverse);
  --state-future: var(--state-future-on-inverse);
  --rule: var(--rule-on-inverse);
  --rule-soft: var(--rule-soft-on-inverse);
  --focus: var(--focus-on-inverse);

  background-color: var(--surface-inverse);
  color: var(--ink-primary);
}