/* Hallmark · tokens · genre: editorial · theme: custom, Grid-derived
 * Dark breathing ground · block-lockup wordmark · drifting square field.
 * Axes — paper band: dark (19%) · display style: condensed-heavy caps · accent hue: cool (264)
 * Portable: copy this file into the next project and the system comes with it.
 */

:root {
  /* ── Type ─────────────────────────────────────────────────────────────
     Two families. Anton carries the block lockup only; Archivo carries
     everything that has to be read as text. */
  --font-display: "Anton", "Archivo Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-hud:     "Press Start 2P", ui-monospace, monospace;  /* the score readout only */
  --tracking-label: 0.09em;
  --tracking-mark: 0.005em;

  --text-xs:   0.625rem;   /* 10px — label voice, the floor for any type here */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 1rem;       /* 16px — root */
  --text-md:   0.9375rem;  /* 15px — lede */
  --text-lg:   1rem;       /* 16px — index values */
  --text-mark: clamp(1.85rem, 7.4vw, 3.6rem);

  --lh-body: 1.55;

  /* ── The lockup ───────────────────────────────────────────────────────
     Measured from Anton's own metrics at runtime, not guessed:
       cap ascent 0.852em · cap descent 0.011em · font ascent 1.182 / descent 0.330
     With line-height 1 the baseline sits 0.926em below the line box top, so the
     cap top is 0.074em below it. Lifting the word by that amount and giving the
     row the cap height exactly registers the solid blocks to the capitals.
     Line-height itself stays at 1 — gate 55 forbids going under it on all-caps. */
  --mark-cap:  0.864em;
  --mark-lift: -0.074em;
  --mark-gap: 0.055em;

  /* ── Colour — dark ground, one signal ink ────────────────────────────
     Per the dark recipe: surfaces get lighter as they raise, the accent
     gains lightness and sheds chroma, nothing is pure black or white. */
  --color-paper:      oklch(19%  0.014 258);  /* the ground */
  --color-paper-2:    oklch(23%  0.014 258);  /* raised — row hover */
  --color-paper-3:    oklch(27%  0.014 258);  /* raised further — pressed */
  --color-breath:     oklch(40%  0.035 262);  /* the lighter tone the ground breathes with */
  --color-ink:        oklch(94%  0.006 258);
  --color-muted:      oklch(70%  0.011 258);
  --color-rule:       oklch(36%  0.013 258);
  --color-accent:     oklch(66%  0.160 264);  /* ultramarine, lifted for the dark ground */
  --color-accent-ink: oklch(19%  0.014 258);  /* type sitting on the accent */
  --color-focus:      oklch(72%  0.150 264);

  /* ── Space (4 pt scale) ──────────────────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Vertical rhythm — fluid, so a one-screen page stays one screen from a
     640 px short viewport up to a 1200 px display. Air scales with the sheet. */
  --rhythm-nav:      clamp(1rem,    2.5vh, 2.5rem);
  --rhythm-page-top: clamp(0.75rem, 2.6vh, 2.25rem);   /* the lockup rides high */
  --rhythm-gap:      clamp(1rem,    2.8vh, 2.5rem);
  --rhythm-row:      clamp(0.75rem, 2vh,   1.5rem);

  /* ── Structure ───────────────────────────────────────────────────────── */
  /* One measure for the whole page: the wordmark and its blocks, the lede, the
     index rule, the footer and the game band all end on the same right edge. */
  --measure: 42rem;                     /* 672px */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: calc(var(--measure) + 2 * var(--gutter));
  --rule-hair: 1px;
  --rule-ink: 2px;
  --radius-card: 0;                     /* no radius, anywhere */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 190ms;
  --dur-long:  420ms;
  --dur-breath: 9s;                     /* one full inhale + exhale */

  /* ── Z ───────────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}

@media (min-width: 60rem) {
  :root { --cols: 12; }
}