/* ==========================================================================
   Design tokens: the single source of truth for the site's design system
   (since 2026-10-21, D25; before that css/site.css :root, D14). Every page
   on the system links this first: tokens.css, then ds.css (base + text
   roles), then its own page stylesheet. Names follow the Figma variables
   (`/` → `-`), e.g. Figma spacing/16 = --spacing-16. Page stylesheets
   never declare tokens in :root (scripts/check-tokens.sh).
   Fonts load from <link> tags in each page, not here: Fontshare
   cabinet-grotesk@800,700 and switzer@400,600,700; Google IBM Plex Mono
   400;600 (plus Inter and Architects Daughter on work-gemstones only).

   Three tiers (D34; the formulas and the full inventory: docs/token-map.md):
   1. Primitives, named by value. Components may use the spacing, radius,
      icon-size, border-width, opacity, motion and effect primitives
      directly; never a colour or type primitive.
   2. Roles, named by purpose: colour (the @roles block), the spacing and
      radius roles that 3+ components share, layout and type (the
      @layout-tokens block, values per mode).
   3. Component tokens, named after their component, used only inside it.
   ========================================================================== */
:root {
  /* ---------- primitives ---------- */
  /* colour: --color-<hue>-<HSL lightness %>[-a<alpha %>]; hue word from the
     HSL hue (indigo 230–250°), grey below 20% saturation; white is white */
  --color-indigo-12: #100f2e;
  --color-indigo-18: #1c1b43;
  --color-indigo-60: #4e50e6;
  --color-indigo-75: #7e80ff;
  --color-grey-89: #e0e1e7;
  --color-white: #ffffff;
  --color-grey-89-a60: rgba(224, 225, 231, 0.6);
  --color-grey-89-a40: rgba(224, 225, 231, 0.4);
  --color-grey-89-a20: rgba(224, 225, 231, 0.2);
  --color-indigo-12-a20: rgba(16, 15, 46, 0.2);
  --color-indigo-12-a0: rgba(16, 15, 46, 0); /* code only: the home header fade's start, a typed-in value in Figma (1328:9259) */
  --color-indigo-64-a32: rgba(122, 120, 204, 0.32); /* Figma stroke #7A78CC at 32% (1330:1695) */
  /* spacing: --spacing-<px> */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-200: 200px;
  /* radius: --radius-<px>, and full */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-full: 100px;
  /* icon size: --size-icon-<px> */
  --size-icon-16: 16px;
  --size-icon-20: 20px;
  --size-icon-24: 24px;
  /* border width: --border-<px>, a decimal point written as "-" */
  --border-0-5: 0.5px;
  --border-1: 1px;
  --border-2: 2px;
  /* opacity: --opacity-<percent> */
  --opacity-60: 0.6;
  --opacity-65: 0.65; /* code only: the Figma node uses a typed-in value (1328:8463) */
  --opacity-80: 0.8;  /* code only: the Figma nodes use a typed-in value (1330:1688, 1690–1692) */
  /* type: --font-size-<px>, --font-weight-<CSS weight name>,
     --line-height-<percent>, --font-<family> */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-100: 1; /* code only: Figma keeps line heights inside the text styles */
  --line-height-110: 1.1; /* code only: Figma keeps line heights inside the text styles */
  --line-height-115: 1.15; /* code only: Figma keeps line heights inside the text styles */
  --line-height-135: 1.35; /* code only: Figma keeps line heights inside the text styles */
  --line-height-150: 1.5; /* code only: Figma keeps line heights inside the text styles */
  --font-cabinet-grotesk: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-switzer: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* captions (2026-10-11, D19) */
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* UI of the showcased project (the depicted product), not part of the design system: the chips' font */
  /* motion: --duration-<ms>, --ease-<curve name> */
  --duration-200: 200ms; /* code only: Figma has no motion variables */
  --duration-500: 500ms; /* code only: Figma has no motion variables */
  --duration-600: 600ms; /* code only: Figma has no motion variables */
  --duration-1400: 1400ms; /* code only: Figma has no motion variables */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* code only: Figma has no motion variables */
  --ease-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1); /* code only: Figma has no motion variables */
  /* effects: Figma effect styles shadow/*, paint style gradient/angular-accent */
  --shadow-sm: 0 4px 12px 0 var(--color-indigo-12-a20); /* code only: Figma has it as an effect style */
  --shadow-md: 0 4px 12px 8px var(--color-indigo-12-a20); /* code only: Figma has it as an effect style */
  --shadow-lg: 0 4px 20px 12px var(--color-indigo-12-a20); /* code only: Figma has it as an effect style */
  --gradient-angular-accent: url(../assets/images/gemstones/feature-gradient.png); /* Figma paint style gradient/angular-accent, baked to a PNG (feature-gradient/gen.py) */ /* code only: Figma has it as a paint style or a node fill */
  --gradient-linear-accent: linear-gradient(-0.7442300687484931deg, var(--color-indigo-60) 12.183%, var(--color-indigo-12) 83.302%); /* home contact (Figma 1328:8455), stops taken literally */ /* code only: Figma has it as a paint style or a node fill */

  /* ---------- component tokens: --<component>-<property>, used only inside the component ---------- */
  /* case-study ToC (docs/components/toc.md); toc-m = the .wg-toc-m component */
  --toc-text: var(--text-secondary); /* code only: ToC component colour; Figma binds the role's primitive */
  --toc-text-on-accent: var(--text-body); /* code only: ToC component colour; Figma binds the role's primitive */
  --toc-surface: var(--surface-page); /* code only: ToC component colour; Figma binds the role's primitive */
  --toc-border: var(--border-color-subtle); /* code only: ToC component colour; Figma binds the role's primitive */
  --toc-focus-ring: var(--focus-ring); /* code only: ToC component colour; Figma binds the role's primitive */
  --toc-border-on-accent: var(--border-color-divider); /* overlay edge on the accent: 4.45:1 (the 60% border was 2.57:1) */ /* code only: ToC component colour; Figma binds the role's primitive */
  --toc-surface-on-accent: var(--surface-accent); /* overlay and compact ToC over an accent area */
  --toc-m-active-surface: var(--surface-tint); /* compact ToC: current section's row */
  --toc-m-active-surface-on-accent: var(--surface-shade); /* 7.5:1 for white; the light row was 4.25:1 */
  --toc-m-active-radius: var(--radius-6);
  --toc-row: var(--spacing-24); /* aliases the scale step, as Figma toc/row does: a ToC row is one spacing step tall */
  --toc-row-hover: 32px;
  --toc-row-overlay: var(--toc-row-hover); /* 781–1279 overlay rows */
  --toc-dash: 3px;
  --toc-label-max: 220px; /* the widest a ToC label may get */
  --toc-z: 100; /* code only: Figma has no z-index variables */
  /* chips: UI of the showcased project (the depicted product), not part of the design system (Figma collection "Product UI" and font/inter; an intentional exemption in the health checks) */
  --chip-text: #18181b;
  --chip-surface: var(--color-white);
  --chip-border: #d4d4d8;
  --chip-surface-active: #dde2ee;
  --chip-border-active: #6b80ae;
  --chip-radius: 4px;
  --chip-radius-active: 6px;
  --chip-padding-y: 2px;
  --chip-padding-x: 6px;
  --chip-padding-active-y: 10px;
  --chip-padding-active-x: 8px;
  --chip-gap: 4px;
  --chip-line-height: 20px; /* code only: Figma keeps line heights inside the text styles */
  --chip-font: var(--font-weight-regular) var(--font-size-14)/var(--chip-line-height) var(--font-inter); /* code only: Figma types the chip text */
  --chip-glow-rest: 0 0 0 rgba(110, 128, 230, 0); /* code only: Figma has the effect style chip/glow-active (rest = no glow) */
  --chip-glow-active: 0 0 18px rgba(110, 128, 230, 0.5); /* code only: Figma has the effect style chip/glow-active (rest = no glow) */
  /* chart (.wg-graph): off the spacing scale, from Figma */
  --chart-row-gap: 14px;
  --chart-label-gap: 6px;
  --chart-label-row: 24px;
  --chart-thumb: 32px;
  --chart-thumb-compact: 26px;
  /* video play button (.wg-video-btn) */
  --video-btn-size: 56px;
  /* search bar mock (.wg-search-input): product UI, its own type (set per mode below) */
  --search-input-font: var(--font-weight-regular) var(--font-size-14)/var(--line-height-135) var(--font-switzer); /* code only: Figma types the mock's text */
  /* rough.js sketches (.wg-sketch): hand-lettered labels */
  --sketch-font: 'Architects Daughter', var(--font-switzer), cursive; /* code only: Figma types the sketch lettering */
  --sketch-title-size: var(--font-size-20); /* code only: Figma types the sketch lettering */
  /* home components (Figma 1330:1730): typed-in sizes in Figma */
  --site-header-gradient: linear-gradient(to top, var(--color-indigo-12-a0), var(--color-indigo-12) 25.602%); /* Figma 1328:9259, stops taken literally */ /* code only: Figma has it as a paint style or a node fill */
  --site-header-z: 100; /* code only: Figma has no z-index variables */
  --top-nav-avatar: 40px; /* Figma 1334:803 */ /* code only: the Figma node uses a typed-in value */
  --location-widget-photo: 44px; /* Figma 1330:1743 */ /* code only: the Figma node uses a typed-in value */
  --card-size: 260px; /* home project cards (Figma 1330:1689–1692) */ /* code only: the Figma node uses a typed-in value */
  --graph-sticker: 60px; /* logo stickers (Figma 1330:1694) */ /* code only: the Figma node uses a typed-in value */
  --colophon-logo: 40px; /* Figma 1328:8538 */ /* code only: the Figma node uses a typed-in value */
  --hint-z: 3; /* above the neighbouring stickers and links */ /* code only: Figma has no z-index variables */
  /* The centre line's Figma fill is a skewed conic gradient; on a 2px line it
     renders as accent 75% → 50% over surface-dark, top to bottom (measured in
     experiments/home-centerline/, 2026-10-21). */
  --scroll-line-gradient: linear-gradient(to bottom, color-mix(in srgb, var(--color-indigo-60) 75%, var(--color-indigo-12)), color-mix(in srgb, var(--color-indigo-60) 50%, var(--color-indigo-12))); /* code only: Figma has it as a paint style or a node fill */

  /* @roles:start — roles, named by purpose (D17; by role since D32; tiers D34).
     Colour roles alias exactly one colour primitive; components use them, never
     a --color-* primitive. A spacing or radius role exists only if 3+ distinct
     components share it (consumer counts: docs/token-map.md); everything else
     uses the scale step. Figma: the Semantic collection, same names with "/". */
  /* text colour */
  --text-body: var(--color-white); /* paragraphs and labels on the page surface */
  --text-secondary: var(--color-grey-89); /* headings, legends, labels and nav items: softer than body (14.2:1 vs 18.6:1); their emphasis comes from size and weight, not colour */
  --text-accent: var(--color-indigo-75); /* accent for text on the page surface: 5.7:1 (indigo-60 is 3.2:1) */
  --text-accent-on-light: var(--color-indigo-60); /* accent text on light surfaces: callout, hint, outcomes card */
  --text-on-light: var(--color-indigo-12); /* text on light surfaces: hint, callout */
  /* surface (background) */
  --surface-page: var(--color-indigo-12); /* the page and sketch background */
  --surface-light: var(--color-grey-89); /* callouts, the hint bar, light cards */
  --surface-accent: var(--color-indigo-60); /* solution panel, metadata card, primary button */
  --surface-raised: var(--color-indigo-18); /* raised cards, the ToC panel, home cards */
  --surface-media: var(--color-white); /* screenshot and browser frames */
  --surface-chart-bar: var(--color-grey-89-a40); /* chart bars */
  --surface-tint: var(--color-grey-89-a20);       /* secondary button, nav pill, active nav item, chip hover */
  --surface-tint-hover: var(--color-grey-89-a40); /* secondary button hover */
  --surface-shade: var(--color-indigo-12-a20);    /* action chips on the accent gradient */
  /* border colour (the border-color- prefix keeps them apart from the --border-<px> widths) */
  --border-color-divider: var(--color-grey-89); /* dividers: legend rule, comparison line, sketch strokes */
  --border-color-subtle: var(--color-grey-89-a60);   /* colophon top rule */
  --border-color-graph: var(--color-indigo-64-a32);  /* home graph edges */
  /* focus */
  --focus-ring: var(--color-grey-89); /* the focus outline on dark and accent */
  --focus-ring-on-light: var(--color-indigo-12); /* the focus ring on light controls (video button) */
  /* gap = the distance between elements, whether it is set with gap, margin or scroll-margin */
  --gap-hair: var(--spacing-4); /* a number to its label, nav items, colophon lines */
  --gap-tight: var(--spacing-8); /* icon to label, label to value */
  --gap-stack: var(--spacing-12); /* heading to text, items in a list */
  --gap-group: var(--spacing-20); /* between groups inside a block */
  --gap-block: var(--spacing-40); /* between blocks, and between columns at ≥1280 */
  --gap-section: var(--spacing-60); /* between groups of areas; scroll margins */
  /* inset = padding inside an element */
  --inset-tight: var(--spacing-8); /* chips, hints, the legend rule to its text */
  --inset-compact: var(--spacing-12); /* bars and compact cards: buttons, hint, search */
  --inset-card: var(--spacing-20); /* inside cards and callouts */
  --inset-panel: var(--spacing-24); /* inside large panels */
  --inset-wide: var(--spacing-40); /* the header, outcomes card, next-case band */
  /* radius by purpose */
  --radius-compact: var(--radius-8);   /* small elements: visuals and bars in compact layouts, the location photo, hints, action chips */
  --radius-card: var(--radius-12); /* cards, screenshots, callouts, sketch frames */
  --radius-pill: var(--radius-full); /* buttons, nav pill, search bar */
  /* @roles:end */
  /* size and focus roles: the same measure for every component */
  --size-touch: 44px;   /* minimum target size (WCAG 2.5.8 floor) */
  --size-header: 132px; /* home fixed header, fade included */ /* code only: the Figma node uses a typed-in value */
  --size-top-bar: calc(var(--spacing-60) + var(--spacing-8)); /* the phone top bar: the Home chip and the current-section chip in one row (8px more room above them than below), border included; scroll offsets fall back to it */
  --focus-offset: 3px; /* code only: Figma can't offset strokes */
  --focus-offset-inset: -2px; /* code only: Figma can't offset strokes */
}

