/* Paylucent v2 — tokens
 *
 * Step 4 of the `web-design-system` skill: "put the same values into the code: CSS variables …
 * so pages use names, never raw values." This file is that half. DESIGN.md decides; this is
 * where it gets typed once and nobody writes a hex again.
 *
 * Copia del archivo autoritativo design/paylucent-v2/tokens.css (THE-85). No se edita aquí:
 * si hace falta un valor nuevo, se pide en THE-85 y se vuelve a copiar. Lo único que cambia
 * respecto al original son las rutas de las fuentes (`fonts/`, no `../fonts/`).
 *
 * Copy to `sites/paylucent/styles/tokens.css` and link it before every other sheet.
 * If a value here disagrees with DESIGN.md, DESIGN.md wins and this file is wrong.
 *
 * Checked with: node bin/contrast.mjs design/paylucent-v2/tokens.css
 * The @contrast claims below are DESIGN.md §2, measured, not estimated.
 *
 * The chart marks and the band ramp were produced by the `dataviz` palette validator, not by eye:
 *   node scripts/validate_palette.js "#2F49C9,#B02418" --mode light          → ALL CHECKS PASS
 *   node scripts/validate_palette.js "#6679EC,#E8614F" --mode dark --surface "#0E1424" → ALL PASS
 *   node scripts/validate_palette.js "#9DADEC,#7389DE,#4A62CE,#22389E" --ordinal --mode light → ALL PASS
 * Full run log: design/paylucent-v2/DATAVIZ-VALIDATION.md
 */

