/* ⚠ AUTO-GENERATED — DO NOT EDIT.
   Source of truth: design-system/tokens/sploot.tokens.json
   Regenerate: npm run build:tokens   (design-system/bin/build-tokens.mjs)
   Design tokens for splootvets.com. */

:root {

    /* ── Color primitives ───────────────────────────────── */
    /* Brand families follow Figma's 40 -> 100 step convention (palest -> fullest), so these map 1:1 to the Figma color variables. mint + fire-opal use Figma's EXACT values; the coded-base families (midnight-eagle, opal, cream) keep our preferred bases at /100 with tints on Figma's lightening curve. Families used with Tailwind opacity modifiers also expose a space-separated RGB channel var -> rgb(var(--x-rgb) / <alpha-value>). */
    --midnight-eagle-rgb: 27 75 75;  /* #1B4B4B */
    --opal-rgb: 224 122 106;  /* #E07A6A - primary accent (was "coral") */
    --coral-rgb: 224 122 106;  /* legacy alias of --opal-rgb */
    --mint-rgb: 127 209 185;  /* #7FD1B9 - Figma middle-mint */
    --green-rgb: 127 209 185;  /* alias of mint - green is merged into the mint family */
    --cream-rgb: 242 234 228;  /* #F2EAE4 - page canvas */
    --opal-120-rgb: 226 94 90;  /* #E25E5A channels - primary button red (enables /opacity modifiers) */
    --success-rgb: 16 185 129;  /* #10B981 channels - status success (enables subtle /opacity tints, e.g. open-now pill) */
    /* Midnight-eagle - brand core: body text + dark sections. Muted tones come from the alpha ramp below; --midnight-eagle-120 is the darkest CTA-panel value. */
    --midnight-eagle-100: rgb(var(--midnight-eagle-rgb));  /* #1B4B4B */
    --midnight-eagle-120: #164347;  /* #164347 midnight eagle — deepest panel value (was --midnight-eagle-deep) */
    --midnight-eagle-110: #234246;  /* lighter dark-panel step — hover for dark secondary buttons, raised surface on dark (Webflow midnight-eagle-100) */
    --midnight-eagle-deep: var(--midnight-eagle-120);  /* deprecated alias of --midnight-eagle-120 */
    --midnight-eagle-140: #10302F;  /* #10302F — darkest midnight-eagle shade (was --teal-800) */
    /* Opal - primary accent (formerly "coral"). Light tints -> coral base (/100) -> the saturated SplootPack reds (/120, /140). One family; the old "fire-opal" is just opal's high end. */
    --opal-40: #FAEAE7;
    --opal-60: #F5D4CF;
    --opal-80: #EBA99E;
    --opal-100: rgb(var(--opal-rgb));  /* #E07A6A - primary accent */
    --opal-120: #E25E5A;  /* #E25E5A — NOT part of the public 40-100 ramp; backs --color-accent-strong (button hover/emphasis). Also still used directly for the SplootPack red accent look on several pages. */
    --opal-hover: #C9604F;  /* darker coral hover — tokenizes the 23 hardcoded uses across pages (task 5) */
    --opal-button-hover: #F3968E;  /* was a lightened fill for the old darken/lighten hover model; now backs the ring + label color .btn--coral reveals when it hollows into an outline on hover (D-2026-07-06, a-button-demo lab) */
    --opal-outline-hover: var(--opal-100);  /* was a hardcoded pale wash (#FFE5E2) for the old tint-on-hover model — that value doesn't work as a SOLID fill (illegible under --color-button-text on top), so this now just mirrors --opal-100/--color-button directly, same pattern as .btn--teal-outline:hover reusing --color-midnight-eagle verbatim (D-2026-07-06, a-button-demo lab) */
    /* Mint - merged green + mint, from Figma's middle-mint (exact) */
    --mint-40: #EBF8F3;
    --mint-60: #D6F0E7;
    --mint-80: #ACE1D0;
    --mint-100: rgb(var(--mint-rgb));  /* #7FD1B9 */
    --mint-a25: rgb(var(--mint-rgb) / 0.25);  /* mint alpha .25 — named per the midnight-eagle -aNN convention. Added 2026-07-09: was previously a hardcoded rgb(var(--mint-rgb) / 0.25) inline on full-section-demo's promise pills, undocumented and distinct from --color-surface-soft's rgb(var(--mint-rgb) / 0.12). */
    /* Cream / Timberwolf - light-neutral canvas + surfaces. Resolves the old cream + paper into one ramp; /80 is Figma's timberwolf. */
    --cream-40: #FAF7F4;  /* paper - header, dropdowns, card insets */
    --cream-60: rgb(var(--cream-rgb));  /* #F2EAE4 - page canvas */
    --cream-80: #EBE0D7;  /* warm greige - timberwolf-theme muted band / deeper card. Reconciled 2026-07-17 to match Figma+Webflow timberwolf/200 (was #ECE4DB). */
    --cream-100: #E5D9CD;  /* deepest greige - deep insets, cream borders. Reconciled 2026-07-17 to match Figma+Webflow timberwolf/300 (was #E4D6CA). */
    --color-white: #FFFFFF;
    /* Companion ramp to --midnight-eagle-rgb: white-ink-on-dark alpha steps, same -aNN convention. Added 2026-07-09 — about-v2 uses this ramp (#ffffffd9/c7/b8/b3/8c/80/52 etc.) but no tokenized equivalent existed yet. */
    --white-rgb: 255 255 255;  /* #FFFFFF */
    --white-a90: rgb(var(--white-rgb) / 0.90);  /* white-ink alpha .90 — a-prefix marks alpha steps, not ramp steps */
    --white-a85: rgb(var(--white-rgb) / 0.85);  /* white-ink alpha .85 — a-prefix marks alpha steps, not ramp steps */
    --white-a75: rgb(var(--white-rgb) / 0.75);  /* white-ink alpha .75 — a-prefix marks alpha steps, not ramp steps */
    --white-a70: rgb(var(--white-rgb) / 0.70);  /* white-ink alpha .70 — a-prefix marks alpha steps, not ramp steps */
    --white-a65: rgb(var(--white-rgb) / 0.65);  /* white-ink alpha .65 — a-prefix marks alpha steps, not ramp steps */
    --white-a60: rgb(var(--white-rgb) / 0.60);  /* white-ink alpha .60 — a-prefix marks alpha steps, not ramp steps */
    --white-a55: rgb(var(--white-rgb) / 0.55);  /* white-ink alpha .55 — a-prefix marks alpha steps, not ramp steps */
    --white-a40: rgb(var(--white-rgb) / 0.40);  /* white-ink alpha .40 — a-prefix marks alpha steps, not ramp steps */
    --white-a15: rgb(var(--white-rgb) / 0.15);  /* white-ink alpha .15 — a-prefix marks alpha steps, not ramp steps */
    --white-a10: rgb(var(--white-rgb) / 0.10);  /* white-ink alpha .10 — a-prefix marks alpha steps, not ramp steps */
    --white-a08: rgb(var(--white-rgb) / 0.08);  /* white-ink alpha .08 — a-prefix marks alpha steps, not ramp steps */
    --white-a06: rgb(var(--white-rgb) / 0.06);  /* white-ink alpha .06 — a-prefix marks alpha steps, not ramp steps */
    --color-success: #10B981;  /* status green - checkmarks, "open now" pulse */
    --color-red-bright: #EF4953;  /* bright alert red - urgent/emergency accents */
    /* Base aliases - canonical single value per family (use these or the ramp steps) */
    --color-midnight-eagle: var(--midnight-eagle-100);
    --color-midnight-eagle-deep: var(--midnight-eagle-120);
    --color-opal: var(--opal-100);  /* primary accent (was "coral") */
    --color-opal-soft: var(--opal-60);  /* peach - accent text on dark midnight-eagle panels */
    --color-coral: var(--opal-100);  /* legacy alias - prefer --color-opal */
    --color-coral-soft: var(--opal-60);  /* legacy alias */
    --color-mint: var(--mint-40);  /* pale mint - icon tiles, soft sections */
    --color-green: var(--mint-100);  /* green merged into mint - eyebrow, positive */
    --color-fire-opal: var(--opal-120);  /* legacy alias - opal's high end */
    --color-cream: var(--cream-60);  /* page canvas */
    --color-paper: var(--cream-40);  /* lighter cream surfaces */
    /* Midnight-eagle alpha ramp — muted text, borders, hairlines. Uses the midnight-eagle channel so a palette mode re-tints the whole ramp. */
    --midnight-eagle-a90: rgb(var(--midnight-eagle-rgb) / 0.90);  /* midnight-eagle alpha .90 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-90: var(--midnight-eagle-a90);  /* deprecated alias of --midnight-eagle-a90 */
    --midnight-eagle-a85: rgb(var(--midnight-eagle-rgb) / 0.85);  /* midnight-eagle alpha .85 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-85: var(--midnight-eagle-a85);  /* deprecated alias of --midnight-eagle-a85 */
    --midnight-eagle-a75: rgb(var(--midnight-eagle-rgb) / 0.75);  /* midnight-eagle alpha .75 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-75: var(--midnight-eagle-a75);  /* deprecated alias of --midnight-eagle-a75 */
    --midnight-eagle-a70: rgb(var(--midnight-eagle-rgb) / 0.70);  /* midnight-eagle alpha .70 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-70: var(--midnight-eagle-a70);  /* deprecated alias of --midnight-eagle-a70 */
    --midnight-eagle-a65: rgb(var(--midnight-eagle-rgb) / 0.65);  /* midnight-eagle alpha .65 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-65: var(--midnight-eagle-a65);  /* deprecated alias of --midnight-eagle-a65 */
    --midnight-eagle-a60: rgb(var(--midnight-eagle-rgb) / 0.60);  /* midnight-eagle alpha .60 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-60: var(--midnight-eagle-a60);  /* deprecated alias of --midnight-eagle-a60 */
    --midnight-eagle-a55: rgb(var(--midnight-eagle-rgb) / 0.55);  /* midnight-eagle alpha .55 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-55: var(--midnight-eagle-a55);  /* deprecated alias of --midnight-eagle-a55 */
    --midnight-eagle-a40: rgb(var(--midnight-eagle-rgb) / 0.40);  /* midnight-eagle alpha .40 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-40: var(--midnight-eagle-a40);  /* deprecated alias of --midnight-eagle-a40 */
    --midnight-eagle-a15: rgb(var(--midnight-eagle-rgb) / 0.15);  /* midnight-eagle alpha .15 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-15: var(--midnight-eagle-a15);  /* deprecated alias of --midnight-eagle-a15 */
    --midnight-eagle-a10: rgb(var(--midnight-eagle-rgb) / 0.10);  /* midnight-eagle alpha .10 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-10: var(--midnight-eagle-a10);  /* deprecated alias of --midnight-eagle-a10 */
    --midnight-eagle-a08: rgb(var(--midnight-eagle-rgb) / 0.08);  /* midnight-eagle alpha .08 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-08: var(--midnight-eagle-a08);  /* deprecated alias of --midnight-eagle-a08 */
    --midnight-eagle-a06: rgb(var(--midnight-eagle-rgb) / 0.06);  /* midnight-eagle alpha .06 — a-prefix marks alpha steps, not ramp steps */
    --midnight-eagle-06: var(--midnight-eagle-a06);  /* deprecated alias of --midnight-eagle-a06 */

    /* ── Semantic color (use these in components) ───────────────────────────────── */
    --color-bg: var(--color-cream);
    --color-surface: var(--cream-40);  /* Card/panel surface. Was var(--color-white) — changed 2026-07-19 (Cooper: no pure white anywhere; 'even the surface card on white should be cream instead of pure white'). :root now IS the Cream theme: canvas cream-60 #F2EAE4, surface cream-40 #FAF7F4. */
    --color-surface-muted: var(--cream-80);  /* Recessed band/panel. Was var(--color-paper) (= cream-40), which collided with --color-surface once that also became cream-40 in the 2026-07-19 theme-ladder change. */
    --color-surface-raised: var(--cream-100);  /* raised/deeper card surface (Figma surface/raised) */
    --color-surface-accent-subtle: var(--opal-40);  /* subtle accent wash (Figma surface/accent-subtle) */
    --color-surface-soft: var(--color-mint);
    --color-surface-inverse: var(--color-midnight-eagle);
    --color-text: var(--midnight-eagle-120);  /* #164347 — Cooper 2026-07-19: '164347 should be text all across'. Was var(--color-midnight-eagle) (#1B4B4B); Figma and Webflow text/primary were already #164347, so the CSS moved to match rather than the other two. --color-midnight-eagle stays #1B4B4B for non-text uses (borders, icon tiles, fills). */
    --color-text-muted: var(--midnight-eagle-65);
    --color-text-subtle: var(--midnight-eagle-55);
    --color-text-inverse: var(--color-paper);
    --color-text-inverse-muted: rgb(250 247 244 / 0.7);  /* Muted copy ON an inverse surface. Was a hardcoded rgba() inside .s-card--featured .s-card__body with no [data-theme] override, so a Featured card in the midnight-eagle theme — where the inverse surface flips LIGHT — rendered light-on-light. */
    --color-accent: var(--color-opal);
    --color-eyebrow: var(--color-accent);  /* Section eyebrow label + its flanking rules (the rules use currentColor). Coral on light canvases; the midnight-eagle theme flips it MUTED WHITE rather than keeping coral, because a coral eyebrow on the dark band competes with the coral headline accent. Was a hardcoded rgb(255 255 255 / 0.6) inside .eyebrow-wf--dark with no token behind it. */
    --color-accent-strong: var(--opal-120);  /* #E25E5A — stronger/hover accent (Cooper 2026-07-06: opal-140/D6422A left the accent family entirely, repurposed as --color-splootpack; opal-120 takes over as the darker emphasis step) */
    --color-button: var(--opal-100);  /* #E07A6A — primary button fill (Cooper 2026-07-06: opal-100 is now the ramp terminus/darkest; was opal-120 #E25E5A) */
    --color-button-rgb: var(--opal-rgb);  /* channel form of --color-button for Tailwind /opacity (e.g. button hover /80) */
    --color-button-hover: var(--opal-button-hover);  /* ring + label color .btn--coral reveals when it hollows into an outline on hover (D-2026-07-06 hover model: solid buttons hover into an outline of themselves, outline buttons hover into a solid fill — see .btn--coral:hover / .btn--coral-outline:hover in sploot-components.css) */
    --color-button-text: var(--cream-60);  /* primary button label (Webflow button/primary-text = #F2EAE4) */
    --color-button-outline-hover: var(--opal-outline-hover);  /* solid fill .btn--coral-outline reveals on hover (D-2026-07-06 hover model) — resolves to --opal-100, same coral as the button's own resting fill */
    --color-button-secondary-bg: var(--midnight-eagle-120);  /* secondary (dark) button */
    --color-button-secondary-bg-hover: var(--midnight-eagle-110);
    --color-button-secondary-text: var(--cream-60);
    --color-button-outline-border: var(--opal-100);
    --color-button-outline-text: var(--opal-100);
    --color-button-ghost-text: var(--midnight-eagle-120);
    --color-button-ghost-bg-hover: #D6DDDE;  /* cool mist ghost hover — shipped Webflow value; no ramp home yet */
    --color-button-disabled-text: var(--granite-80);
    --color-button-disabled-border: var(--granite-60);
    --color-on-accent: var(--color-white);
    --color-border: var(--midnight-eagle-10);
    --color-border-strong: var(--midnight-eagle-15);
    --color-hairline: var(--midnight-eagle-08);
    --color-focus: var(--color-opal);
    --color-splootpack: var(--opal-120);  /* #E25E5A — the SplootPack promo accent. Was #D6422A/opal-140 until D14 (2026-07-11): Cooper retired #D6422A from the brand entirely; the accent now shares opal-120. Named --color-splootpack, NOT --color-alert (that collides with the pre-existing sploot-alert/--color-red-bright status system). */

    /* ── Typography ───────────────────────────────── */
    --font-heading: 'New Spirit', Georgia, serif;  /* display + headings (max weight 500) */
    --font-sans: 'Outfit', system-ui, sans-serif;  /* body + UI (300–700) */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;  /* heaviest weight New Spirit supports */
    --weight-semibold: 600;
    --weight-bold: 700;
    /* Size scale — rem at 16px base (px in comments) */
    --text-xs: 0.75rem;  /* 12 — captions, footer */
    --text-sm: 0.875rem;  /* 14 — small body, dense UI */
    --text-base: 1rem;  /* 16 */
    --text-md: 1.0625rem;  /* 17 — primary body copy */
    --text-lg: 1.125rem;  /* 18 */
    --text-xl: 1.25rem;  /* 20 — card titles */
    --text-2xl: 1.5rem;  /* 24 — H3 */
    --text-3xl: 1.875rem;  /* 30 */
    --text-4xl: 2rem;  /* 32 — H2 / stats */
    --text-5xl: 3rem;  /* 48 — Display 2 */
    --text-6xl: 3.75rem;  /* 60 — hero headline */
    --text-7xl: 4.5rem;  /* 72 — Display 1 */
    --leading-none: 1;
    --leading-tight: 1.1;  /* display + headings */
    --leading-snug: 1.2;  /* H3 */
    --leading-normal: 1.5;  /* small body */
    --leading-relaxed: 1.55;  /* body copy */
    --tracking-eyebrow: 0.18em;  /* coral eyebrow labels */
    --tracking-label: 0.14em;  /* uppercase mono labels */
    --tracking-wide: 0.12em;  /* nav headings */
    --tracking-tight: -0.01em;  /* h1/h2 tight tracking — VERIFY exact value vs Figma tracking at Phase 3 pre-flight */
    --tracking-cta: 0.02em;  /* cta tracking — VERIFY vs Figma tracking/cta at Phase 3 pre-flight */
    --tracking-subhead: 0.06em;  /* subhead tracking — VERIFY vs Figma tracking/subhead at Phase 3 pre-flight */
    --hero-h1-min: 32px;  /* clamp floor for the sanctioned .hero-h1 fluid exception */
    --hero-h1-max: 50px;  /* clamp ceiling for .hero-h1 */

    /* ── Spacing — 4px base ───────────────────────────────── */
    --space-0-5: 0.125rem;  /* 2px — parity step from Figma/Webflow */
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;  /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;  /* 16 */
    --space-5: 1.25rem;  /* 20 */
    --space-6: 1.5rem;  /* 24 */
    --space-7: 1.75rem;  /* 28 — default card padding */
    --space-8: 2rem;  /* 32 — large card / demo padding */
    --space-10: 2.5rem;  /* 40 — desktop gutter */
    --space-12: 3rem;  /* 48 */
    --space-14: 3.5rem;  /* 56 — section padding (top) */
    --space-16: 4rem;  /* 64 — section padding (bottom) */
    --space-20: 5rem;  /* 80 */
    --space-24: 6rem;  /* 96 */
    --space-32: 8rem;  /* 128px — parity step from Figma/Webflow */

    /* ── Radius ───────────────────────────────── */
    --radius-none: 0;  /* adopted from Figma (Phase 1.4) */
    --radius-xs: 6px;  /* adopted from Figma (Phase 1.4) */
    --radius-sm: 8px;
    --radius-md: 12px;  /* dropdowns, store badges, small tiles */
    --radius-lg: 14px;  /* swatches, list rows */
    --radius-xl: 18px;  /* standard cards, panels */
    --radius-2xl: 24px;  /* page cards, promo bands */
    --radius-3xl: 28px;  /* large feature panels */
    --radius-phone: 32px;  /* phone mockup bezel */
    --radius-pill: 9999px;  /* buttons, chips, avatars */

    /* ── Elevation ───────────────────────────────── */
    --shadow-sm: 0 4px 12px rgba(22, 67, 71, 0.06);
    --shadow-card-hover: 0 16px 36px -16px rgba(27, 75, 75, 0.18);
    --shadow-lift: 0 20px 50px -20px rgba(27, 75, 75, 0.18);
    --shadow-feature: 0 30px 60px -25px rgba(27, 75, 75, 0.22);
    --shadow-dropdown: 0 20px 50px rgba(27, 75, 75, 0.12), 0 0 0 1px rgba(27, 75, 75, 0.06);
    --shadow-phone: 0 24px 50px -22px rgba(27, 75, 75, 0.40);

    /* ── Motion ───────────────────────────────── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* signature reveal/lift curve */
    --ease-standard: ease;
    --ease-button: cubic-bezier(0.6, -0.28, 0.735, 0.045);  /* Sploot button hover curve — the easeInBack the Webflow a-button uses on its fill transition */
    --duration-fast: 0.2s;  /* hovers, color shifts */
    --duration-base: 0.3s;  /* card lifts */
    --duration-slow: 0.4s;  /* page-card transition */
    --duration-reveal: 0.7s;  /* reveal-on-scroll */
    --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    --transition-button: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);  /* button hover motion. Was the Webflow-faithful mix (color 0.4s ease, fill/border 0.2s easeInBack) — retired 2026-07-06 (Cooper: 'hover in/out looks buggy'): easeInBack dips negative so colors extrapolate past their start value then snap, and the 0.4s text vs 0.2s fill mismatch flashed illegible half-states. All three color channels now share one fast standard ease; --ease-button stays for transform-only motion. */

    /* ── Layout (responsive per D5 — stack-gap-*, grid-gap-* pending Phase 3 pre-flight values) ───────────────────────────────── */
    /* content max-width — Figma Breakpoints max-width matrix (was flat 80rem; 1280px desktop unchanged) */
    --container-max: 1280px;
    /* Content-width ladder (flat, NOT responsive — below ~1200 the section gutter governs; the full-width tier is --container-max above). Blocks inside a section are centred, so an unnamed max-width is a left edge the eye tracks down the page: spay-neuter had 7 of them (840/900/1000/1080/1100/1200/1280), incl. an 1100-vs-1080 pair too close to read as intentional. Column count is NOT the rule — .pack-card is 2-up at 1200, .concerns-grid is 3-up at 920. */
    --content-xwide: 1200px;  /* escape hatch for a block dense enough to outgrow --content-wide (.pack-card, 4-up .s-steps / .inc-grid / .markets-grid) — opt in per block and say why */
    --content-wide: 1080px;  /* DEFAULT for section-body blocks — grids, split callouts, panels */
    --content-panel: 900px;  /* one focused card (pricing widget, add-ons panel) */
    --content-text: 760px;  /* centred section heads and prose */
    /* page gutter — Figma/Webflow matrix per D5 (was flat 1.5rem; zero consumers before this change) */
    --gutter: 4rem;
    --gutter-lg: 2.5rem;  /* deprecated — legacy wide gutter (a-button-demo); use --gutter */
    /* vertical section rhythm — Figma/Webflow section-y per D5 */
    --section-y: 8rem;
    /* compact section rhythm — Figma/Webflow section-y-sm */
    --section-y-sm: 6rem;
    --section-pad-y: var(--section-y);  /* deprecated alias of --section-y (was 3.5rem; zero consumers at rename) */
    /* min column width for split layouts — Figma split-col-min */
    --split-col-min: 400px;

    /* ── Color primitives — extended (badge + status raws) ───────────────────────────────── */
    --granite-slate-rgb: 100 116 113;  /* slate-grey channels (pre-D4 granite) */
    --granite-slate-40: #EAEDEC;  /* slate tint (pre-D4 granite-40) */
    --granite-slate-100: rgb(var(--granite-slate-rgb));  /* #647471 slate base (pre-D4 granite-100) */
    --granite-slate-140: #3C4745;  /* deep slate (pre-D4 granite-140) */
    --granite-rgb: 107 98 91;  /* #6B625B warm granite-grey channels — adopted from Figma/Webflow per D4 */
    --granite-40: #E5E3E2;  /* warm granite tint (Figma/Webflow granite-grey-40) */
    --granite-60: #CBC8C5;  /* Figma/Webflow granite-grey-60 */
    --granite-80: #9A938E;  /* Figma/Webflow granite-grey-80 */
    --granite-100: rgb(var(--granite-rgb));  /* #6B625B warm granite base — the value pages already hardcode (D4) */
    --granite-140: var(--granite-slate-140);  /* deprecated — warm family has no 140; slate deep preserved as granite-slate-140 */
    --mauve-soft-40: #F1E8ED;  /* soft-mauve tint (pre-D4 mauve-40) */
    --mauve-soft-100: #9B7C8B;  /* soft-mauve base (pre-D4 mauve-100) */
    --mauve-soft-140: #6B4F5C;  /* deep soft-mauve (pre-D4 mauve-140) */
    --mauve-40: #E4D6D8;  /* old-mauve tint — adopted from Figma/Webflow per D4 */
    --mauve-60: #C9AEB3;  /* Figma/Webflow old-mauve-60 */
    --mauve-80: #93636D;  /* Figma/Webflow old-mauve-80 */
    --mauve-100: #5B1B2E;  /* old-mauve base — adopted from Figma/Webflow per D4 */
    --mauve-140: var(--mauve-soft-140);  /* deprecated — warm family has no 140; soft deep preserved as mauve-soft-140 */
    --amber-40: #FBEFD9;
    --amber-100: #E0913A;  /* status warning base */
    --info-40: #E1EFF3;
    --info-100: #3E7E99;  /* status info base */

    /* ── Semantic — input (form fields) ───────────────────────────────── */
    --input-bg: var(--color-white);
    --input-border: var(--color-border-strong);  /* default field border */
    --input-border-focused: var(--color-accent);
    --input-border-error: var(--color-red-bright);
    --input-border-disabled: var(--color-hairline);
    --input-text: var(--color-text);
    --input-placeholder: var(--midnight-eagle-60);
    --input-label: var(--color-text);
    --input-helper: var(--color-text-subtle);
    --input-error-text: var(--color-red-bright);

    /* ── Semantic — badge (5 tones) ───────────────────────────────── */
    --badge-mint-bg: var(--mint-40);
    --badge-mint-text: var(--color-midnight-eagle);
    --badge-opal-bg: var(--opal-40);  /* opal badge bg (was badge-coral-bg) */
    --badge-coral-bg: var(--badge-opal-bg);  /* deprecated alias of --badge-opal-bg */
    --badge-opal-text: #B5371F;  /* #B5371F deep text-red — lives here as a semantic one-off (used nowhere else); decided task 5 */
    --badge-coral-text: var(--badge-opal-text);  /* deprecated alias of --badge-opal-text */
    --badge-slate-bg: var(--granite-slate-40);
    --badge-slate-text: var(--granite-slate-140);
    --badge-neutral-bg: var(--cream-100);
    --badge-neutral-text: var(--color-midnight-eagle);
    --badge-mauve-bg: var(--mauve-soft-40);
    --badge-mauve-text: var(--mauve-soft-140);

    /* ── Semantic — status ───────────────────────────────── */
    --status-success: var(--color-success);  /* #10B981 */
    --status-warning: var(--amber-100);
    --status-error: var(--color-red-bright);  /* #EF4953 */
    --status-info: var(--info-100);

    /* ── Semantic — link ───────────────────────────────── */
    --link-default: var(--color-accent);
    --link-hover: var(--color-accent-strong);
    --link-visited: var(--opal-120);

    /* ── Semantic — surface / border ───────────────────────────────── */
    --surface-card: var(--color-surface);
    --surface-card-border: var(--color-border);
    --surface-overlay: rgb(var(--midnight-eagle-rgb) / 0.55);  /* modal scrim */
    --border-default: var(--color-border);
    --border-strong: var(--color-border-strong);
    --border-inverse: rgb(255 255 255 / 0.18);  /* borders on dark surfaces */

    /* ── Text styles — role composites (per-breakpoint, seeded from the agreed Figma/Webflow matrix per D5) ───────────────────────────────── */
    /* h1/hero — Figma heading-style/h1 (size/display), Webflow heading-style-h1 */
    --role-display-family: var(--font-heading);
    --role-display-weight: var(--weight-medium);
    --role-display-tracking: var(--tracking-tight);
    --role-display-size: 60px;
    --role-display-lh: 72px;
    /* Figma/Webflow heading-style-h2 */
    --role-h2-family: var(--font-heading);
    --role-h2-weight: var(--weight-medium);
    --role-h2-tracking: var(--tracking-tight);
    --role-h2-size: 40px;
    --role-h2-lh: 48px;
    --role-h3-family: var(--font-heading);
    --role-h3-weight: var(--weight-medium);
    --role-h3-size: 36px;
    --role-h3-lh: 43px;
    --role-h4-family: var(--font-heading);
    --role-h4-weight: var(--weight-medium);
    --role-h4-size: 28px;
    --role-h4-lh: 34px;
    --role-h5-family: var(--font-heading);
    --role-h5-weight: var(--weight-medium);
    --role-h5-size: 20px;
    --role-h5-lh: 24px;
    --role-h6-family: var(--font-heading);
    --role-h6-weight: var(--weight-medium);
    --role-h6-size: 16px;
    --role-h6-lh: 19px;
    /* Figma text-size/large */
    --role-text-large-family: var(--font-sans);
    --role-text-large-weight: var(--weight-regular);
    --role-text-large-size: 24px;
    --role-text-large-lh: 36px;
    /* uppercase section eyebrows (.eyebrow-wf); lh VERIFY at Phase 3 pre-flight */
    --role-eyebrow-family: var(--font-sans);
    --role-eyebrow-weight: var(--weight-medium);
    --role-eyebrow-tracking: var(--tracking-eyebrow);
    --role-eyebrow-size: 12px;
    --role-eyebrow-lh: 18px;
    --role-body-xl-family: var(--font-sans);
    --role-body-xl-weight: var(--weight-regular);
    --role-body-xl-size: 20px;
    --role-body-xl-lh: 30px;
    --role-body-lg-family: var(--font-sans);
    --role-body-lg-weight: var(--weight-regular);
    --role-body-lg-size: 18px;
    --role-body-lg-lh: 27px;
    /* primary body — 16px per D5 (was 17px --text-md; primitives keep 17 for legacy) */
    --role-body-family: var(--font-sans);
    --role-body-weight: var(--weight-regular);
    --role-body-size: 16px;
    --role-body-lh: 24px;
    --role-body-sm-family: var(--font-sans);
    --role-body-sm-weight: var(--weight-regular);
    --role-body-sm-size: 14px;
    --role-body-sm-lh: 21px;
    /* lh VERIFY at Phase 3 pre-flight */
    --role-caption-family: var(--font-sans);
    --role-caption-weight: var(--weight-regular);
    --role-caption-size: 12px;
    --role-caption-lh: 18px;
    /* button/CTA label — lh VERIFY at Phase 3 pre-flight */
    --role-cta-family: var(--font-sans);
    --role-cta-weight: var(--weight-bold);
    --role-cta-tracking: var(--tracking-cta);
    --role-cta-size: 18px;
    --role-cta-lh: 27px;
    --role-subhead-family: var(--font-sans);
    --role-subhead-weight: var(--weight-medium);
    --role-subhead-tracking: var(--tracking-subhead);
    --role-subhead-size: 18px;
    --role-subhead-lh: 27px;
}

