/* Design tokens. One blue, a warm ink, paper. The site follows the visitor's OS theme (prefers-color-scheme), with
   no toggle and nothing stored: dark is the original design, light swaps the two base colours below and nothing else.

   How the names work: --paper is the foreground (text, rules, the bright side) and --ink the ground (page background),
   in both themes. In light they swap values, so every section, ladder and hover follows without a single per-section
   colour. Two places pin their own values: the paper sections (.theme-inverse, ink text on a warmer paper in both
   themes) and the blue contact card (.theme-blue, paper text on blue in both themes). */
:root{
  color-scheme:dark;
  /* raw palette: the only hex values on the site (plus the visitor hue below) */
  --c-paper:#F2F0EB; --c-paper-rgb:242,240,235; --c-paper-deep:#E5E1D7;
  --c-ink:#131210; --c-ink-rgb:19,18,16;
  --blue:#3D5AFE; --blue-deep:#2741D9; --blue-ink:#1A2FA8;
  --blue-rgb:61,90,254;
  --c-blue-lift:#7A8FFF; /* his blue, lifted for small text on ink: 6.4:1 (AA) */
  --on-blue:var(--c-paper); /* text on a blue fill, in both themes */
  --c-blue-press:#2741D9; /* his blue, pressed for small text on paper: 6.3:1 on #F2F0EB, 5.6:1 on #E5E1D7 (AA) */

  /* dark (default) */
  --paper:var(--c-paper); --paper-rgb:var(--c-paper-rgb);
  --ink:var(--c-ink); --ink-rgb:var(--c-ink-rgb);
  --ink-2:#1B1A17; --ink-3:#26241F; /* raised surfaces: a step towards the foreground */
  --inv-bg:var(--c-paper); /* the paper sections */
  --blue-text:var(--c-blue-lift); /* small blue text. Fills and display type keep --blue */
  --stone:#B4B0A8; /* warm grey for the footer wordmark: 8.7:1 on ink */
  --blend:#fff; /* pure white, only for mix-blend-mode: difference (the fixed rail and badge invert over any section) */
  --shadow:rgba(0,0,0,.7); --shadow-2:rgba(0,0,0,.35);
  /* the visitor's colour: hue from visit.js, lightness and chroma fixed here so every hue passes in both themes
     (tone: text and marks, at least 3:1 graphic and 4.5:1 text on the ground; deep: the section's tinted ground) */
  --vhue:150;
  --vtone:oklch(83% .095 var(--vhue)); --vdeep:oklch(16.5% .026 var(--vhue)); --vglow:oklch(64% .13 var(--vhue) / .17);
  /* type: three roles, two families. Nothing else is used anywhere.
     display = Mona Sans, narrow and heavy (--d with --dw/--dwg on the axes)
     text    = Mona Sans, normal width (--b, weight --tw)
     label   = Geist Mono (--mo): labels, the trace, the visit log, IDs */
  --d:"Mona Sans","Arial Narrow",Impact,sans-serif;
  --b:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --mo:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --dw:78; --dwg:860; /* display axes: final width and weight; scroll-in headlines ease from width 75 (the axis minimum) to here */
  --tw:420; --tw-m:500; --tw-label:400; /* text weight, medium (leads, emphasis), label weight */
  /* type scale. Every font-size in the site is one of these. */
  --fs-micro:10.5px;  /* label: trace data, chart captions, small notes */
  --fs-label:12px;    /* label: eyebrows, buttons, IDs, the log */
  --fs-xs:14px; --fs-s:16px; --fs-body:17px; --fs-m:18px;
  --fs-l:clamp(17px,1.3vw,21px);
  --fs-xl:clamp(19px,1.6vw,26px);
  --fs-2xl:clamp(22px,1.9vw,30px);
  --fs-3xl:clamp(26px,2.5vw,40px);
  --fs-4xl:clamp(28px,3.4vw,56px);
  /* display tiers (Mona Sans narrow heavy) */
  --fd-2xs:clamp(17px,1.3vw,21px); --fd-xs:clamp(22px,1.9vw,30px); --fd-s:clamp(28px,2.5vw,42px);
  --fd-m:clamp(46px,5vw,88px); --fd-fig:clamp(67px,7.15vw,129px); --fd-l:clamp(58px,9.6vw,172px);
  --fd-xl:clamp(72px,12.6vw,225px); --fd-2xl:clamp(96px,17vw,300px); --fd-hero:clamp(84px,16.2vw,290px);
  --fd-mark:19vw; --fd-ghost:clamp(150px,22vw,300px); --fd-deco:clamp(220px,24vw,440px);
  --fm-big:clamp(40px,9.2vw,168px); /* the visitor ID, mono */
  /* tracking */
  --ls-d:-.01em; --ls-text:-.01em; --ls-lead:-.02em; --ls-label:.06em; --ls-wide:.1em; --ls-data:.02em; --ls-mono-d:-.045em;
  /* space: fluid page gutter + one spacing scale */
  --pad:clamp(20px,4vw,64px);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:clamp(72px,8vw,120px); --s7:clamp(120px,13vw,210px);
  /* motion: one easing family */
  --ease:cubic-bezier(.2,.7,.1,1);
  --slow:cubic-bezier(.65,0,.35,1);
  --dur:.9s;
  --btn-dur:.3s; --nudge:3px; /* the one button hover: duration (with --ease) and arrow nudge */
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;

    --paper:var(--c-ink); --paper-rgb:var(--c-ink-rgb);
    --ink:var(--c-paper); --ink-rgb:var(--c-paper-rgb);
    --ink-2:#EAE7E0; --ink-3:#DEDAD1;
    --inv-bg:var(--c-paper-deep); /* the paper sections go one step warmer so the section rhythm survives */
    --blue-text:var(--c-blue-press);
    --stone:#6F6B63; /* darker warm grey: 4.9:1 on paper */
    --blend:#fff;
    --shadow:rgba(var(--c-ink-rgb),.22); --shadow-2:rgba(var(--c-ink-rgb),.08);
    --vtone:oklch(44% .11 var(--vhue)); --vdeep:oklch(94% .022 var(--vhue)); --vglow:oklch(62% .13 var(--vhue) / .14);
  }
}
/* pinned grounds: paper sections are ink on paper, the contact card is paper on blue, in either theme */
.theme-inverse{--paper:var(--inv-bg);--paper-rgb:var(--c-paper-rgb);--ink:var(--c-ink);--ink-rgb:var(--c-ink-rgb);--blue-text:var(--c-blue-press)}
.theme-blue{--paper:var(--c-paper);--paper-rgb:var(--c-paper-rgb);--ink:var(--c-ink);--ink-rgb:var(--c-ink-rgb);--blue-text:var(--c-paper)}
/* derived tokens. Declared on every element that sets its own base colours so they resolve against that ground */
:root,.theme-inverse,.theme-blue{
  --fg:var(--paper); --bg:var(--ink);
  /* foreground on ground, one ladder. Text uses only --paper, --text-2 or --mute (all AA);
     --dim and below are for rules, bars and large decoration, never body text */
  --text-2:rgba(var(--paper-rgb),.82); --mute:rgba(var(--paper-rgb),.6);
  --dim:rgba(var(--paper-rgb),.42); --wash:rgba(var(--paper-rgb),.3); --wash-2:rgba(var(--paper-rgb),.2);
  --line:rgba(var(--paper-rgb),.14); --faint:rgba(var(--paper-rgb),.1); --hair:rgba(var(--paper-rgb),.06);
  /* ink on paper (the paper sections) */
  --ink-text-2:rgba(var(--ink-rgb),.82); --ink-mute:rgba(var(--ink-rgb),.7); --ink-line:rgba(var(--ink-rgb),.14);
  /* blue guides and glows */
  --blue-line:rgba(var(--blue-rgb),.5); --blue-glow:rgba(var(--blue-rgb),.18);
  --ink-blue:color-mix(in srgb,var(--blue) 4%,var(--ink)); --ink-blue-2:color-mix(in srgb,var(--blue) 8%,var(--ink));
  --scrim:rgba(var(--ink-rgb),.7);
  --ring:var(--paper); /* focus ring: 2px, offset 4px; the foreground of whatever it sits on. Never blue */
  --btn-line:var(--wash); --btn-text:var(--text-2); --btn-hi:var(--paper); /* buttons: faint outline and soft text at rest, full foreground on hover and focus */
}
/* users who ask for more contrast get firmer secondary text and rules */
@media (prefers-contrast: more){:root,.theme-blue{--mute:rgba(var(--paper-rgb),.82);--faint:rgba(var(--paper-rgb),.22);--line:rgba(var(--paper-rgb),.4)}}
/* phones: the display tiers step down here, so sections never carry their own size overrides */
@media (width < 900px){
  :root{
    --fd-hero:clamp(64px,24vw,200px); --fd-2xl:clamp(76px,22vw,180px); --fd-l:clamp(50px,15vw,120px);
    --fd-m:clamp(34px,9.6vw,56px); --fd-s:clamp(22px,6vw,30px); --fd-ghost:150px; --fd-deco:220px;
    --fm-big:clamp(30px,10.4vw,60px);
  }
}