/* ntvrli design system — tokens
   Single source of truth. Nothing in the site hardcodes a value that lives here. */

:root {
  /* ── Colour ──────────────────────────────────────────────────────────
     Three grounds, three inks. Every pairing below is contrast-checked;
     see README.md for the ratios and the rules that follow from them. */
  --bone:      #D8D2C4;   /* ground A — the default page */
  --oxblood:   #5C1F1A;   /* ground B — mass, the accent field */
  --ink:       #14100E;   /* ground C — and primary type on bone */

  --slate:     #4A5257;   /* secondary type on bone. 5.06:1, passes AA */
  --raw:       #B4AA96;   /* secondary type on oxblood/ink. 5.5:1, passes AA */
  --steel:     #6F7C80;   /* display tone ONLY — 2.8:1, never body text */

  /* Role tokens. Components reference these, never the raw colours above,
     so a band can re-map its own foreground without touching a component. */
  --ground:    var(--bone);
  --fg:        var(--ink);
  --fg-quiet:  var(--slate);
  --fg-accent: var(--oxblood);

  /* ── Type ────────────────────────────────────────────────────────────
     Two families. Archivo Black carries every large size; Martian Mono
     carries everything else. There is no third face and no middle weight. */
  --face-mass: "Archivo Black", "Archivo Black Fallback", "Helvetica Neue", Arial, sans-serif;
  --face-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Five steps with deliberate gaps. Nothing sits between mass and lead —
     that absence is the system, not an oversight. */
  --t-crop:  clamp(3.6rem, 14.5vw, 13.5rem);  /* cropped statement */
  --t-mass:  clamp(2.2rem, 6.4vw, 5rem);      /* section heading */
  --t-lead:  clamp(1.05rem, 1rem + .5vw, 1.35rem);
  --t-say:   clamp(1.1rem, 1rem + .7vw, 1.6rem);   /* the what-is-this line */
  --t-body:  1rem;
  --t-micro: .8125rem;   /* 13px. 11px tracked uppercase was legible in a
                            mockup and tiring on a live page — this is the floor */
  --micro-weight: 500;   /* small caps need weight to hold at this size */

  --lh-mass: .82;
  --lh-lead: 1.5;
  --lh-body: 1.72;
  --lh-micro: 1.6;

  --track-mass: -.03em;
  --track-micro: .1em;   /* .14em fought the larger size and hurt word shape */

  /* Measure. Mono is dense; long mono paragraphs punish the reader, so
     running text is capped short by design. See README.md. */
  --measure: 58ch;
  --measure-lead: 34ch;

  /* ── Space ───────────────────────────────────────────────────────────
     Doubling scale. Bands own their vertical rhythm; nothing else does. */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: 1rem;
  --s-4: 2rem;
  --s-5: 4rem;
  --s-6: 8rem;

  --gut:      clamp(1.25rem, 4vw, 4rem);       /* horizontal inset */
  --band-pad: clamp(3.5rem, 11vh, 8rem);       /* band vertical padding */

  /* ── Motion ──────────────────────────────────────────────────────────
     One orchestrated moment per page. Everything else is a 180ms hover. */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: 180ms;

  /* ── Layout ──────────────────────────────────────────────────────────
     No max-width container anywhere. Content anchors to viewport edges. */
  --nav-h: 3.25rem;
}

/* Bands re-map the role tokens. A component inside a band inherits the
   right foreground without knowing which band it is in. */
.on-bone    { --ground: var(--bone);    --fg: var(--ink);  --fg-quiet: var(--slate); --fg-accent: var(--oxblood); }
.on-oxblood { --ground: var(--oxblood); --fg: var(--bone); --fg-quiet: var(--raw);   --fg-accent: var(--bone); }
.on-ink     { --ground: var(--ink);     --fg: var(--bone); --fg-quiet: var(--raw);   --fg-accent: var(--raw); }