/* ── tablet ── */
@media (max-width: 991px) {
    :root {
        --container-max: 720px;
        --gutter: 3rem;
        --section-y: 6rem;
        --section-y-sm: 5rem;
        --split-col-min: 300px;
        --role-display-size: 48px;
        --role-display-lh: 58px;
        --role-h2-size: 32px;
        --role-h2-lh: 38px;
        --role-h3-size: 28px;
        --role-h3-lh: 34px;
        --role-h4-size: 24px;
        --role-h4-lh: 29px;
        --role-h5-size: 18px;
        --role-h5-lh: 22px;
        --role-text-large-size: 20px;
        --role-text-large-lh: 30px;
        --role-body-xl-size: 18px;
        --role-body-xl-lh: 27px;
        --role-body-lg-size: 16px;
        --role-body-lg-lh: 24px;
        --role-body-sm-size: 13px;
        --role-body-sm-lh: 20px;
        --role-cta-size: 16px;
        --role-cta-lh: 24px;
        --role-subhead-size: 16px;
        --role-subhead-lh: 24px;
    }
}

/* ── mobile-landscape ── */
@media (max-width: 767px) {
    :root {
        --container-max: 440px;
        --gutter: 2rem;
        --section-y: 5rem;
        --section-y-sm: 4rem;
        --split-col-min: 260px;
        --role-display-size: 36px;
        --role-display-lh: 43px;
        --role-h2-size: 28px;
        --role-h2-lh: 34px;
        --role-h3-size: 22px;
        --role-h3-lh: 26px;
        --role-h4-size: 20px;
        --role-h4-lh: 24px;
        --role-h5-size: 16px;
        --role-h5-lh: 19px;
        --role-h6-size: 14px;
        --role-h6-lh: 17px;
        --role-text-large-size: 18px;
        --role-text-large-lh: 27px;
        --role-eyebrow-size: 11px;
        --role-eyebrow-lh: 17px;
        --role-body-xl-size: 16px;
        --role-body-xl-lh: 24px;
        --role-body-lg-size: 16px;
        --role-body-lg-lh: 24px;
        --role-body-size: 14px;
        --role-body-lh: 21px;
        --role-body-sm-size: 13px;
        --role-body-sm-lh: 20px;
        --role-caption-size: 11px;
        --role-caption-lh: 17px;
        --role-cta-size: 16px;
        --role-cta-lh: 24px;
        --role-subhead-size: 16px;
        --role-subhead-lh: 24px;
    }
}