:root {
  color-scheme: light dark;

  /* ------------------------------------------------------------------ Ground — the page */
  --paper-000: #FFFFFF; /* page ground. true white, never cream */
  --paper-050: #F4F6FA; /* tinted panel: the explorer chrome, the form, the footer */
  --paper-100: #E9EDF5; /* second panel: table zebra, disabled field, pressed button */

  /* ---------------------------------------------------------------- Rule — the hairlines */
  --rule-200: #D3DAE6; /* every 1px rule a reader is meant to see: table, field, divider */
  --rule-100: #E4E9F1; /* rules a reader is not meant to read: chart gridlines */

  /* ------------------------------------------------------------------------ Ink — text */
  --ink-900: #0E1A33; /* display and body. a blue-black mixed from the accent, not a fake black */
  --ink-600: #475167; /* secondary text, captions, figure captions at body size */
  --ink-400: #6C7589; /* field hints, column headers, axis labels. NEVER below 14px */

  /* --------------------------------------------- Signal — the one accent, a reflex blue */
  --signal-700: #1B34A8; /* links, CTA fill, the selected role in the explorer */
  --signal-600: #2F49C9; /* the band mark in any chart; CTA hover fill */
  --signal-100: #DDE3FA; /* the band's interior fill behind a range bar */
  --signal-050: #F1F4FD; /* the selected row's tint */

  /* ----------------------------- Flag — reserved status. "outside the band", nothing else */
  --flag-700: #8E1F15; /* flag text on paper */
  --flag-600: #B02418; /* the out-of-band mark and the chip fill */
  --flag-050: #FBEFED; /* the flagged row's tint */

  /* ------------------------------------- Band ramp — ordinal, one hue, validated light→dark */
  --band-1: #9DADEC; /* quartile 1 */
  --band-2: #7389DE; /* quartile 2 */
  --band-3: #4A62CE; /* quartile 3 */
  --band-4: #22389E; /* quartile 4 */

  /* @contrast ink-900 on paper-000 >= 4.5    display and body on the page
   * @contrast ink-600 on paper-000 >= 4.5    secondary text and figure captions
   * @contrast ink-400 on paper-000 >= 4.5    field hints and axis labels, 14px floor
   * @contrast signal-700 on paper-000 >= 4.5 links and the CTA label when it is text
   * @contrast flag-700 on paper-000 >= 4.5   "outside the band" said in words
   * @contrast paper-000 on signal-700 >= 4.5 the CTA label on the blue fill
   * @contrast paper-000 on flag-600 >= 4.5   the flag chip label on the red fill
   * @contrast ink-900 on paper-050 >= 4.5    text on the tinted panel
   * @contrast ink-600 on paper-050 >= 4.5    secondary text on the tinted panel
   * @contrast signal-700 on signal-050 >= 4.5 accent text inside the selected row
   * @contrast signal-600 on paper-000 >= 3   non-text: the band mark against the page
   * @contrast flag-600 on paper-000 >= 3     non-text: the out-of-band mark
   * @contrast rule-200 on paper-000 < 3      deliberately quiet: a hairline is not text
   * @contrast rule-100 on paper-000 < 3      deliberately quieter still: gridlines recede
   * @contrast paper-000 on signal-100 < 4.5  FORBIDDEN — never white text on the band fill
   */

  /* ---------------------------------------------------------------------- Typography */
  --font-display: 'Newsreader Variable', Georgia, 'Times New Roman', serif; /* self-hosted, OFL */
  --font-text: 'Instrument Sans Variable', system-ui, sans-serif;           /* self-hosted, OFL */

  /* Measured in Chromium, not assumed (design/paylucent-v2/fonts/numerals-probe.png):
   * Newsreader's digits are already equal width — its figures are tabular by default.
   * Instrument Sans' digits are PROPORTIONAL by default: at 40px its "1" is ~12px narrower
   * than its "0". Every number in a column therefore carries --numeric-tabular. */
  --numeric-tabular: tabular-nums;

  /* THE-106: el h1 ya no ocupa el ancho entero del lienzo sino ocho de las doce columnas
   * (la apertura es una rejilla, no una pila). A 84px se partia en tres renglones dentro de
   * esa columna; a 64px entra en los dos que pide el reference board. */
  --step-display: clamp(2.5rem, 1.2rem + 3.4vw, 4rem); /* the h1, serif */
  --step-h2: clamp(1.75rem, 1.15rem + 2.3vw, 3rem);       /* section headings, serif */
  --step-h3: 1.25rem;                                     /* figure titles, serif */
  --step-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);  /* the subline, grotesque */
  --step-body: 1rem;
  --step-caption: 0.875rem;  /* 14px — the floor for --ink-400 */
  --step-micro: 0.8125rem;   /* 13px — only on --ink-600 or darker */

  --lh-display: 0.98;  --tr-display: -0.022em;  --wt-display: 400;
  --lh-h2: 1.06;       --tr-h2: -0.018em;       --wt-h2: 400;
  --lh-h3: 1.25;       --tr-h3: -0.01em;        --wt-h3: 500;
  --lh-lead: 1.5;      --tr-lead: -0.006em;
  --lh-body: 1.6;
  --lh-caption: 1.45;
  --lh-data: 1.3;      --tr-data: 0;            --wt-data: 500;

  /* --------------------------------------------------------- Spacing — a 4px base scale */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  /* El ritmo vertical de TODA banda de la home. Un solo valor: QA marco como fuga de
   * coherencia que los ritmos entre secciones bailaran (THE-82, C3). */
  --space-section: clamp(3.5rem, 2rem + 4.5vw, 7rem);

  --measure-prose: 62ch;   /* body copy never runs wider */
  --width-content: 74rem;  /* 1184px — the content column */
  --width-wide: 86rem;     /* 1376px — the explorer and full-bleed figures */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ----------------------------------------------------------------- Shape and depth */
  --radius-0: 0;          /* rules, table cells, chart marks: the editorial grid is square */
  --radius-1: 3px;        /* chips, tags, the concept label */
  --radius-2: 6px;        /* fields, buttons */
  --radius-3: 10px;       /* the explorer panel — the one large radius on the page */
  --radius-bar: 2px;      /* the rounded data-end on a range bar (dataviz spec) */

  /* One shadow exists, and only the explorer panel and the hover tooltip may wear it. */
  --shadow-panel: 0 1px 2px rgba(14, 26, 51, 0.04), 0 12px 32px -8px rgba(14, 26, 51, 0.10);
  --shadow-none: none;

  --border-hair: 1px;
  --focus-ring: 2px solid var(--signal-700);
  --focus-offset: 2px;

  /* -------------------------------------------------------------------------- Motion */
  --dur-micro: 120ms;  /* hover tint, focus ring */
  --dur-state: 220ms;  /* a range bar re-drawing after a role change */
  --dur-enter: 420ms;  /* the one orchestrated hero reveal, once, on load */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------------------------------------------------------------------------------------
 * Dark — a supported scheme, not the brand's home. Same ink family, lights-off.
 * Named separately so bin/contrast.mjs can measure both sets in one pass.
 * ------------------------------------------------------------------------------------ */
