/* Design tokens: the only place for raw values (colour, type, space, radius, motion).
   Components and sections use these variables. Docs: docs/design-system.md, live page: styleguide.html */
:root{
  /* --- scale units --- */
  --u:calc(100vw / 1920);                          /* 1 design px at 1920 (Figma frames are 1920 wide) */
  --n:clamp(.72px, calc(100vw / 1920), 1px);       /* nav unit: never smaller than 72% */

  /* --- colour: brand --- */
  --paper:#f4f4f4;        /* light background */
  --ink:#201d1d;          /* text on light, dark UI */
  --ink-soft:#57534b;     /* secondary text on light */
  --ink-2:var(--ink-soft); /* alias that dark sections re-point to --mist */
  --green:#A1FF62;        /* the brand accent (Osmo "volt") */
  --red:#f84131;          /* hand-written annotations only */
  --violet:#6840ff;       /* featured surfaces only */
  --blue:#1925aa;         /* behind the ribbons image */
  --white:#ffffff;

  /* --- colour: dark sections (work log, process, comparison) --- */
  --night:#1c1b1b;        /* dark section background */
  --night-2:#2a2828;      /* card on night */
  --night-3:#343231;      /* chip on night */
  --mist:#b7b4ae;         /* secondary text on night */
  --chip-ink:#e9e7e2;     /* chip text on night */

  /* --- colour: neutrals for graphics and the comparison graph --- */
  --stone:#8a8885;        /* graph grey */
  --stone-2:#43413e;      /* quiet graph line */
  --stone-3:#4a4947;      /* row of circles */
  --tag-dark:#3d3c3a;     /* dark tag on night */
  --card-light:#e9e9e6;   /* card on paper (contact) */

  /* --- semantic aliases (sections may re-point --bg / --ink-2 locally for dark themes) --- */
  --bg:var(--paper);

  /* --- type --- */
  --xh:"HXH","Inter Tight",system-ui,sans-serif;          /* Haffer XH: display, headings, numbers */
  --sans:"Haffer","Inter Tight",system-ui,sans-serif;     /* Haffer: body, UI */
  --mono:"HMono",ui-monospace,"SF Mono",monospace;        /* Haffer Mono: labels, ticker */
  --xhmono:"HXHMono",ui-monospace,"SF Mono",monospace;    /* Haffer XH Mono: indices, stats */
  /* type scale (px at 1920 → min px): display 76→36 · h3 48→26 · lead 28→18 · body-l 24→17 · body 20→16 */
  --fs-display:max(36px, calc(76 * var(--u)));
  --fs-h3:max(26px, calc(48 * var(--u)));
  --fs-lead:max(18px, calc(28 * var(--u)));
  --fs-body-l:max(17px, calc(24 * var(--u)));
  --fs-body:max(16px, calc(20 * var(--u)));
  --eb-font:400 var(--fs-body)/1.2 var(--sans);          /* eyebrow: "•  Label", sentence case */

  /* --- space --- */
  --pad-x:calc(120 * var(--u));                           /* page side padding (desktop) */
  --pad-x-m:16px;                                         /* page side padding (mobile) */

  /* --- radius --- */
  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-lg:16px; --r-pill:999px;

  /* --- motion --- */
  --ease-out:cubic-bezier(.16,1,.3,1);                    /* UI transitions */
  --dur-fast:.3s; --dur:.45s;

  /* --- breakpoints (reference only: CSS can't use vars in media queries) --- */
  --bp-mobile:820px;
}