/* ── mobile-portrait ── */
@media (max-width: 479px) {
    :root {
        --container-max: 335px;
        --gutter: 1.5rem;
        --section-y: 4rem;
        --section-y-sm: 3rem;
        --split-col-min: 200px;
        --role-display-size: 36px;
        --role-display-lh: 43px;
        --role-h2-size: 28px;
        --role-h2-lh: 34px;
        --role-h3-size: 22px;
        --role-h3-lh: 26px;
        --role-h4-size: 20px;
        --role-h4-lh: 24px;
        --role-h5-size: 16px;
        --role-h5-lh: 19px;
        --role-h6-size: 14px;
        --role-h6-lh: 17px;
        --role-text-large-size: 18px;
        --role-text-large-lh: 27px;
        --role-eyebrow-size: 11px;
        --role-eyebrow-lh: 17px;
        --role-body-xl-size: 16px;
        --role-body-xl-lh: 24px;
        --role-body-lg-size: 16px;
        --role-body-lg-lh: 24px;
        --role-body-size: 14px;
        --role-body-lh: 21px;
        --role-body-sm-size: 13px;
        --role-body-sm-lh: 20px;
        --role-caption-size: 11px;
        --role-caption-lh: 17px;
        --role-cta-size: 16px;
        --role-cta-lh: 24px;
        --role-subhead-size: 16px;
        --role-subhead-lh: 24px;
    }
}

