:root {
  --font-display-light:   "Lyon Display Light", Georgia, "Times New Roman", serif;
  --font-display-regular: "Lyon Display Regular", Georgia, "Times New Roman", serif;
  --font-sans-regular:    "Graphik Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans-semibold:   "Graphik Semibold", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:            "Atlas Typewriter Regular", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.75rem, 0.7244rem + 0.1136vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.9744rem + 0.1136vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.2727rem + 0.4545vw, 1.625rem);
  --step-3:  clamp(1.625rem, 1.2159rem + 1.8182vw, 2.625rem);
  --step-4:  clamp(2.125rem, 1.7159rem + 1.8182vw, 3.125rem);
  --step-5:  clamp(2.75rem, 1.9318rem + 3.6364vw, 4.75rem);
  --step-6:  clamp(3.5rem, 2.2727rem + 5.4545vw, 6.5rem);
  --step-7:  clamp(3.75rem, 1.6023rem + 9.5455vw, 9rem);

  --type-root: 16px;
  --type-caption: var(--step--2);
  --type-body: var(--step-0);
  --type-section: var(--type-body);
  --type-subhead: var(--step-1);
  --type-lede: clamp(1.25rem, 1.0455rem + 0.9091vw, 1.75rem);
  --type-heading: var(--step-3);
  --type-hero: var(--step-7);

  --leading-solid: 1;
  --leading-control: 1.18;
  --leading-caption: 1.42;
  --leading-body: 1.56;
  --leading-prose: 1.64;
  --leading-subhead: 1.28;
  --leading-title: 1.06;
  --leading-hero: 0.94;

  --tracking-hero: -0.027em;
  --tracking-heading: -0.018em;
  --tracking-subhead: -0.01em;
  --tracking-body: 0;
  --tracking-caption: 0.025em;
  --tracking-mono: 0.055em;

  /* Colour primitives. Literal colour values live here; everything
     below this block is a semantic alias. */
  --color-ink:               #000000;
  --color-ink-soft:          #111111;
  --color-ink-muted:         #555555;
  --color-ink-faint:         #888888;
  --color-ink-a05:           rgba(0,0,0,0.05);
  --color-marker-yellow:     rgba(250,222,104,0.42);
  --color-onyx:              #000000;

  --color-carbon-black:      #000000;
  --color-porcelain:         #FFFFFF;
  --color-beige:             #FAFAFA;
  --color-disabled-surface:  #E0E0E0;
  --color-disabled-line:     #E0E0E0;
  --color-paper:             var(--color-porcelain);

  --color-success:           #166534;
  --color-success-surface:   #15803D;
  --color-success-line:      #166534;
  --color-success-on-surface: #FFFFFF;
  --color-warning:           #111111;
  --color-danger:            #DC2626;
  --color-danger-surface:    #FAFAFA;

  /* Global semantic roles. */
  --text-primary:            var(--color-onyx);
  --text-secondary:          var(--color-ink);
  --text-muted:              var(--color-ink-muted);
  --text-placeholder:        var(--color-ink-faint);
  --text-inverse:            var(--color-paper);

  --surface-page-bg:         var(--color-paper);
  --surface-card-bg:         var(--color-paper);
  --surface-inverse-bg:      var(--color-ink);
  --surface-inverse-fg:      var(--color-paper);
  --line-strong:             var(--color-ink);
  --line-soft:               #E5E5E5;
  --line-medium:             #E5E5E5;

  --focus-ring:              var(--text-primary);
  --focus-ring-inverse:      var(--surface-page-bg);
  --interaction-hover-bg:    var(--color-beige);

  --control-disabled-bg:     var(--color-disabled-surface);
  --control-disabled-border: var(--color-disabled-line);
  --control-disabled-fg:     var(--text-muted);

  --selection-bg:            var(--color-marker-yellow);
  --selection-fg:            var(--text-primary);
  --overlay-hover:           var(--color-ink-a05);

  /* App-wide roles. */
  --app-bg:                  var(--surface-page-bg);
  --app-fg:                  var(--text-primary);
  --heading-fg:              var(--text-primary);
  --skip-link-bg:            var(--surface-inverse-bg);
  --skip-link-fg:            var(--surface-inverse-fg);

  /* Shared component roles. */
  --button-on-light-bg:       var(--color-carbon-black);
  --button-on-light-fg:       var(--color-porcelain);
  --button-on-light-border:   var(--text-primary);
  --button-on-light-hover-bg: var(--surface-page-bg);
  --button-on-light-hover-fg: var(--text-primary);
  --button-on-light-focus:    var(--text-primary);

  --button-bg:       var(--button-on-light-bg);
  --button-fg:       var(--button-on-light-fg);
  --button-border:   var(--button-on-light-border);
  --button-hover-bg: var(--button-on-light-hover-bg);
  --button-hover-fg: var(--button-on-light-hover-fg);
  --button-focus:    var(--button-on-light-focus);
  --button-disabled-bg:      var(--control-disabled-bg);
  --button-disabled-border:  var(--control-disabled-border);
  --button-disabled-fg:      var(--control-disabled-fg);

  /* Shell roles. */
  --shell-header-bg:             var(--surface-page-bg);
  --shell-header-fg:             var(--text-primary);
  --shell-header-line:           var(--line-soft);
  --shell-header-brand-fg:       var(--shell-header-fg);
  --shell-brand-mark-bg:         var(--text-primary);
  --shell-footer-rule:           var(--line-soft);
  --shell-footer-fg:             var(--text-primary);
  --shell-footer-link-hover:     var(--text-primary);

  /* Landing roles. */
  --hero-title-fg:           var(--text-primary);
  --hero-lede-fg:            var(--text-secondary);

  /* Document roles. */
  --doc-title-size:          var(--type-heading);
  --doc-body-size:           var(--type-body);
  --doc-meta-size:           var(--type-caption);
  --doc-section-title-size:  var(--type-subhead);
  --doc-title-gap:           var(--space-xs);
  --doc-meta-gap:            var(--space-xl);
  --doc-intro-gap:           var(--space-xl);
  --doc-section-gap:         var(--space-xl);
  --doc-heading-gap:         var(--space-xs);
  --doc-text-gap:            var(--space-xs);
  --doc-list-indent:         1.15em;
  --doc-list-item-gap:       0.4em;
  --doc-list-marker-size:    1.25em;
  --doc-title-fg:            var(--text-primary);
  --doc-meta-fg:             var(--text-primary);
  --doc-lede-fg:             var(--text-primary);
  --doc-heading-fg:          var(--text-primary);
  --doc-body-fg:             var(--text-primary);

  --space-3xs: clamp(0.25rem,  0.2372rem + 0.0568vw, 0.2813rem);
  --space-2xs: clamp(0.5rem,   0.4744rem + 0.1136vw, 0.5625rem);
  --space-xs:  clamp(0.75rem,  0.7117rem + 0.1705vw, 0.8438rem);
  --space-s:   clamp(1rem,     0.9489rem + 0.2273vw, 1.125rem);
  --space-m:   clamp(1.5rem,   1.4233rem + 0.3409vw, 1.6875rem);
  --space-l:   clamp(2rem,     1.8977rem + 0.4545vw, 2.25rem);
  --space-xl:  clamp(3rem,     2.8466rem + 0.6818vw, 3.375rem);
  --space-2xl: clamp(4rem,     3.7955rem + 0.9091vw, 4.5rem);
  --space-3xl: clamp(6rem,     5.6932rem + 1.3636vw, 6.75rem);

  --layout-page-y: clamp(5rem, 3.8636rem + 5.0505vw, 7.5rem);
  --layout-section-y: clamp(4.75rem, 3.7045rem + 4.6465vw, 7.75rem);
  --layout-section-y-compact: clamp(4.5rem, 3.3571rem + 5.0794vw, 5.5rem);
  --layout-hero-y-start: clamp(6.5rem, 4.9091rem + 7.0707vw, 10rem);
  --layout-hero-y-end: var(--layout-page-y);
  --layout-hero-stack: clamp(4rem, 2.8636rem + 5.0505vw, 6.5rem);
  --layout-rule-gap: var(--space-l);
  --layout-block-gap: var(--space-l);
  --layout-copy-gap: var(--space-s);
  --layout-grid-gap: var(--space-m);
  --layout-compact-gap: var(--space-2xs);
  --layout-micro-gap: var(--space-3xs);
  --card-column-gap: clamp(2rem, 3.5vw, 3rem);

  --gutter:     clamp(1.25rem, 1.0227rem + 1.0114vw, 3.5rem);
  --page-bot:   clamp(3.5rem,  2.4773rem + 4.5455vw, 6rem);

  --max-public: 1120px;
  --max-prose:  64ch;

  --header-public-h: 72px;
  --footer-public-h: 72px;
  --page-inset-x: 48px;
  --page-inset-x-mobile: 24px;
  --public-label-col: clamp(11rem, 18vw, 16rem);
  --public-column-gap: clamp(2.5rem, 6vw, 6.5rem);
  --public-grid-columns: var(--public-label-col) minmax(0, 1fr);
  --section-detail-label-col: 7rem;
  --section-detail-column-gap: var(--space-m);
  --section-detail-column-gap-compact: var(--space-s);
  --control-button-w: 156px;
  --control-button-h: 48px;
  --control-gap: var(--space-2xs);
  --control-pad-x: 16px;
  --control-focus-offset: 3px;
  --case-content-measure: 62ch;
  --case-card-y: clamp(2.5rem, 1.8182rem + 3.0303vw, 4rem);
  --case-card-y-compact: clamp(2.25rem, 1.6786rem + 2.5397vw, 2.75rem);

  --ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --duration-quick:  0ms;
  --duration-medium: 0ms;
  --duration-slow:   0ms;

  --radius-0:    0;
  --radius-pill: 999px;
}