/* @layout-tokens:start — layout and type roles, values per mode (Figma collection
   "Layout", modes "up to 780" / "781–1024" / "1025–1279" / "1280 and up"). Defined only here. */
:root {
  --layout-page-width: 1280px;
  --layout-content-width: 890px;
  --layout-columns: 6;
  --layout-gutter: var(--spacing-40);
  --layout-margin: calc((var(--layout-page-width) - var(--layout-content-width)) / 2);
  --layout-third: calc((var(--layout-content-width) - 2 * var(--layout-gutter)) / 3); /* code only: derived from the layout tokens */
  --layout-two-thirds: calc(2 * var(--layout-third) + var(--layout-gutter)); /* code only: derived from the layout tokens */
  --layout-section-padding-y: var(--spacing-100);
  --layout-scroll-gap: var(--spacing-200);
  /* type roles: one name per job, the size follows the mode (D15, D34).
     Phone and tablet share the phone values (max-width: 1279px below).
     --type-<role>-<property> are the per-mode parts (Figma Layout type/*);
     --type-<role> is the whole text style for the CSS font shorthand
     (Figma: the text style text/<role path>). */
  --type-heading-l-size: var(--font-size-48);
  --type-heading-m-size: var(--font-size-40);
  --type-statement-size: var(--font-size-24);
  --type-body-intro-size: var(--font-size-20);
  --type-body-l-size: var(--font-size-20);
  --type-body-m-size: var(--font-size-16);
  --type-body-s-size: var(--font-size-14);
  --type-body-detail-size: var(--font-size-16);
  --type-label-size: var(--font-size-14);
  --type-caption-size: var(--font-size-12);
  --type-caption-heading-weight: var(--font-weight-regular);
  --type-caption-legend-size: var(--font-size-12);
  --type-caption-legend-line-height: var(--line-height-135);
  --type-icon-size: var(--font-size-20); /* emoji icons beside text */ /* code only: Figma types the emoji */
  --type-icon-line-height: var(--line-height-100); /* code only: Figma types the emoji */
  --type-icon-s-size: var(--font-size-14); /* the hint's ℹ️, 14 at every width */ /* code only: Figma types the emoji */
  --type-strong-weight: var(--font-weight-bold); /* emphasis inside body text */ /* code only: Figma bolds a text run */
}
@media (max-width: 1279px) { /* type: tablet consumes the phone values */
  :root {
    --type-heading-l-size: var(--font-size-32); --type-heading-m-size: var(--font-size-28);
    --type-body-l-size: var(--font-size-18); --type-body-m-size: var(--font-size-18); --type-body-s-size: var(--font-size-16);
    --type-label-size: var(--font-size-16);
    --type-caption-heading-weight: var(--font-weight-semibold);
    --type-caption-legend-size: var(--font-size-16); --type-caption-legend-line-height: var(--line-height-150);
  }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  :root { --layout-content-width: 100%; --layout-gutter: var(--spacing-20); --layout-margin: var(--spacing-80); }
}
@media (min-width: 781px) and (max-width: 1024px) {
  :root { --layout-content-width: 100%; --layout-gutter: var(--spacing-20); --layout-margin: var(--spacing-40); }
}
@media (max-width: 780px) {
  :root {
    --layout-columns: 4; --layout-content-width: 100%; --layout-gutter: var(--spacing-20); --layout-margin: var(--spacing-24);
    --layout-section-padding-y: var(--spacing-60); --layout-scroll-gap: var(--spacing-60);
    --type-icon-size: var(--font-size-18); --type-icon-line-height: var(--line-height-150);
    --search-input-font: var(--font-weight-regular) var(--font-size-16)/var(--line-height-150) var(--font-switzer);
  }
}
/* The whole text styles, after the per-mode parts above (custom properties
   resolve on :root, so each width gets its own sizes). */
