/* cutcheck tokens: the only place raw colours and sizes live. */
:root {
  --c-paper: #F2F4F7;
  --c-white: #FFFFFF;
  --c-ink: #0E1621;
  --c-stage: #0E1B2C;
  --c-stage-hi: #22344B;
  --c-rule: #CBD3DC;
  --c-mute: #56626F;
  --c-on-stage-mute: #A8B6C7;
  --c-tape: #FFC53D;
  --c-tape-deep: #7A5200;
  --c-ok: #0E7A4B;
  --c-bad: #B42318;

  --font-sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero: clamp(3rem, 1.5rem + 6.4vw, 6.75rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mono: 0.8125rem;
  --lh-body: 1.55;
  --track-tight: -0.035em;
  --track-mid: -0.015em;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --section-gap: clamp(5rem, 3.5rem + 7vw, 9.5rem);
  --content-max: 72rem;
  --prose-max: 42rem;
  --tap: 3rem;
  --tape-width: 24rem;

  --radius: 0.25rem;
  --hairline: 1px;
  --focus-width: 3px;
  --tooth: 0.5rem;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-hover: 160ms;
  --d-reveal: 240ms;
  --d-panel: 260ms;
  --d-scene: 900ms;
  --press: 0.98;
}

@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }