/* ==========================================================================
   Geist Mono, self-hosted. Was loaded from Google Fonts, which meant every
   visitor's IP went to a third party — not acceptable for a company in stealth —
   and a render-blocking request to an origin the browser had no connection to.

   One variable file, 100-900. font-display: swap so text paints immediately in the
   fallback metric and swaps when the file lands; the ASCII art measures its own cell
   width at runtime and re-measures on document.fonts.ready, so the swap is corrected
   rather than left misaligned.
   ========================================================================== */

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   tokens.css — the single source of truth for brand values.
   Swap values here when the final design assets land; nothing else changes.
   ========================================================================== */

:root {
  /* --- Type -------------------------------------------------------------
     Replace the stack below with the licensed brand face via @font-face
     in css/base.css, then update --font-sans only. */
  --font-sans: "Helvetica Neue", Helvetica, "Inter", system-ui, sans-serif;
  /* Geist Mono — nav, footer links, small caps-y UI text. The globe pins
     "Courier New" directly, so changing this never shifts its glyph metrics. */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  /* Mono runs ~15% wider per character than the sans it replaced, so the
     display step is scaled back to keep the same measured line length. */
  --step-2:  clamp(1.75rem, 1.35rem + 2vw, 2.875rem);

  --leading-tight: 1.06;
  --leading-body: 1.55;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.06em;

  /* --- Color ------------------------------------------------------------- */
  /* Hex, not oklch. These are near-neutral greys, so oklch bought nothing
     here — and main.js rewrites every one of them as rgb() during the scroll
     inversion anyway. Plain hex costs no fidelity and drops a browser floor. */
  --ink:        #1a1a1a;   /* headlines, logo */
  --ink-muted:  #6c6c6c;   /* body-secondary, copyright — 4.5:1 on --surface (WCAG AA) */
  --ink-soft:   #444444;   /* body copy */
  --surface:    #f3f3f3;   /* page background */
  --surface-2:  #ececec;   /* wells */
  --line:       #dedede;   /* hairlines */
  --accent:     #1a1a1a;   /* reserved — brand accent goes here */

  /* True black. Does NOT invert: the principle boxes are meant to be black on
     both the light and the inverted sheet, so this sits outside the inverting
     set below. */
  /* Lifted off pure black: by the time this section is read the sheet has
     inverted to near-black, and #000 panels on that ground read as holes rather
     than as boxes. A few points lighter than the page separates them. */
  --panel:      #3d3d3d;
  --panel:      oklch(24% 0 0);

  /* --- Space (4px base) --------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: clamp(4rem, 8vw, 7.5rem);

  /* --- Layout ------------------------------------------------------------- */
  --measure: 34rem;          /* readable line length */
  /* Matches the header rail's inner width, so the content container and the
     nav share one set of edges — gutter included. */
  --wrap-max: 90rem;                              /* 1440px */
  --wrap-gutter: clamp(24px, 5.5vw, 80px);
  --edge-gutter: clamp(1.25rem, 3.5vw, 2.75rem);  /* header + footer, edge-aligned */
  --header-h: 4.5rem;
  --footer-h: 3.25rem;                            /* copyright line + its padding */
  --logo-h: 1rem;                                 /* wordmark height; set to the asset's */
  --logo-icon-h: 32px;                           /* square icon mark in the header */

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 480ms;
}