/* Phase 3 — real tokens. Dark mode only, per CLAUDE.md §4. No light variant, no toggle. */

:root {
  /* brand colors — the only four that exist in this system */
  --ink: #0E0B07;    /* base background */
  --cream: #F1F1DE;  /* primary text */
  --green: #7FFF00;  /* system color: links, hover, focus, active nav, form states, header bar */
  --orange: #FA4616; /* editorial color: section numbers, rare accents. Never long body copy. */

  --bg: var(--ink);
  --fg: var(--cream);

  /* tints of cream, used for hairlines/secondary text — not new hues, just opacity over cream */

  /* --surface (#18140D) is gone entirely (Aug 2026). It was a second, warmer near-black that
     competed with the ink; it was pointed at --ink while the legacy layout.css still named it,
     and removed outright when that stylesheet was retired. There is one black on this site. */
  --line: rgba(241, 241, 222, 0.18);
  --line-faint: rgba(241, 241, 222, 0.08);

  /* Every structural rule and grid gutter on the site. Green, not cream: the exposed grid is
     part of the brutalist structure, so it reads as drawn rather than as a soft divider.
     Change it here and every rule follows. On a green field it flips to --grid-invert. */
  --grid: var(--green);
  --grid-invert: var(--ink);
  --muted: rgba(241, 241, 222, 0.55);

  /* type */
  --font-display: 'Cook Conthic', ui-serif, serif;
  --font-text: 'Host Grotesk', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --font-accent: 'Pirata One', ui-serif, serif;

  /* scale */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.5rem;
  --step-4: 3.5rem;
  --step-5: 5rem;
  --step-6: 7rem;
  --step-7: 10rem;

  /* space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  --content-max: 1440px;
  --border-w: 1px;
  /* Header height, which the hero subtracts to fill exactly one fold. Driven by the hamburger's
     44px hit target (NOT the 32px logotype) + 16px padding top and bottom + the 2px green bar.
     Keep this in sync with .nav-toggle's height or the fold over/undershoots by the difference. */
  --header-h: 78px;

  /* The single value used for BOTH ends of the fold: the gap under the green header rule above
     the lockup, and the gap under the statement above the green services plate. Change it once
     and both ends stay matched. */
  --fold-gap: 2rem;
}