/* GENERATED by design/build_tokens.py from design/tokens.json. Do not edit by hand. */

/* 1. Primitives + component tokens */
:root {
  --jd-color-mulberry: #552B3E;
  --jd-color-mulberry-deep: #2B1520;
  --jd-color-mulberry-muted: #6B5560;
  --jd-color-mulberry-mist: #D7C3CD;
  --jd-color-oat: #F4EDDE;
  --jd-color-oat-light: #FBF7EF;
  --jd-color-oat-sunk: #EADFCB;
  --jd-color-oat-line: #DCCDB6;
  --jd-color-clay: #CB795E;
  --jd-color-clay-light: #E39A7E;
  --jd-color-clay-wash: #F3DCD1;
  --jd-color-clay-deep: #9A4F38;
  --jd-color-lilac: #B9A6CC;
  --jd-color-lilac-light: #C9B6DC;
  --jd-color-lilac-deep: #7A5A9A;
  --jd-color-moss: #74866E;
  --jd-color-moss-deep: #5E7259;
  --jd-color-moss-ink: #4B5D46;
  --jd-color-moss-light: #A9BC9F;
  --jd-color-moss-wash: #DFE6D6;
  --jd-color-night: #2A1620;
  --jd-color-night-deep: #1E1218;
  --jd-color-night-raised: #28181F;
  --jd-color-night-sunk: #160D11;
  --jd-color-night-line: #3D2A33;
  --jd-color-night-clay: #3A2420;
  --jd-color-night-moss: #22291F;
  --jd-color-parchment: #F1E8DA;
  --jd-color-dusk-muted: #B9A5AE;
  --jd-color-dusk-mist: #BFA9B4;
  --jd-color-transparent: transparent;
  --jd-hem-ink: #3E1F2D;
  --jd-hem-line: #6E4555;
  --jd-hem-stitch: #A9858F;
  --jd-hem-shade: #E4D5BE;
  --jd-hem-oat: var(--jd-color-oat);
  --jd-hem-highlight: #FFFBF3;
  --jd-hem-cheek: #D98A6E;
  --jd-hem-lilac: var(--jd-color-lilac);
  --jd-misuse-clinical-blue: #1E6FD9;
  --jd-misuse-clinical-sky: #5AA9F0;
  --jd-misuse-alarm-red: #E23B3B;
  --jd-misuse-gloss-top: #B07AA0;
  --jd-misuse-gloss-bottom: #2A0F1C;
  --jd-misuse-rotate: rotate(-90deg) scaleX(-1);
  --jd-mark-aspect: 28 / 44;
  --jd-mark-two-tone-stem: var(--jd-color-mulberry);
  --jd-mark-two-tone-fold: var(--jd-color-clay);
  --jd-mark-two-tone-dot: var(--jd-color-lilac);
  --jd-mark-dark-stem: var(--jd-color-oat);
  --jd-mark-dark-fold: var(--jd-color-clay-light);
  --jd-mark-dark-dot: var(--jd-color-lilac-light);
  --jd-mark-ink: var(--jd-color-mulberry);
  --jd-mark-reversed: var(--jd-color-oat);
  --jd-font-display: 'Bricolage Grotesque', 'Bricolage Fallback', ui-sans-serif, system-ui, sans-serif;
  --jd-font-body: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', ui-sans-serif, system-ui, sans-serif;
  --jd-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --jd-font-weight-regular: 400;
  --jd-font-weight-medium: 500;
  --jd-font-weight-semibold: 600;
  --jd-font-weight-bold: 700;
  --jd-font-size-root: 17px;
  --jd-font-size-micro: 0.68rem;
  --jd-font-size-label: 0.74rem;
  --jd-font-size-code: 0.8rem;
  --jd-font-size-caption: 0.86rem;
  --jd-font-size-small: 0.93rem;
  --jd-font-size-bubble: 0.95rem;
  --jd-font-size-body: 1rem;
  --jd-font-size-lede: 1.15rem;
  --jd-font-size-h3: 1.2rem;
  --jd-font-size-amount: 1.5rem;
  --jd-font-size-tagline: clamp(1.25rem, 2.6vw, 1.75rem);
  --jd-font-size-h2: clamp(1.9rem, 4vw, 2.6rem);
  --jd-font-size-display: clamp(2rem, 5vw, 3.2rem);
  --jd-font-size-deck: clamp(1.08rem, 1.5vw, 1.3rem);
  --jd-font-size-section: clamp(2rem, 4.6vw, 3.4rem);
  --jd-font-size-figure: clamp(1.9rem, 3.6vw, 2.7rem);
  --jd-font-size-hero: clamp(2.45rem, 5.4vw, 4.6rem);
  --jd-font-leading-hero: 0.98;
  --jd-font-leading-tight: 1.05;
  --jd-font-leading-snug: 1.1;
  --jd-font-leading-ui: 1.35;
  --jd-font-leading-body: 1.6;
  --jd-font-tracking-hero: -0.028em;
  --jd-font-tracking-section: -0.02em;
  --jd-font-tracking-tight: -0.01em;
  --jd-font-tracking-pill: 0.06em;
  --jd-font-tracking-wide: 0.1em;
  --jd-font-tracking-label: 0.14em;
  --jd-font-numeric: tabular-nums;
  --jd-font-opsz-display: "opsz" 72;
  --jd-space-none: 0;
  --jd-space-hair: 2px;
  --jd-space-xxs: 4px;
  --jd-space-xs: 6px;
  --jd-space-sm: 10px;
  --jd-space-md: 14px;
  --jd-space-lg: 20px;
  --jd-space-xl: 28px;
  --jd-space-xxl: 36px;
  --jd-space-xxxl: 52px;
  --jd-space-section: 72px;
  --jd-space-hero-top: 56px;
  --jd-space-hero-bottom: 64px;
  --jd-space-footer: 48px;
  --jd-space-gutter: 20px;
  --jd-space-list-indent: 1.1em;
  --jd-space-landing-section: clamp(64px, 8vw, 112px);
  --jd-space-landing-gap: clamp(20px, 3vw, 44px);
  --jd-space-control-x: 20px;
  --jd-space-control-y: 12px;
  --jd-space-control-x-small: 14px;
  --jd-radius-none: 0;
  --jd-radius-swatch: 3px;
  --jd-radius-tile: 4px;
  --jd-radius-card: 6px;
  --jd-radius-bubble: 14px;
  --jd-radius-bubble-tail: 4px;
  --jd-radius-pill: 999px;
  --jd-border-hairline: 1px;
  --jd-border-rule: 3px;
  --jd-border-focus: 2px;
  --jd-border-focus-offset: 3px;
  --jd-border-marker: 2px;
  --jd-border-dash: dashed;
  --jd-border-solid: solid;
  --jd-size-full: 100%;
  --jd-size-half: 50%;
  --jd-size-square: 1 / 1;
  --jd-size-fr: 1fr;
  --jd-size-auto: auto;
  --jd-size-span-all: 1 / -1;
  --jd-size-container: 1080px;
  --jd-size-measure: 64ch;
  --jd-size-measure-lede: 58ch;
  --jd-size-measure-sub: 46ch;
  --jd-size-measure-tagline: 22ch;
  --jd-size-track-hero: 340px;
  --jd-size-track-wide: 300px;
  --jd-size-track-pair: 400px;
  --jd-size-track-card: 230px;
  --jd-size-track-swatch: 170px;
  --jd-size-track-state: 150px;
  --jd-size-track-hem-colour: 110px;
  --jd-size-track-credit: 200px;
  --jd-size-table-min: 640px;
  --jd-size-bubble-hero: 260px;
  --jd-size-hem-hero: clamp(192px, 30vw, 256px);
  --jd-size-hem-state: 128px;
  --jd-size-hem-chat: 32px;
  --jd-size-sprite-native-small: 16px;
  --jd-size-sprite-native-medium: 32px;
  --jd-size-sprite-native-large: 64px;
  --jd-size-sprite-enlarged: 128px;
  --jd-size-pixel-grid: 8px;
  --jd-size-mark-specimen: 156px;
  --jd-size-mark-dont: 88px;
  --jd-size-mark-small: 16px;
  --jd-size-mark-medium: 32px;
  --jd-size-mark-large: 48px;
  --jd-size-mark-xlarge: 64px;
  --jd-size-mark-hero: 128px;
  --jd-size-lockup-hero: clamp(64px, 13vw, 106px);
  --jd-size-lockup-specimen: clamp(56px, 10vw, 88px);
  --jd-size-clear-diagram: 220px;
  --jd-size-spec-min: 240px;
  --jd-size-spec-min-medium: 200px;
  --jd-size-spec-min-small: 150px;
  --jd-size-idea-icon: 72px;
  --jd-size-swatch-hem: 44px;
  --jd-size-swatch-chip: 110px;
  --jd-size-ratio-bar: 28px;
  --jd-size-flag-corner: 26px;
  --jd-size-flag-row: 12px;
  --jd-size-pill-dot: 7px;
  --jd-landing-container: 1200px;
  --jd-landing-header-height: 64px;
  --jd-landing-lockup-height: 30px;
  --jd-landing-nav-display: flex;
  --jd-landing-cta-long-display: inline;
  --jd-landing-cta-short-display: none;
  --jd-landing-touch: 44px;
  --jd-landing-button-height: 50px;
  --jd-landing-button-height-small: 40px;
  --jd-landing-hero-measure: 21ch;
  --jd-landing-text-grow: 999;
  --jd-landing-text-shrink: 1;
  --jd-landing-content-min: 58%;
  --jd-landing-deck-measure: 52ch;
  --jd-landing-hem-summary: 64px;
  --jd-landing-hem-inline: 64px;
  --jd-landing-summary-track: 300px;
  --jd-landing-lane-track: 330px;
  --jd-landing-audit-days: 31;
  --jd-landing-timeline-label: 104px;
  --jd-landing-timeline-row: 22px;
  --jd-landing-timeline-gap: 3px;
  --jd-landing-timeline-axis: 18px;
  --jd-landing-handle: 28px;
  --jd-landing-handle-offset: calc(var(--jd-landing-handle) / -2);
  --jd-landing-half-day-inset: calc(100% / 62);
  --jd-landing-day-marker: 70%;
  --jd-landing-clip-flat: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
  --jd-landing-clip-fold: polygon(0 0, 52% 0, 100% 48%, 100% 100%, 0 100%);
  --jd-landing-fold-size: 48%;
  --jd-landing-pixel-icon: 48px;
  --jd-landing-step-track: 250px;
  --jd-landing-tier-track: 240px;
  --jd-landing-quilt-track: 440px;
  --jd-landing-quilt-columns: 46;
  --jd-landing-quilt-gap: 2;
  --jd-landing-inspector-track: 300px;
  --jd-landing-table-max-height: 360px;
  --jd-landing-export-min: 680px;
  --jd-landing-form-track: 240px;
  --jd-landing-input-height: 48px;
  --jd-landing-switch-width: 48px;
  --jd-landing-switch-height: 28px;
  --jd-landing-switch-knob: 20px;
  --jd-landing-switch-travel: 20px;
  --jd-landing-header-shadow: 0 1px 0 var(--jd-line);
  --jd-landing-header-blur: saturate(1.15) blur(12px);
  --jd-landing-z-header: 20;
  --jd-landing-z-raised: 2;
  --jd-landing-tick-minor-visibility: visible;
  --jd-landing-edge-shadow: inset calc(var(--jd-border-marker) * -1) 0 0 var(--jd-census-edge);
  --jd-landing-inspector-min: 220px;
  --jd-landing-textarea-min: 96px;
  --jd-landing-legend-swatch: 12px;
  --jd-landing-step-number: 28px;
  --jd-landing-status-dot: 7px;
  --jd-landing-focus-ring: 0 0 0 var(--jd-border-focus) var(--jd-accent);
  --jd-landing-handle-ring: 0 0 0 var(--jd-border-hairline) var(--jd-brand);
  --jd-landing-thumb-offset: calc((var(--jd-border-marker) - var(--jd-landing-handle)) / 2);
  --jd-landing-caret-closed: 45deg;
  --jd-landing-caret-open: 225deg;
  --jd-landing-toggle-icon: 20px;
  --jd-landing-quilt-fold: 0.48;
  --jd-landing-quilt-review-stroke: 0.16;
  --jd-landing-quilt-select-stroke: 2;
  --jd-landing-quilt-hover-stroke: 1;
  --jd-landing-col-id: 64px;
  --jd-landing-col-date: 120px;
  --jd-landing-col-item: 200px;
  --jd-landing-col-why: 260px;
  --jd-landing-col-status: 220px;
  --jd-landing-skip-hidden: translateY(-200%);
  --jd-landing-scroll-margin: 88px;
  --jd-landing-scroll-behavior: smooth;
  --jd-landing-hero-mark-bleed: clamp(160px, 22vw, 320px);
  --jd-diagram-rule-outer: 0.35;
  --jd-diagram-rule-inner: 0.2;
  --jd-diagram-rule-x: 0.25;
  --jd-diagram-dash-outer: 1 1;
  --jd-diagram-dash-x: 0.8 0.6;
  --jd-diagram-label-size: 2.6px;
  --jd-icon-stroke: 2;
  --jd-icon-dash: 4 4;
  --jd-ratio-oat: 58;
  --jd-ratio-mulberry: 26;
  --jd-ratio-lilac: 7;
  --jd-ratio-clay: 5;
  --jd-ratio-moss: 4;
  --jd-opacity-hidden: 0;
  --jd-opacity-visible: 1;
  --jd-opacity-dim: 0.28;
  --jd-opacity-strike: 70%;
  --jd-opacity-flag-row: 55%;
  --jd-opacity-hatch: 13%;
  --jd-opacity-grid-line: 8%;
  --jd-opacity-glass: 88%;
  --jd-opacity-census: 16%;
  --jd-opacity-band-line: 16%;
  --jd-opacity-band-surface: 7%;
  --jd-opacity-quilt-unread: 12%;
  --jd-opacity-quilt-match: 80%;
  --jd-opacity-correction: 38%;
  --jd-opacity-field-fill: 50%;
  --jd-opacity-field-border: 55%;
  --jd-motion-breathe-duration: 3.6s;
  --jd-motion-blink-duration: 5s;
  --jd-motion-breathe-offset: 8px;
  --jd-motion-easing-stepped: steps(1);
  --jd-motion-breathe: jd-breathe var(--jd-motion-breathe-duration) var(--jd-motion-easing-stepped) infinite;
  --jd-motion-blink: jd-blink var(--jd-motion-blink-duration) var(--jd-motion-easing-stepped) infinite;
  --jd-motion-duration-fast: 120ms;
  --jd-motion-duration-base: 220ms;
  --jd-motion-duration-fold: 260ms;
  --jd-motion-duration-slow: 480ms;
  --jd-motion-stagger: 34ms;
  --jd-motion-gaze-hold: 1400ms;
  --jd-motion-blink-hold: 150ms;
  --jd-motion-blink-every: 3800ms;
  --jd-motion-blink-jitter: 2600ms;
  --jd-motion-announce-delay: 650ms;
  --jd-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --jd-motion-easing-fold: cubic-bezier(0.5, 0, 0.15, 1);
  --jd-motion-lift: translateY(-1px);
}