[data-theme="white"] {
    --color-bg: var(--cream-40);
    --color-surface: var(--cream-60);
    --color-surface-muted: var(--cream-80);
    --color-surface-raised: var(--cream-100);
}

[data-theme="timberwolf"] {
    --color-bg: var(--cream-80);
    --color-surface: var(--cream-60);
    --color-surface-muted: var(--cream-100);
    --color-surface-raised: var(--cream-100);
}

[data-theme="timberwolf-dark"] {
    --color-bg: var(--cream-100);
    --color-surface: var(--cream-80);
    --color-surface-muted: var(--cream-100);
    --color-surface-raised: var(--cream-100);
}

[data-theme="midnight-eagle"] {
    --color-bg: var(--midnight-eagle-120);
    --color-surface: var(--color-midnight-eagle);
    --color-surface-muted: var(--midnight-eagle-140);
    --color-surface-soft: rgb(var(--mint-rgb) / 0.12);
    --color-surface-inverse: var(--cream-40);
    --color-text: var(--cream-40);
    --color-text-muted: rgb(255 255 255 / 0.72);
    --color-text-subtle: rgb(255 255 255 / 0.55);
    --color-text-inverse: var(--color-midnight-eagle);
    --color-text-inverse-muted: var(--midnight-eagle-65);
    --color-accent: var(--color-opal);
    --color-eyebrow: rgb(255 255 255 / 0.6);
    --color-on-accent: var(--color-white);
    --color-border: rgb(255 255 255 / 0.14);
    --color-border-strong: rgb(255 255 255 / 0.22);
    --color-hairline: rgb(255 255 255 / 0.08);
    --link-default: var(--color-opal-soft);
    --link-hover: var(--color-white);
    --input-bg: rgb(255 255 255 / 0.06);
    --input-text: var(--cream-40);
    --surface-card: var(--color-midnight-eagle);
    --border-default: rgb(255 255 255 / 0.14);
    --color-surface-raised: var(--midnight-eagle-110);
    --color-surface-accent-subtle: rgb(var(--opal-rgb) / 0.15);
    --color-button: var(--mint-100);
    --color-button-rgb: var(--mint-rgb);
    --color-button-hover: var(--mint-80);
    --color-button-text: var(--midnight-eagle-120);
    --color-button-outline-hover: var(--mint-40);
    --color-button-secondary-bg: var(--cream-60);
    --color-button-secondary-bg-hover: var(--granite-40);
    --color-button-secondary-text: var(--midnight-eagle-120);
    --color-button-outline-border: var(--mint-100);
    --color-button-outline-text: var(--mint-100);
    --color-button-ghost-text: var(--cream-60);
    --color-button-ghost-bg-hover: var(--midnight-eagle-110);
    --color-button-disabled-text: #AEBCBD;
    --color-button-disabled-border: #627D80;
}

[data-theme="mint"] {
    --color-bg: var(--mint-40);
    --color-surface: var(--cream-40);
    --color-surface-muted: var(--mint-60);
    --color-surface-soft: var(--cream-40);
    --color-surface-raised: var(--mint-60);
    --color-button: var(--mint-100);
    --color-button-rgb: var(--mint-rgb);
    --color-button-hover: var(--mint-80);
    --color-button-text: var(--midnight-eagle-120);
    --color-button-outline-hover: var(--mint-40);
    --color-button-secondary-bg: var(--midnight-eagle-120);
    --color-button-secondary-bg-hover: var(--midnight-eagle-110);
    --color-button-secondary-text: var(--cream-60);
    --color-button-outline-border: var(--mint-100);
    --color-button-outline-text: var(--mint-100);
    --color-button-ghost-bg-hover: var(--mint-40);
    --color-button-disabled-border: var(--mint-60);
}