/* 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) */
  --f:1;                                           /* px floors on (below 1280); 0 from 1280 up, see the media query below */
  --p:calc(var(--f) * 1px + (1 - var(--f)) * var(--u));   /* 1 design px: fixed below 1280, scaled with --u from 1280 up */
  --n:clamp(calc(.72px * var(--f)), calc(100vw / 1920), 1px);   /* nav unit: never larger than 1920; below 1280 never smaller than 72% */

  /* --- colour: brand --- */
  --paper:#f4f4f4;        /* light text on dark */
  --page:#f1f0ec;         /* page background (Figma 468:2937) */
  --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(--page);

  /* --- type --- */
  /* Satoshi + Fragment Mono (not final). The old names stay so sections keep working */
  --xh:"Satoshi",system-ui,sans-serif;                    /* display, headings, numbers */
  --sans:"Satoshi",system-ui,sans-serif;                  /* body, UI */
  --mono:"Fragment Mono",ui-monospace,"SF Mono",monospace;   /* labels, ticker */
  --xhmono:var(--mono);                                   /* indices */
  --fw:500;               /* Satoshi Medium: the default weight */
  --fw-r:400;             /* Satoshi Regular: accent (28) and Display 3 (96) */
  /* type scale (px at 1920 → min px), Figma styles: display-3 96 · H1 80 · H3 48 · H4 36 · accent 28 · body-l 24 · body 20 · caption 16 */
  --fs-xl:max(44px, calc(96 * var(--u)));
  --fs-display:max(36px, calc(80 * var(--u)));
  --fs-h3:max(26px, calc(48 * var(--u)));
  --fs-h4:max(22px, calc(36 * var(--u)));
  --fs-lead:max(18px, calc(28 * var(--u)));
  --fs-body-l:max(calc(17px * var(--f)), calc(24 * var(--u)));
  --fs-body:max(14px, calc(16px * var(--f)), calc(20 * var(--u)));       /* never below 14 */
  --fs-caption:max(12px, calc(13px * var(--f)), calc(16 * var(--u)));   /* never below 12 */
  --fs-caption-s:12px;    /* Fragment Mono, small labels (mobile) */
  --ls:-.006em;           /* -0.5px at 80px, Figma headings */
  --eb-font:500 var(--fs-body)/1.4 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;
  --r-sheet:max(16px, calc(32 * var(--u)));            /* light sheets over dark sections (services bottom, process top) */

  /* --- 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;
  --bp-desktop:1280px;
}
/* 1280–1920: the 1920 design scaled down as a whole, no px floors. Floors (and later the tablet layout) start below 1280 */
@media (min-width:1280px){
  :root{--f:0}
}
/* mobile values of the same styles (Figma 468:3347): one style, two sizes */
@media (max-width:820px){
  :root{--fs-xl:44px;--fs-display:48px;--fs-h3:28px;--fs-h4:24px;--fs-lead:18px;--fs-body-l:18px;--fs-body:16px;--fs-caption:14px;--eb-font:500 var(--fs-body)/1.4 var(--sans)}
}