/* ============================================================================
   tokens.css — the design system. Single source of truth for the visual language.
   If a value isn't here, it shouldn't appear in markup or app.css.

   HARD RULES (see CLAUDE.md) — REVISED 2026-06-24, Swiss/modernist direction:
   · midnight ink on near-white — the base system is MONOCHROME
   · COLOR enters only through case-study imagery/photography, never the chrome
   · ONE grotesque, ONE text colour (ink); treatments are WEIGHT + SIZE only
   · emphasis by weight contrast (black vs very-light), never by hue
   · shapes allowed: thin lines · rectangular blocks · filled circles + circle
     sections (halves/quarters). Nothing else.
   · confident, bold, unadorned, well-structured — words + diagrams pop on white
   · NEVER Inter / system-ui as the default typeface
   ============================================================================ */
/* Satoshi — self-hosted (Fontshare Free Font License; see assets/fonts/Satoshi-LICENSE.txt).
   One variable file covers the whole 300–900 range. url() is relative to THIS css file. */
@font-face{
  font-family:"Satoshi";
  src:url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight:300 900; font-style:italic; font-display:swap;
}

:root{
  /* —— Palette (monochrome: one ink colour on white; colour enters only via imagery) —— */
  --bg:#FFFFFF;        /* white ground */
  --ink:#0F1124;       /* midnight ink — the ONE text colour, everywhere */
  --ground:var(--bg);  /* page/topbar ground (alias of --bg) */
  /* —— Horizontal rules: 40% of the ink they used to be (Kurt, 2026-09-15) ——
     Both line weights stepped down to 40% of their previous alpha, so the ratio BETWEEN
     them is unchanged and the page still reads as two tiers of rule, just quieter.
     `--rule` is new: the section rules were `1px solid var(--ink)` — full-strength ink,
     written inline in four places — which is why they were the loudest non-type element
     on a page whose whole vocabulary is hairlines. They are now a token, so the next
     adjustment is one number rather than four.
       --rule  ink @ 1.0  →  .40   (the section dividers, `.rule`, the topbar's underline)
       --line  ink @ .16  →  .064  (the fine hairline: table rows, anatomy + step rows) */
  --rule:rgba(15,17,36,.40);   /* section rule — was solid --ink */
  /* The one non-white surface on the site (2026-09-15). It is a TINT OF THE INK, not a
     second colour — the palette is monochrome and a grey panel that isn't derived from
     `--ink` would be a new hue in the chrome, which the Visual language section rules
     out. At 4% it clears any contrast question: body copy on it is still ~17:1. */
  --panel:rgba(15,17,36,.04);
  /* ONE radius, site-wide. It is the value already approved for the profile photo, so a
     panel and the photo round identically and there is no second number to drift.
     Generous on purpose since 2026-09-15 (Kurt: "more like an iphone screen"). It went
     6px → 20px, which is a real departure from the Visual language section's shape
     vocabulary and is recorded as a deliberate one, not a drift. NOTE it is a FIXED
     length, not a ratio: an iPhone's corner is ~14% of the screen's width, and at that
     ratio a 1170px panel would round by 164px and stop being a panel. 20px reads as the
     same *kind* of corner at both sizes — generous on the 342px photo, calm on a
     full-width panel — which is the thing being copied, not the maths. */
  --radius:20px;
  --line:rgba(15,17,36,.064);  /* thin hairline — was rgba(…,.16) */

  /* —— Type: ONE typeface (Satoshi). Treatments = weight + size only. —— */
  --sans:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;   /* the only typeface, site-wide */
  --w-black:900;   /* Satoshi Black — display, headlines, default emphasis */
  /* --w-bold (700) was RETIRED 2026-09-15. It was defined for "inline emphasis inside
     running text" but `.col-body p strong` had always overridden it with --w-black, so
     every bold word in body copy rendered at 900 and the token was live on two rules,
     both on the unbuilt CV page. Four weights doing the work of three is how a scale
     drifts; emphasis in running text is --w-black, same as everywhere else. */
  --w-med:500;     /* Satoshi Medium — tracked labels / meta */
  --w-light:400;   /* Satoshi Regular — reading copy (readable at density) */
  --w-thin:300;    /* Satoshi Light — very light: quiet statements + weight-contrast emphasis */

  /* —— Scale —— */
  /* Both headline steps came DOWN ~20% on 2026-08-12 (Kurt: "the whole thing more economical
     with space"). Was --display clamp(2.6rem,8.5vw,7.4rem) = 118px at 1440px, and --head
     clamp(1.5rem,3.4vw,2.7rem) = 43px. The type is still sculptural at 94px; it was the
     LINE COUNT that cost the height, since every display line is ~1× the font size.
     --body and --dek are deliberately UNTOUCHED: 17px reading copy is a legibility floor,
     not a spacing knob, and shrinking it to buy vertical space is the wrong trade. */

  /* —— THE TYPE SCALE — one named step per job (2026-09-15) ——————————————————
     **Eight sizes, down from twenty-five.** This file's own rule at the top of
     CLAUDE.md has always said "~4 sizes"; the stylesheet had drifted to 25 distinct
     font-size values across 84 declarations, and the drift was invisible because most
     of it sits on components that render on NO live page — `.pov-h` (the shelved POV
     page), `.card-ttl`, `.mx-name`, `.model-n`, `.stats b`, `.vslide-l`, `.cv-role`.
     Only two hand-tuned clamps ever reached a visitor, and both were `--head` with
     cosmetic drift: `.essay-h` shared its exact 2.15rem ceiling, `.val-t` sat 0.1rem
     under it. **The dead components are mapped onto the scale too** — that is the point
     of doing this now rather than when one of them is restored.

     Three merges are worth knowing, because each removed a step no reader could see:
     · **One reading size.** 1.02 · 1.04 · 1.05 · 1.14rem and `calc(--body * .955)` were
       six values between 16.2 and 18.2px. They are all `--body` (17px) now. `--small`
       (16px), added hours earlier in the accessibility pass, went with them — a 1px
       step is not a step, and 17px is the legibility floor this file already names.
     · **One chrome size.** `--nav` (14px), `--label` (13px) and the wordmark's 15px are
       one `--label` at 14px. Section headers, nav links and the wordmark are
       distinguished by WEIGHT — w-black, w-light, 700 — which is the system's own rule.
     · **`--micro` stays the floor.** Nothing sets below 12px.

     ALL OF IT IS rem, so the whole scale moves with a reader's browser font-size
     setting. That was the accessibility half of this change and it has not been undone.
     Absolute px survives only for the SVG glyph sizes below, which are icon metrics. */
  --display:clamp(2.3rem,6.5vw,5.9rem);      /* the hero headline */
  --display-sm:clamp(1.6rem,4.55vw,4.15rem); /* …and the home page's, ~30% down.
     **The reason changed on 2026-09-15 and the number did not.** It was cut because the
     hero was Kurt's NAME and the bar above it said the same thing twice. The hero is a
     full sentence now — a claim, not a wordmark — so the duplication argument is gone;
     what keeps it here is that a ~115-character sentence set in display caps needs the
     smaller step to stay on five lines at 1440 and six at 390 without eating a screen.
     Measured at both. Put it back to `--display` and the claim runs ~8 lines. */
  --head:clamp(1.35rem,2.7vw,2.15rem);       /* every headline below the hero: case-study
                                                and essay sections, Values principles,
                                                display figures, slide labels */
  --title:clamp(1.15rem,1.6vw,1.5rem);       /* the smaller title step — card titles,
                                                matrix cells, pull-quotes */
  --dek:clamp(1.05rem,1.4vw,1.25rem);        /* the hero lede */
  --body:1.0625rem;                          /* 17px — ALL reading copy, primary and
                                                secondary. The legibility floor. */
  --label:.875rem;                           /* 14px — chrome: nav, section headers,
                                                the wordmark. Weight tells them apart. */
  /* TRACKING IS A TIER PROPERTY, NOT A PER-COMPONENT ONE (2026-09-15). There were 8
     distinct letter-spacing values across 54 declarations — .01 · .02 · .03 · .04 · .05 ·
     .06 · .09 · .1em — and the differences were invisible: five uppercase labels sat at
     .36 / .48 / .60 / .72 / 1.08px and read as one thing. Two tokens now, and body copy
     takes none at all (a -.01em nudge on a 17px run-in title is not a treatment, it is
     noise that makes the title a separate row in any audit).
       --track-tight  every headline tier — display, head, titles
       --track-label  every uppercase label */
  --track-tight:-.015em;
  --track-label:.05em;
  --micro:.75rem;                            /* 12px — THE FLOOR. meta, tags, stamps,
                                                captions, table heads, the GATE chip. */

  /* Icon metrics, NOT type. These size an SVG glyph inside a circular control, so they
     stay in px: the button is a fixed 34–56px box and a glyph that scaled with the
     reader's font setting would break out of it. */
  --icon:0.9375rem;      /* 15px — the standard control glyph */
  --icon-lg:1.25rem;     /* 20px — fullscreen, where the control is 56px */

  /* —— Space / measure / the strict grid —— */
  --margin:clamp(1.5rem,4vw,3.5rem);
  --maxw:1280px;
  --measure:62ch;
  --cols:12;                            /* the page rides a strict 12-column grid */
  --gutter:clamp(18px,2.1vw,34px);
  --hair:1px solid var(--line);
}