/* ============================================================
   tokens.css  ·  KAZ6 system "v12 — MASTHEAD"
   Editorial brutalist. Print logic, not UI logic: architecture-
   firm monograph, not portfolio-on-display. Bone/greige paper
   ground (cool, not Apple-gray, not warm cream), near-black ink,
   one owned accent (deep red — exactly three jobs, see below),
   one inverted band (the nav — used once, not everywhere), zero
   rounded corners. Change a value here; it propagates everywhere.
   ============================================================ */
:root {
  color-scheme: light dark;

  /* ground — cool-leaning bone/greige. NOT #F5F5F7 (Apple gray),
     NOT #F4F1EA (warm cream). Deepened per KO (read as too close to
     white) + a static grain texture in base.css carries the rest of
     the grit, alongside the photography. */
  --paper:   #e2ddcc;
  --paper-2: #d9d3bf;                 /* raised fill — awaiting states, hairline panels */
  --ink:     #141414;
  --ink-2:   rgba(20, 20, 20, 0.62);  /* secondary text */
  /* Tertiary was set at 40% ink for the look of it and measured 2.46:1 on
     paper — every eyebrow, ledger key and caption on the site was under AA
     the whole time. 66% keeps the same quiet register and clears it. */
  --ink-3:   rgba(20, 20, 20, 0.66);
  --hair:    rgba(20, 20, 20, 0.16);  /* hairline rules */

  --bg:   var(--paper);
  --fg:   var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--hair);

  /* the ONE inverted band — the nav, permanently. not a light/dark
     flip used elsewhere (footer stays paper — see footer.css). */
  --band-bg:   var(--ink);
  --band-fg:   var(--paper);
  --band-fg-2: rgba(234, 231, 224, 0.66);
  --band-line: rgba(234, 231, 224, 0.18);

  --footer-bg:   var(--paper);
  --footer-fg:   var(--ink);
  --footer-fg-2: var(--ink-2);
  --footer-fg-3: var(--ink-3);
  --footer-line: var(--hair);

  /* THE one accent — deep red. Exactly three jobs, nowhere else: a
     portion of display headlines (the second line of a phero-title),
     the interpunct in every scoreline (38·0), primary CTAs. Contrast
     checked both directions against paper: ~5.04:1, clears WCAG AA. */
  --red:    #c1121f;
  --on-red: #e2ddcc;
  /* Red carries two different loads. As a FILL it only has to hold its own
     label; as TEXT it has to hold the whole ground. On paper one value does
     both (4.58:1 either way). On the dark ground it can't: #c1121f as text
     falls to 2.86:1, so red-as-text goes UP while the fill stays exactly
     the red the site is built on. */
  --red-ink: var(--red);

  /* photography is grayscale by system rule; on a dark ground it also has
     to stop glaring, so the filter is a token rather than a literal */
  --img-filter: grayscale(1);
  /* A caption plate is a dark chip laid over a photograph. It is dark in
     BOTH themes — a photo doesn't get lighter at night — so its ink can't
     be --paper, which flips. */
  --plate-bg: rgba(20, 20, 20, 0.78);
  --plate-fg: #e8e5dc;
  /* grain multiplies into a light ground and would only muddy a dark one,
     where it has to lighten instead */
  --grain-blend: multiply;
  --grain-opacity: 0.05;

  /* type — Saira Condensed carries every display headline: a tight
     condensed grotesk with real structural weight at huge sizes,
     distinct from the Space Grotesk / Archivo / Anton default-
     portfolio trio. Set in CSS uppercase (data.js copy stays sentence
     case). Inter is the neutral body grotesk. JetBrains Mono runs
     every tracked label, caption and tabular scoreline figure — a
     case-file register under the display face's weight. */
  --f-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --f-body:    "Inter", -apple-system, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-hero:  clamp(3.6rem, 12vw, 9.5rem);
  --t-h2:    clamp(2.4rem, 7vw, 5rem);
  --t-h3:    clamp(1.4rem, 3vw, 1.9rem);
  --t-lead:  clamp(1.0625rem, 1.6vw, 1.25rem);
  --t-body:  1.0625rem;
  --t-label: 0.8125rem;
  --t-micro: 0.75rem;
  --t-num:   clamp(2.6rem, 6.4vw, 4.5rem);     /* ledger numerals */
  --t-score: clamp(4rem, 11vw, 9rem);          /* the signature scoreline size */

  /* 8-point spacing */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --s12: 96px; --s16: 140px; --s20: 176px;

  --maxw:   1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* border-radius: 0. everywhere. always. */
  --r-chip:  0;
  --r-card:  0;
  --r-media: 0;

  /* motion — one orchestrated moment (the index hero), everything
     else static. what's left is quick, not a scroll-reveal utility. */
  --dur-1: 0.2s;
  --dur-2: 0.5s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   THE SAME PAPER, UNLIT
   ------------------------------------------------------------
   Dark is not a second design. The ground goes to near-black with
   the greige still in it, the ink becomes the bone the paper was,
   and everything relational follows on its own — including the ONE
   inverted band, which stays inverted precisely because --band-bg
   is --ink and --band-fg is --paper. Invert the two and the nav
   becomes a light band on a dark page, which is the same idea
   wearing the other coat.

   Only the values that CAN'T follow are restated: the band's own
   secondary ink (the band flipped, so its text has to), red as
   text, and the grain, which multiplies on paper and must screen
   on ink.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #181815;
    --paper-2: #22221e;
    --ink:     #e8e5dc;
    --ink-2:   rgba(232, 229, 220, 0.70);
    --ink-3:   rgba(232, 229, 220, 0.56);
    --hair:    rgba(232, 229, 220, 0.20);

    --band-fg-2: rgba(24, 24, 21, 0.72);
    --band-line: rgba(24, 24, 21, 0.20);

    --on-red:  #e8e5dc;
    --red-ink: #ec5560;

    --img-filter: grayscale(1) brightness(0.82) contrast(1.05);
    --grain-blend: screen;
    --grain-opacity: 0.04;
  }
}

:root[data-theme="dark"] {
  --paper:   #181815;
  --paper-2: #22221e;
  --ink:     #e8e5dc;
  --ink-2:   rgba(232, 229, 220, 0.70);
  --ink-3:   rgba(232, 229, 220, 0.56);
  --hair:    rgba(232, 229, 220, 0.20);

  --band-fg-2: rgba(24, 24, 21, 0.72);
  --band-line: rgba(24, 24, 21, 0.20);

  --on-red:  #e8e5dc;
  --red-ink: #ec5560;

  --img-filter: grayscale(1) brightness(0.82) contrast(1.05);
  --grain-blend: screen;
  --grain-opacity: 0.04;
}