:root {
  --type-heading-l: var(--font-weight-extrabold) var(--type-heading-l-size)/var(--line-height-110) var(--font-cabinet-grotesk); /* code only: Figma has it as a text style */
  --type-heading-m: var(--font-weight-extrabold) var(--type-heading-m-size)/var(--line-height-110) var(--font-cabinet-grotesk); /* code only: Figma has it as a text style */
  --type-statement: var(--font-weight-bold) var(--type-statement-size)/var(--line-height-115) var(--font-cabinet-grotesk); /* code only: Figma has it as a text style */
  --type-body-intro: var(--font-weight-regular) var(--type-body-intro-size)/var(--line-height-150) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-body-l: var(--font-weight-regular) var(--type-body-l-size)/var(--line-height-150) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-body-m: var(--font-weight-regular) var(--type-body-m-size)/var(--line-height-150) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-body-s: var(--font-weight-regular) var(--type-body-s-size)/var(--line-height-150) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-body-detail: var(--font-weight-regular) var(--type-body-detail-size)/var(--line-height-150) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-label: var(--font-weight-regular) var(--type-label-size)/var(--line-height-135) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-label-strong: var(--font-weight-semibold) var(--type-label-size)/var(--line-height-135) var(--font-switzer); /* code only: Figma has it as a text style */
  --type-caption: var(--font-weight-regular) var(--type-caption-size)/var(--line-height-135) var(--font-ibm-plex-mono); /* code only: Figma has it as a text style */
  --type-caption-strong: var(--font-weight-semibold) var(--type-caption-size)/var(--line-height-135) var(--font-ibm-plex-mono); /* code only: Figma has it as a text style */
  --type-caption-heading: var(--type-caption-heading-weight) var(--type-caption-size)/var(--line-height-135) var(--font-ibm-plex-mono); /* code only: Figma has it as a text style */
  --type-caption-legend: var(--font-weight-regular) var(--type-caption-legend-size)/var(--type-caption-legend-line-height) var(--font-switzer); /* code only: Figma has it as a text style */
}
/* @layout-tokens:end */