/* =====================================================================
   SPAN · design tokens
   The single source of truth for colour, type, axes and rhythm.
   Every page, the share-image template and the design-system gallery read these.
   Change a value here, never a hex code in a page stylesheet.
   ===================================================================== */
:root{
  /* colour · light. Text tokens (--fg, --fg2, --fg3, --ember) meet 4.5:1 on --bg. */
  --bg:#EFEEE9; --plate:#E6E5DF;
  --fg:#16171A; --fg2:#4A5056; --fg3:#62676D;
  --rule:#D3D1C9; --rule-2:#B4B2AA;
  --cobalt:#2A45E6;   /* structure that is active: links, focus, selected */
  --violet:#6B52D9;   /* only inside the depth gradient cobalt → violet → ember */
  --ember:#C03A15;    /* the live request: rail head, signal heads. Never decoration. */

  /* night palette: the one dark section on Home (systems illustration) */
  --n-bg:#111214; --n-plate:#1A1C1F; --n-fg:#ECEBE6; --n-fg2:#A9AEB4; --n-fg3:#7A8087;
  --n-rule:#272A2E; --n-rule-2:#3B3F44; --n-cobalt:#7F93FF; --n-violet:#9A88F5; --n-ember:#FF6A42;

  /* type: three families, nine roles (see AGENTS.md) */
  --f-display:"Archivo","Arial Narrow","Liberation Sans Narrow",sans-serif;
  --f-read:"Newsreader","Iowan Old Style",Georgia,serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* axes: the rail, A1 (the name's left edge) and A2 (the second indent) */
  --rail-x:clamp(20px,2.9vw,52px);
  --ax1:calc(var(--rail-x) + 5.4vw);
  --ax2:calc(var(--ax1) + 10.6vw);
  --gut:max(24px,3vw);

  /* vertical rhythm */
  --pad:clamp(96px,10vw,160px);
  --pad-l:clamp(112px,11vw,176px); --pad-m:clamp(80px,8vw,120px); --pad-s:clamp(56px,5vw,72px);

  /* motion */
  --ease:cubic-bezier(.2,.7,.1,1);

  /* grain on the hero */
  --noise-blend:multiply; --noise-op:.05;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111214; --plate:#1A1C1F; --fg:#ECEBE6; --fg2:#A9AEB4; --fg3:#7A8087; --rule:#272A2E; --rule-2:#3B3F44;
  --cobalt:#7F93FF; --violet:#9A88F5; --ember:#FF6A42;
  --n-bg:#09090A; --n-plate:#141517; --n-rule:#202326; --n-rule-2:#33373B;
  --noise-blend:screen; --noise-op:.035; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111214; --plate:#1A1C1F; --fg:#ECEBE6; --fg2:#A9AEB4; --fg3:#7A8087; --rule:#272A2E; --rule-2:#3B3F44;
  --cobalt:#7F93FF; --violet:#9A88F5; --ember:#FF6A42;
  --n-bg:#09090A; --n-plate:#141517; --n-rule:#202326; --n-rule-2:#33373B;
  --noise-blend:screen; --noise-op:.035; color-scheme:dark}

/* phone: the axes collapse onto one line */
@media (max-width:719px){:root{--rail-x:12px;--ax1:30px;--ax2:30px;--gut:20px;--pad:80px}}