/* 2. Semantic roles: light (default) */
:root {
  --jd-bg: var(--jd-color-oat);
  --jd-surface: var(--jd-color-oat-light);
  --jd-sunk: var(--jd-color-oat-sunk);
  --jd-fg: var(--jd-color-mulberry-deep);
  --jd-muted: var(--jd-color-mulberry-muted);
  --jd-line: var(--jd-color-oat-line);
  --jd-brand: var(--jd-color-mulberry);
  --jd-brand-fg: var(--jd-color-oat);
  --jd-patch: var(--jd-color-lilac);
  --jd-accent: var(--jd-color-lilac-deep);
  --jd-flag: var(--jd-color-clay);
  --jd-flag-soft: var(--jd-color-clay-wash);
  --jd-flag-text: var(--jd-color-clay-deep);
  --jd-ok: var(--jd-color-moss-deep);
  --jd-ok-soft: var(--jd-color-moss-wash);
  --jd-ok-text: var(--jd-color-moss-ink);
  --jd-hero-bg: var(--jd-color-mulberry);
  --jd-hero-fg: var(--jd-color-oat);
  --jd-hero-muted: var(--jd-color-mulberry-mist);
  --jd-hero-bubble-fg: var(--jd-color-mulberry-deep);
  --jd-ground-light: var(--jd-color-oat);
  --jd-ground-dark: var(--jd-color-night);
  --jd-ground-brand: var(--jd-color-mulberry);
  --jd-hatch: color-mix(in srgb, var(--jd-color-clay) var(--jd-opacity-hatch), transparent);
  --jd-grid-line: color-mix(in srgb, var(--jd-color-mulberry) var(--jd-opacity-grid-line), transparent);
  --jd-strike: color-mix(in srgb, var(--jd-color-clay) var(--jd-opacity-strike), transparent);
  --jd-flag-row: color-mix(in srgb, var(--jd-color-clay-wash) var(--jd-opacity-flag-row), transparent);
  --jd-diagram-ink: var(--jd-color-mulberry-muted);
  --jd-header-bg: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-glass), transparent);
  --jd-census: color-mix(in srgb, var(--jd-color-mulberry) var(--jd-opacity-census), transparent);
  --jd-census-edge: var(--jd-color-mulberry);
  --jd-paid: var(--jd-color-moss-wash);
  --jd-paid-edge: var(--jd-color-moss);
  --jd-over: var(--jd-color-clay);
  --jd-over-fold: var(--jd-color-clay-wash);
  --jd-correction: color-mix(in srgb, var(--jd-color-lilac) var(--jd-opacity-correction), transparent);
  --jd-review: var(--jd-color-clay-deep);
  --jd-band-bg: var(--jd-color-mulberry);
  --jd-band-surface: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-band-surface), transparent);
  --jd-band-fg: var(--jd-color-oat);
  --jd-band-muted: var(--jd-color-mulberry-mist);
  --jd-band-line: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-band-line), transparent);
  --jd-band-button-bg: var(--jd-color-oat);
  --jd-band-button-fg: var(--jd-color-mulberry-deep);
  --jd-band-field-bg: color-mix(in srgb, var(--jd-color-mulberry-deep) var(--jd-opacity-field-fill), transparent);
  --jd-band-field-border: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-field-border), transparent);
  --jd-quilt-unread: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-quilt-unread), transparent);
  --jd-quilt-match: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-quilt-match), transparent);
  --jd-quilt-adjust: var(--jd-color-clay-light);
  --jd-quilt-fold: var(--jd-color-clay-wash);
  --jd-quilt-review: var(--jd-color-clay-light);
  --jd-quilt-cursor: var(--jd-color-oat);
  color-scheme: light;
}

