/* ===== tokens.css =====
   Design tokens: colors, fonts, sizing, spacing.
   Edit these to re-theme the whole site from one place. */

:root{
  --color-page:#E9EAEE;
  --color-grid:rgba(16,19,24,.045);
  --color-panel:#101318;
  --color-panel-line:rgba(255,255,255,.075);
  --color-ink:#F4F5F7;
  --color-ink-soft:#9BA2AD;
  --color-ink-faint:#626A76;
  --color-ink-dim:#4E5661;
  --color-accent:#7F8CFF;
  --color-accent-wash:rgba(127,140,255,.07);
  --color-accent-ring:rgba(127,140,255,.13);
  --color-accent-glow:rgba(127,140,255,.20);
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --size-name:clamp(2rem,9vw,2.6rem);
  --size-body:.90rem;
  --size-label:.90rem;
  --size-micro:.66rem;
  --pad-x:26px;
  --radius:22px;
  --card-width:520px;
  --ease:cubic-bezier(.22,.7,.3,1);
  --speed:.18s;
}
@media (prefers-color-scheme:dark){
  :root{ --color-page:#0A0C10; --color-grid:rgba(255,255,255,.03); }
}