/* tokens.css: primitives + semantic tokens. Load before styles.css. No build step.
   Theme tokens (--lime, --on-lime, --page, --surface, --surface-2, --frame, --line, --ink…) live in styles.css + themes.css
   and are switched by html[data-mode] and html[data-theme]. Everything here sits on top of them. See /DESIGN.md. */
:root{
  /* spacing: 4-based scale */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --gutter:16px;
  /* radii: the four */
  --r-sm:8px;--r:12px;--r-lg:24px;--r-pill:999px;
  /* type scale (Inter). Display sizes are fluid. */
  --t-xs:12px;--t-sm:14px;--t-md:16px;--t-lg:18px;--t-xl:clamp(22px,2.4vw,28px);--t-2xl:clamp(28px,3.4vw,40px);--t-3xl:clamp(40px,7vw,88px);
  --lh-tight:1.05;--lh-snug:1.25;--lh-body:1.55;--track-tight:-.035em;--track-body:-.01em;
  --w-regular:400;--w-medium:500;--w-semibold:600;
  /* borders */
  --bw:1px;--border:inset 0 0 0 var(--bw) var(--line);--border-strong:inset 0 0 0 var(--bw) var(--line-2);
  /* motion */
  --d-fast:.15s;--d-base:.3s;--d-slow:.6s;
  /* breakpoints (reference only; media queries can't read vars): phone ≤640, tablet ≤900, desktop ≥901, wide ≥1440 */
  --bp-phone:640px;--bp-tablet:900px;--bp-wide:1440px;
  /* semantic */
  --bg-page:var(--page);--bg-raised:var(--surface);--bg-sunken:var(--surface-2);
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-muted:var(--muted);
  --accent:var(--lime);--on-accent:var(--on-lime);
  --chrome:var(--page);--focus-ring:var(--focus,var(--ink));
  --shadow-1:var(--shadow);--shadow-2:var(--shadow-lg);
}
@media (min-width:641px){:root{--gutter:24px}}
@media (min-width:901px){:root{--gutter:32px}}
@media (prefers-reduced-motion:reduce){:root{--d-fast:0s;--d-base:0s;--d-slow:0s}}