/* 3. Semantic roles: dark (OS preference unless light is forced, or explicit toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jd-bg: var(--jd-color-night-deep);
    --jd-surface: var(--jd-color-night-raised);
    --jd-sunk: var(--jd-color-night-sunk);
    --jd-fg: var(--jd-color-parchment);
    --jd-muted: var(--jd-color-dusk-muted);
    --jd-line: var(--jd-color-night-line);
    --jd-brand: var(--jd-color-oat);
    --jd-brand-fg: var(--jd-color-mulberry-deep);
    --jd-patch: var(--jd-color-lilac-light);
    --jd-accent: var(--jd-color-lilac-light);
    --jd-flag: var(--jd-color-clay-light);
    --jd-flag-soft: var(--jd-color-night-clay);
    --jd-flag-text: var(--jd-color-clay-light);
    --jd-ok: var(--jd-color-moss-light);
    --jd-ok-soft: var(--jd-color-night-moss);
    --jd-ok-text: var(--jd-color-moss-light);
    --jd-hero-bg: var(--jd-color-night);
    --jd-hero-fg: var(--jd-color-oat);
    --jd-hero-muted: var(--jd-color-dusk-mist);
    --jd-hero-bubble-fg: var(--jd-color-mulberry-deep);
    --jd-ground-light: var(--jd-color-oat);
    --jd-ground-dark: var(--jd-color-night);
    --jd-ground-brand: var(--jd-color-mulberry);
    --jd-hatch: color-mix(in srgb, var(--jd-color-clay) var(--jd-opacity-hatch), transparent);
    --jd-grid-line: color-mix(in srgb, var(--jd-color-mulberry) var(--jd-opacity-grid-line), transparent);
    --jd-strike: color-mix(in srgb, var(--jd-color-clay-light) var(--jd-opacity-strike), transparent);
    --jd-flag-row: color-mix(in srgb, var(--jd-color-night-clay) var(--jd-opacity-flag-row), transparent);
    --jd-diagram-ink: var(--jd-color-mulberry-muted);
    --jd-header-bg: color-mix(in srgb, var(--jd-color-night-deep) var(--jd-opacity-glass), transparent);
    --jd-census: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-census), transparent);
    --jd-census-edge: var(--jd-color-oat);
    --jd-paid: color-mix(in srgb, var(--jd-color-moss-light) 26%, transparent);
    --jd-paid-edge: var(--jd-color-moss-light);
    --jd-over: var(--jd-color-clay-light);
    --jd-over-fold: var(--jd-color-night-clay);
    --jd-correction: color-mix(in srgb, var(--jd-color-lilac-light) var(--jd-opacity-correction), transparent);
    --jd-review: var(--jd-color-clay-light);
    --jd-band-bg: var(--jd-color-night-sunk);
    --jd-band-surface: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-band-surface), transparent);
    --jd-band-fg: var(--jd-color-parchment);
    --jd-band-muted: var(--jd-color-dusk-mist);
    --jd-band-line: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-band-line), transparent);
    --jd-band-button-bg: var(--jd-color-oat);
    --jd-band-button-fg: var(--jd-color-mulberry-deep);
    --jd-band-field-bg: color-mix(in srgb, var(--jd-color-night-deep) var(--jd-opacity-field-fill), transparent);
    --jd-band-field-border: color-mix(in srgb, var(--jd-color-parchment) var(--jd-opacity-field-border), transparent);
    --jd-quilt-unread: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-quilt-unread), transparent);
    --jd-quilt-match: color-mix(in srgb, var(--jd-color-parchment) var(--jd-opacity-quilt-match), transparent);
    --jd-quilt-adjust: var(--jd-color-clay-light);
    --jd-quilt-fold: var(--jd-color-clay-wash);
    --jd-quilt-review: var(--jd-color-clay-light);
    --jd-quilt-cursor: var(--jd-color-oat);
  color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --jd-bg: var(--jd-color-night-deep);
  --jd-surface: var(--jd-color-night-raised);
  --jd-sunk: var(--jd-color-night-sunk);
  --jd-fg: var(--jd-color-parchment);
  --jd-muted: var(--jd-color-dusk-muted);
  --jd-line: var(--jd-color-night-line);
  --jd-brand: var(--jd-color-oat);
  --jd-brand-fg: var(--jd-color-mulberry-deep);
  --jd-patch: var(--jd-color-lilac-light);
  --jd-accent: var(--jd-color-lilac-light);
  --jd-flag: var(--jd-color-clay-light);
  --jd-flag-soft: var(--jd-color-night-clay);
  --jd-flag-text: var(--jd-color-clay-light);
  --jd-ok: var(--jd-color-moss-light);
  --jd-ok-soft: var(--jd-color-night-moss);
  --jd-ok-text: var(--jd-color-moss-light);
  --jd-hero-bg: var(--jd-color-night);
  --jd-hero-fg: var(--jd-color-oat);
  --jd-hero-muted: var(--jd-color-dusk-mist);
  --jd-hero-bubble-fg: var(--jd-color-mulberry-deep);
  --jd-ground-light: var(--jd-color-oat);
  --jd-ground-dark: var(--jd-color-night);
  --jd-ground-brand: var(--jd-color-mulberry);
  --jd-hatch: color-mix(in srgb, var(--jd-color-clay) var(--jd-opacity-hatch), transparent);
  --jd-grid-line: color-mix(in srgb, var(--jd-color-mulberry) var(--jd-opacity-grid-line), transparent);
  --jd-strike: color-mix(in srgb, var(--jd-color-clay-light) var(--jd-opacity-strike), transparent);
  --jd-flag-row: color-mix(in srgb, var(--jd-color-night-clay) var(--jd-opacity-flag-row), transparent);
  --jd-diagram-ink: var(--jd-color-mulberry-muted);
  --jd-header-bg: color-mix(in srgb, var(--jd-color-night-deep) var(--jd-opacity-glass), transparent);
  --jd-census: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-census), transparent);
  --jd-census-edge: var(--jd-color-oat);
  --jd-paid: color-mix(in srgb, var(--jd-color-moss-light) 26%, transparent);
  --jd-paid-edge: var(--jd-color-moss-light);
  --jd-over: var(--jd-color-clay-light);
  --jd-over-fold: var(--jd-color-night-clay);
  --jd-correction: color-mix(in srgb, var(--jd-color-lilac-light) var(--jd-opacity-correction), transparent);
  --jd-review: var(--jd-color-clay-light);
  --jd-band-bg: var(--jd-color-night-sunk);
  --jd-band-surface: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-band-surface), transparent);
  --jd-band-fg: var(--jd-color-parchment);
  --jd-band-muted: var(--jd-color-dusk-mist);
  --jd-band-line: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-band-line), transparent);
  --jd-band-button-bg: var(--jd-color-oat);
  --jd-band-button-fg: var(--jd-color-mulberry-deep);
  --jd-band-field-bg: color-mix(in srgb, var(--jd-color-night-deep) var(--jd-opacity-field-fill), transparent);
  --jd-band-field-border: color-mix(in srgb, var(--jd-color-parchment) var(--jd-opacity-field-border), transparent);
  --jd-quilt-unread: color-mix(in srgb, var(--jd-color-oat) var(--jd-opacity-quilt-unread), transparent);
  --jd-quilt-match: color-mix(in srgb, var(--jd-color-parchment) var(--jd-opacity-quilt-match), transparent);
  --jd-quilt-adjust: var(--jd-color-clay-light);
  --jd-quilt-fold: var(--jd-color-clay-wash);
  --jd-quilt-review: var(--jd-color-clay-light);
  --jd-quilt-cursor: var(--jd-color-oat);
  color-scheme: dark;
}

/* 4. Media overrides (responsive and reduced-motion token values) */
/* narrow */
@media (max-width: 46rem) {
  :root {
    --jd-landing-nav-display: none;
    --jd-landing-cta-long-display: none;
    --jd-landing-cta-short-display: inline;
    --jd-landing-timeline-label: 70px;
    --jd-landing-tick-minor-visibility: hidden;
    --jd-landing-timeline-gap: 2px;
    --jd-landing-header-height: 58px;
    --jd-landing-lockup-height: 24px;
  }
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --jd-motion-breathe: none;
    --jd-motion-blink: none;
    --jd-motion-duration-fast: 0ms;
    --jd-motion-duration-base: 0ms;
    --jd-motion-duration-fold: 0ms;
    --jd-motion-duration-slow: 0ms;
    --jd-motion-stagger: 0ms;
    --jd-landing-scroll-behavior: auto;
  }
}

/* 5. Motion primitives (keyframe offsets cannot be variables, so they live here) */
@keyframes jd-blink { 0%, 93% { opacity: var(--jd-opacity-hidden); } 94%, 97% { opacity: var(--jd-opacity-visible); } 98%, 100% { opacity: var(--jd-opacity-hidden); } }
@keyframes jd-breathe { 0%, 55% { transform: none; } 56%, 100% { transform: translateY(var(--jd-motion-breathe-offset)); } }