:root {
  --d-paper-000: #0E1424; /* ground. deep ink navy, the accent's own hue. not black */
  --d-paper-050: #161E33;
  --d-paper-100: #1E2842;
  --d-rule-200: #2C3755;
  --d-rule-100: #212B45;

  --d-ink-900: #E9EDF7;
  --d-ink-600: #A8B2C8;
  --d-ink-400: #8691AB;

  --d-signal-700: #9DADEC; /* the accent inverts: a light tint carries links and the CTA fill */
  --d-signal-600: #6679EC; /* the band mark */
  --d-signal-100: #263466;
  --d-signal-050: #1A2342;

  --d-flag-700: #F08D7E;
  --d-flag-600: #E8614F;
  --d-flag-050: #2E1A1A;

  --d-band-1: #C3CDF5;
  --d-band-2: #9DADEC;
  --d-band-3: #7389DE;
  --d-band-4: #4A62CE;

  /* @contrast d-ink-900 on d-paper-000 >= 4.5    body on the dark ground
   * @contrast d-ink-600 on d-paper-000 >= 4.5    secondary text
   * @contrast d-ink-400 on d-paper-000 >= 4.5    hints and axis labels, 14px floor
   * @contrast d-signal-700 on d-paper-000 >= 4.5 links
   * @contrast d-flag-700 on d-paper-000 >= 4.5   "outside the band" in words
   * @contrast d-paper-000 on d-signal-700 >= 4.5 the CTA label on the light-blue fill
   * @contrast d-ink-900 on d-paper-050 >= 4.5    text on the raised panel
   * @contrast d-signal-600 on d-paper-000 >= 3   non-text: the band mark
   * @contrast d-flag-600 on d-paper-000 >= 3     non-text: the out-of-band mark
   * @contrast d-rule-200 on d-paper-000 < 3      hairlines stay quiet in the dark too
   */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-000: var(--d-paper-000);
    --paper-050: var(--d-paper-050);
    --paper-100: var(--d-paper-100);
    --rule-200: var(--d-rule-200);
    --rule-100: var(--d-rule-100);
    --ink-900: var(--d-ink-900);
    --ink-600: var(--d-ink-600);
    --ink-400: var(--d-ink-400);
    --signal-700: var(--d-signal-700);
    --signal-600: var(--d-signal-600);
    --signal-100: var(--d-signal-100);
    --signal-050: var(--d-signal-050);
    --flag-700: var(--d-flag-700);
    --flag-600: var(--d-flag-600);
    --flag-050: var(--d-flag-050);
    --band-1: var(--d-band-1);
    --band-2: var(--d-band-2);
    --band-3: var(--d-band-3);
    --band-4: var(--d-band-4);
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-state: 1ms;
    --dur-enter: 1ms;
  }
}

/* ---------------------------------------------------------------------------- Fonts
 * Self-hosted, relative paths, OFL licences beside the files in design/paylucent-v2/fonts/.
 * Both are variable (wght). Preload only the two romans; the italic loads on demand. */
@font-face {
  font-family: 'Newsreader Variable';
  src: url('fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader Variable';
  src: url('fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  src: url('fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}