/* ============================================================
   COFACTOR SUPPLY — design tokens

   GENERATED by scripts/build-tokens.mjs from brands/cofactor/tokens/*.tokens.json
   DO NOT EDIT. Change the JSON and rebuild.

   Tier 1 --p-*  raw values, the reskin surface
   Tier 2 --*    the roles components consume
   ============================================================ */

:root {
  --p-font-sans: 'General Sans', 'Helvetica Neue', Arial, sans-serif;  /* The voice — everything that RUNS a view: body, UI, controls, nav. No longer any heading */
  --p-font-display: Raleway, 'Helvetica Neue', Arial, sans-serif;  /* The display — every heading at every step, display-* through title-sm. Variable on wght, cut 400–700; the italic is pinned 400 and is the wit (one line per view) */
  --p-font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;  /* The evidence — every number that makes a claim. wdth 87.5 baked in. Deadpan; no joke is ever set in mono */
  --p-brand-100: #DEEBFA;  /* clamped to blue-100 — no invented step */
  --p-brand-200: #A9CDF2;
  --p-brand-300: #7AABE9;
  --p-brand-400: #4483E0;
  --p-brand-500: #0B55CE;  /* CUPRIC — the brand */
  --p-brand-600: #043FA2;
  --p-brand-700: #042E79;
  --p-brand-800: #052054;
  --p-brand-900: #091731;
  --p-neutral-white: #FFFFFF;  /* white — page ground */
  --p-neutral-cream: #F5EFE3;  /* law neutral-100 — cream, used as a SURFACE only */
  --p-neutral-stone: #D1CABB;  /* law neutral-300 — border */
  --p-neutral-ash: #B4ADA0;  /* law neutral-400 */
  --p-neutral-fog: #928D83;  /* law neutral-500 */
  --p-neutral-slate: #6F6B63;  /* law neutral-600 — border-strong */
  --p-neutral-graphite: #4E4B46;  /* law neutral-700 — text-muted */
  --p-neutral-charcoal: #2A2B2D;  /* law neutral-800 */
  --p-neutral-night: #181C25;  /* law dark-surface */
  --p-neutral-ink: #10131A;  /* ink #10131A — text */
  --p-neutral-edge: #292E38;  /* dark-appearance border — one step off night */
  --p-tint: #F0F6FD;  /* faintest wash band */
  --p-line: #ECF3FC;  /* hairlines: cards, rules, dividers */
  --p-line-strong: #D1E4F8;  /* input + control edges */
  --p-line-hover: #BFD7F4;  /* hover edge */
  --p-green-400: #DFF3E5;
  --p-green-600: #2A6549;
  --p-amber-400: #FAECD7;
  --p-amber-600: #7D4D05;
  --p-red-400: #FDE7E3;
  --p-red-500: #913327;
  --p-red-600: #7A2B21;
  --p-ink-200: #DDE0E3;  /* chart grid, tracks — structural, not text */
  --p-ink-400: #858D9B;  /* struck prices, off-states (large/non-text only) */
  --p-ink-500: #6D7687;  /* faintest meta still passing AA */
  --p-ink-600: #616B7D;  /* mono labels, captions · replaces neutral-600 */
  --p-ink-800: #3F4C61;  /* body muted · replaces neutral-700 */
  --p-space-0: 0;
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;  /* the commonest step in this codebase — 17 uses */
  --p-space-4: 1rem;  /* the default gutter */
  --p-space-5: 1.25rem;
  --p-space-6: 1.5rem;
  --p-space-7: 1.75rem;  /* 28px — 16 uses */
  --p-space-8: 2rem;  /* band padding */
  --p-space-9: 2.25rem;
  --p-space-10: 2.5rem;
  --p-space-11: 2.75rem;  /* the WCAG 44px touch floor — control heights key off this */
  --p-space-12: 3rem;
  --p-space-14: 3.5rem;  /* 56px */
  --p-space-16: 4rem;
  --p-space-18: 4.5rem;
  --p-space-20: 5rem;
  --p-space-24: 6rem;  /* section rhythm, mobile */
  --p-space-32: 8rem;  /* section rhythm, desktop */
  --p-space-0-5: 0.125rem;  /* 2px — hairline insets, pip offsets */
  --p-space-1-5: 0.375rem;  /* 6px — the tight step, 26 uses */
  --p-space-2-5: 0.625rem;
  --p-space-3-5: 0.875rem;  /* 14px — 34 uses */
  --p-space-4-5: 1.125rem;  /* 18px */
  --p-space-px: 1px;  /* hairline offsets only */
  --p-text-10: 0.625rem;
  --p-text-11: 0.6875rem;
  --p-text-12: 0.75rem;
  --p-text-13: 0.8125rem;  /* mono labels, captions — 42 uses, the densest step */
  --p-text-14: 0.875rem;
  --p-text-15: 0.9375rem;
  --p-text-16: 1rem;  /* body floor — never smaller for prose */
  --p-text-17: 1.0625rem;  /* 17px — the body-lg step */
  --p-text-18: 1.125rem;
  --p-text-20: 1.25rem;
  --p-text-22: 1.375rem;  /* 22px */
  --p-text-24: 1.5rem;
  --p-text-28: 1.75rem;
  --p-text-30: 1.875rem;  /* 30px */
  --p-text-36: 2.25rem;
  --p-text-48: 3rem;
  --p-text-61: 3.815rem;  /* 61px — the `display` step. --font-display only (Raleway since PR #17), never the sans */
  --p-text-76: 4.768rem;  /* 76px — `display-xl`, the top of the scale. Page heroes only; the scale stopped at 48 before this */
  --p-tracking-0: 0;
  --p-tracking-4: 0.04em;
  --p-tracking-6: 0.06em;  /* chip-cat */
  --p-tracking-8: 0.08em;  /* mono-label */
  --p-tracking-10: 0.10em;
  --p-tracking-12: 0.12em;  /* eyebrow — the widest the law allows */
  --p-tracking-14: 0.14em;  /* the widest label tracking in use */
  --p-tracking-n30: -0.03em;
  --p-tracking-n25: -0.025em;  /* display-md / title-2xl */
  --p-tracking-n20: -0.02em;  /* Every display step, plus title-xl. Was -0.04em (n40) until the display face became a serif; kept at n20 through the 2026-08-21 swap to Raleway, which has no optical-size axis and so relies on these rungs to stop a hero reading as a scaled-up product name. n40 had no other consumer and was deleted. */
  --p-tracking-n14: -0.014em;  /* title-md */
  --p-tracking-n10: -0.01em;  /* title-sm */
  --p-leading-100: 1;  /* display-xl */
  --p-leading-110: 1.1;
  --p-leading-130: 1.3;
  --p-leading-150: 1.5;
  --p-leading-160: 1.6;  /* body-base — the reading default */
  --p-radius-2: 2px;  /* pips, ticks — deliberately not scaled */
  --p-radius-3: 3px;
  --p-radius-4: 4px;
  --p-radius-5: 5px;
  --p-radius-6: 6px;
  --p-radius-sm: 8px;
  --p-radius-md: 16px;
  --p-radius-lg: 16px;
  --p-radius-xl: 16px;
  --p-radius-2xl: 16px;
  --p-radius-base: 16px;  /* THE personality knob — 6px reads spec-panel, 16px reads consumer */
  --p-radius-pill: 999px;
  --p-radius-circle: 100%;
  --p-radius-panel: 24px;  /* LARGE surfaces only — a console, a full-width panel, a modal. The 16px family is drawn for a card; on a 1200px panel the same 16px reads as a rectangle that someone forgot to round. Scales WITH the personality knob: a 6px spec-panel brand would set this to 10px, not keep 24. */
  --p-duration-0: 0ms;
  --p-duration-fast: 150ms;  /* press feedback, colour changes — the house default */
  --p-duration-base: 200ms;  /* shadow, elevation */
  --p-duration-slow: 320ms;  /* drawers, overlays */
  --p-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);  /* the house curve */
  --p-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --p-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --p-ease-out-back: cubic-bezier(0.34, 1.3, 0.64, 1);
  --p-measure-axis: 80rem;  /* the page axis max-width */
  --p-measure-prose: 42rem;  /* reading measure — ~66ch */
  --p-measure-content: 48rem;
  --p-z-header: 200;
  --p-z-drawer: 300;
  --p-z-overlay: 400;
  --p-z-toast: 500;
}

/* ---------- Tier 2 · appearance-independent ---------- */
:root {
  --font-sans: var(--p-font-sans);  /* The voice — everything that RUNS a view: body, UI, controls, nav. Not headings */
  --font-display: var(--p-font-display);  /* The display — EVERY heading: the four display-* steps and the whole title-* ladder down to title-sm. Roman at 600; the italic is the wit, max one line per view */
  --font-mono: var(--p-font-mono);  /* The evidence — every number that makes a claim. Deadpan: no joke is ever set in mono */
  --space-gutter: var(--p-space-4);  /* Default inline padding inside a card or panel */
  --space-gutter-lg: var(--p-space-6);  /* Roomier panels — PDP buy rail, checkout blocks */
  --space-stack: var(--p-space-3);  /* Vertical rhythm between related lines */
  --space-stack-lg: var(--p-space-5);  /* Between grouped blocks */
  --space-inline: var(--p-space-2);  /* Between an icon and its label */
  --space-section: var(--p-space-24);  /* Band rhythm, mobile */
  --space-section-lg: var(--p-space-32);  /* Band rhythm, desktop */
  --space-axis: var(--p-space-4);  /* Page axis inline padding, mobile */
  --space-axis-lg: var(--p-space-6);  /* Page axis inline padding, desktop */
  --space-grid: var(--p-space-4);  /* Product / card grid gap */
  --radius-control: var(--p-radius-sm);  /* Inputs, selects, small controls */
  --radius-button: var(--p-radius-pill);  /* This brand's buttons are pills — a vertical may set this square */
  --radius-card: var(--p-radius-md);  /* Cards, panels, media wells */
  --radius-panel: var(--p-radius-panel);  /* Consoles, full-width panels, modals. Nest with calc(var(--radius-panel) - <the padding>) so the curves stay concentric. */
  --radius-chip: var(--p-radius-pill);  /* Chips, badges, counts */
  --control-height: var(--p-space-11);  /* 44px — the WCAG touch floor. Every input and default button. */
  --control-height-sm: var(--p-space-9);  /* 36px — desktop-dense contexts ONLY, never a primary CTA */
  --text-body: var(--p-text-16);  /* Prose floor — never smaller for reading copy */
  --text-body-sm: var(--p-text-15);
  --text-caption: var(--p-text-13);
  --text-label: var(--p-text-11);  /* Mono uppercase labels */
  --text-code: 0.9em;  /* Inline code inside prose. RELATIVE on purpose — it must track whatever size its parent is set at, so it cannot be a step on the absolute ladder. */
  --leading-body: var(--p-leading-160);
  --leading-tight: var(--p-leading-110);
  --tracking-label: var(--p-tracking-6);  /* EVERY uppercase mono label — eyebrows and micro-labels alike. One rung, not two: 0.12em/0.08em were drawn against narrow Fragment Mono, and against wide Martian Mono 0.06em is inside the readable band at both 11px and 12px. */
  --tracking-heading: var(--p-tracking-n10);  /* Headings track TIGHT. --tracking-label (0.06em) is the opposite — it is for uppercase mono labels, and theme.json was handing it to every h1–h6 because it was the nearest-named token. */
  --motion-press: var(--p-duration-fast);  /* Press/active feedback — 150ms, scale 0.98 */
  --motion-enter: var(--p-duration-base);
  --motion-exit: var(--p-duration-fast);  /* Exits are faster than entrances — a leaving thing should not detain you */
  --motion-drawer: var(--p-duration-slow);
  --ease-default: var(--p-ease-out-quart);
  --ease-overlay: var(--p-ease-drawer);
  --axis-max: var(--p-measure-axis);
  --prose-max: var(--p-measure-prose);
  --content-max: var(--p-measure-content);  /* Block-editor default content width — NOT the reading measure */
  --ramp-1: var(--p-brand-100);  /* The dilution ramp, step 1 of 9. Law §8 makes the ramp this brand's ONLY decorative device, so its steps are a named role and not a reach into the raw palette. Appearance-INDEPENDENT on purpose: the ramp is a printed merchandising system — the same nine steps sit on the shelf in any light — so it must not re-map under a dark appearance the way a surface does. */
  --ramp-2: var(--p-brand-200);  /* The dilution ramp, step 2 of 9. */
  --ramp-3: var(--p-brand-300);  /* The dilution ramp, step 3 of 9. */
  --ramp-4: var(--p-brand-400);  /* The dilution ramp, step 4 of 9. */
  --ramp-5: var(--p-brand-500);  /* The dilution ramp, step 5 of 9. */
  --ramp-6: var(--p-brand-600);  /* The dilution ramp, step 6 of 9. */
  --ramp-7: var(--p-brand-700);  /* The dilution ramp, step 7 of 9. */
  --ramp-8: var(--p-brand-800);  /* The dilution ramp, step 8 of 9. */
  --ramp-9: var(--p-brand-900);  /* The dilution ramp, step 9 of 9. */
}

/* ---------- Tier 2 · light ---------- */
:root {
  --background: var(--p-neutral-white);  /* white clinical ground (founder decision 2026-08-19, replacing cream) */
  --foreground: var(--p-neutral-ink);  /* ink */
  --card: var(--p-neutral-white);  /* white; definition comes from line + shadow */
  --card-foreground: var(--p-neutral-ink);
  --popover: var(--p-neutral-white);
  --popover-foreground: var(--p-neutral-ink);
  --primary: var(--p-brand-500);  /* cupric */
  --primary-foreground: var(--p-neutral-white);  /* cream label on cupric */
  --secondary: var(--p-tint);
  --secondary-foreground: var(--p-neutral-charcoal);
  --muted: var(--p-tint);
  --muted-foreground: var(--p-ink-800);  /* cool slate, contrast-matched to law neutral-700 */
  --accent: var(--p-tint);  /* hover surface */
  --accent-foreground: var(--p-neutral-charcoal);
  --destructive: var(--p-red-500);
  --success: var(--p-green-600);
  --warning: var(--p-amber-600);
  --ink-2: var(--p-ink-800);
  --ink-3: var(--p-ink-600);  /* contrast-matched to law neutral-600 */
  --ink-4: var(--p-ink-500);
  --surface: var(--p-neutral-white);  /* white */
  --surface-2: var(--p-tint);  /* faint blue wash for section bands */
  --control: var(--p-neutral-white);
  --surface-ink: var(--p-brand-800);  /* deep-blue stage, not black */
  --ink-band: var(--p-brand-900);  /* deep-blue stage, not black */
  --border: var(--p-line);  /* blue-derived hairline, not the cream tan */
  --border-strong: var(--p-line-strong);
  --input: var(--p-line-strong);
  --ring: var(--p-brand-500);
  --brand: var(--p-brand-500);
  --brand-foreground: var(--p-neutral-white);
  --brand-hover: var(--p-brand-600);
  --brand-muted: var(--p-brand-100);  /* surface-tint = blue-100 */
  --brand-cyan: var(--p-brand-400);  /* neutralised → ramp */
  --brand-teal: var(--p-brand-600);  /* neutralised → ramp */
  --price-regular: var(--p-neutral-ink);
  --price-sale: var(--p-brand-600);
  --price-compare: var(--p-ink-400);
  --stock-in: var(--p-green-600);
  --stock-low: var(--p-amber-600);
  --stock-out: var(--p-ink-500);
  --rating-filled: var(--p-neutral-ink);
  --savings: var(--p-brand-600);
  --urgency: var(--p-amber-600);
  --trust: var(--p-brand-500);  /* was teal — banned hue */
  --elevation-key: 0 1px 2px color-mix(in oklab, var(--p-brand-500) 6%, transparent);
  --elevation-whisper: 0 1px 2px color-mix(in oklab, var(--p-brand-500) 5%, transparent);
  --elevation-card: 0 1px 2px color-mix(in oklab, var(--p-brand-500) 5%, transparent), 0 1px 1px color-mix(in oklab, var(--p-neutral-ink) 3%, transparent);
  --elevation-pop: 0 12px 32px -12px color-mix(in oklab, var(--p-brand-500) 22%, transparent), 0 2px 6px color-mix(in oklab, var(--p-neutral-ink) 4%, transparent);
  --elevation-lift: 0 6px 16px -6px color-mix(in oklab, var(--p-brand-500) 18%, transparent), 0 2px 4px color-mix(in oklab, var(--p-neutral-ink) 3%, transparent);
  --shadow-glassbar: inset 0 1px 0 color-mix(in oklab, var(--p-neutral-cream) 60%, transparent), 0 -12px 32px -16px color-mix(in oklab, var(--p-neutral-ink) 18%, transparent);
  --surface-warm: var(--p-neutral-cream);  /* Warm cream surface — the photographic ground the packshots are shot on */
  --on-dark-warm: var(--p-neutral-cream);  /* Cream label on a dark ground. DISTINCT FROM --brand-foreground (white) on purpose: the two are currently used inconsistently for the same job — see docs/DESIGN-SYSTEM.md. Naming it is what makes the inconsistency fixable in one edit instead of a grep. */
  --ink-band-2: var(--p-neutral-charcoal);  /* One step up from the ink band — hover on dark */
  --brand-active: var(--p-brand-700);  /* Pressed state for a brand-filled control */
  --brand-soft: var(--p-brand-400);  /* The soft brand step — non-critical fills */
  --brand-muted-hover: var(--p-brand-200);  /* Hover on a brand-muted surface */
  --control-disabled: var(--p-line-strong);  /* Disabled control fill */
  --border-hover: var(--p-line-hover);  /* Border on hover */
  --success-tint: var(--p-green-400);  /* Success wash */
  --warning-tint: var(--p-amber-400);  /* Warning wash */
  --scrim: var(--p-neutral-ink);  /* Ink used as a GROUND — photo scrims and true-ink bands. Distinct from --ink-band (blue-900) and --surface-ink (blue-800), which are the brand's deep-blue stages; this one is actually ink. */
  --control-fill: var(--p-tint);  /* The INSET fill for a text control sitting on a card. --control is white, which is also --card — so on a white panel an input had nothing but a --border hairline to declare itself, and on /contact/ the five fields read as absent. An input RECEIVES content: it is a well, and a well is darker than the surface around it. */
  --on-dark-line: color-mix(in oklab, var(--p-neutral-white) 16%, transparent);  /* Hairline on a deep-blue stage (--surface-ink / --ink-band). --border is blue-derived and tuned for a white ground; on blue-800 it vanishes, so every dark panel that needed a rule was inventing its own mix. */
  --on-dark-ink: color-mix(in oklab, var(--p-neutral-white) 74%, transparent);  /* Secondary text on a deep-blue stage — the dark-ground twin of --ink-2. The same role was being hand-mixed off --brand-foreground at 62%, 72% and 80% on three different surfaces because nothing named it. */
  --elevation-panel: 0 0 0 1px color-mix(in oklab, var(--p-brand-500) 9%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--p-neutral-ink) 6%, transparent), 0 20px 44px -22px color-mix(in oklab, var(--p-brand-500) 28%, transparent);  /* The raised PANEL — a hairline ring plus two depths, for a surface that must read as lifted off the page rather than drawn on it. --elevation-pop is the popover step: short throw, tight spread, sized for a menu. This one is wider and slower, sized for a form. */
}

/* ---------- Tier 2 · dark ---------- */
.dark,
[data-appearance="dark"] {
  --background: var(--p-neutral-ink);  /* ink */
  --foreground: var(--p-neutral-white);  /* cream */
  --card: var(--p-neutral-night);  /* law: dark-surface */
  --card-foreground: var(--p-neutral-white);
  --popover: var(--p-neutral-night);
  --popover-foreground: var(--p-neutral-white);
  --primary: var(--p-brand-500);  /* primary stays cupric */
  --primary-foreground: var(--p-neutral-white);  /* cream label */
  --secondary: var(--p-neutral-night);
  --secondary-foreground: var(--p-neutral-white);
  --muted: var(--p-neutral-night);
  --muted-foreground: var(--p-neutral-ash);  /* law: dark text-muted */
  --accent: var(--p-neutral-night);
  --accent-foreground: var(--p-neutral-white);
  --destructive: var(--p-red-400);
  --success: var(--p-green-400);
  --warning: var(--p-amber-400);
  --ink-2: var(--p-neutral-stone);
  --ink-3: var(--p-neutral-ash);
  --ink-4: var(--p-neutral-fog);
  --surface: var(--p-neutral-night);
  --surface-2: var(--p-neutral-ink);
  --control: var(--p-neutral-night);
  --surface-ink: var(--p-brand-800);  /* deep-blue stage, not black */
  --ink-band: var(--p-brand-900);  /* deep-blue stage, not black */
  --border: var(--p-neutral-edge);  /* law: dark-border */
  --border-strong: var(--p-neutral-graphite);
  --input: var(--p-neutral-edge);
  --ring: var(--p-brand-200);  /* law: dark interactive = blue-200 */
  --brand: var(--p-brand-500);
  --brand-foreground: var(--p-neutral-white);
  --brand-hover: var(--p-brand-200);
  --brand-muted: var(--p-neutral-night);
  --brand-cyan: var(--p-brand-400);
  --brand-teal: var(--p-brand-600);
  --price-regular: var(--p-neutral-white);
  --price-sale: var(--p-brand-200);
  --price-compare: var(--p-neutral-fog);
  --stock-in: var(--p-green-400);
  --stock-low: var(--p-amber-400);
  --stock-out: var(--p-neutral-fog);
  --rating-filled: var(--p-neutral-white);
  --savings: var(--p-brand-200);
  --urgency: var(--p-amber-400);
  --trust: var(--p-brand-200);
  --elevation-key: inset 0 1px 0 color-mix(in oklab, var(--p-neutral-cream) 10%, transparent), 0 0 0 1px color-mix(in oklab, var(--p-neutral-ink) 35%, transparent), 0 1px 2px color-mix(in oklab, var(--p-neutral-ink) 45%, transparent);
  --elevation-whisper: 0 0 0 1px color-mix(in oklab, var(--p-neutral-ink) 30%, transparent), 0 1px 2px color-mix(in oklab, var(--p-neutral-ink) 40%, transparent);
  --elevation-card: 0 0 0 1px color-mix(in oklab, var(--p-neutral-ink) 30%, transparent), 0 1px 2px color-mix(in oklab, var(--p-neutral-ink) 35%, transparent), 0 12px 24px -12px color-mix(in oklab, var(--p-neutral-ink) 50%, transparent);
  --elevation-pop: 0 0 0 1px color-mix(in oklab, var(--p-neutral-ink) 35%, transparent), 0 4px 8px -4px color-mix(in oklab, var(--p-neutral-ink) 40%, transparent), 0 24px 48px -24px color-mix(in oklab, var(--p-neutral-ink) 65%, transparent);
  --elevation-lift: 0 0 0 1px color-mix(in oklab, var(--p-neutral-cream) 8%, transparent);
  --shadow-glassbar: inset 0 1px 0 color-mix(in oklab, var(--p-neutral-cream) 8%, transparent), 0 -12px 32px -16px color-mix(in oklab, var(--p-neutral-ink) 50%, transparent);
  --surface-warm: var(--p-neutral-night);  /* Warm cream surface — the photographic ground the packshots are shot on */
  --on-dark-warm: var(--p-neutral-cream);  /* Cream label on a dark ground. DISTINCT FROM --brand-foreground (white) on purpose: the two are currently used inconsistently for the same job — see docs/DESIGN-SYSTEM.md. Naming it is what makes the inconsistency fixable in one edit instead of a grep. */
  --ink-band-2: var(--p-neutral-night);  /* One step up from the ink band — hover on dark */
  --brand-active: var(--p-brand-300);  /* Pressed state for a brand-filled control */
  --brand-soft: var(--p-brand-300);  /* The soft brand step — non-critical fills */
  --brand-muted-hover: var(--p-neutral-night);  /* Hover on a brand-muted surface */
  --control-disabled: var(--p-neutral-night);  /* Disabled control fill */
  --border-hover: var(--p-neutral-slate);  /* Border on hover */
  --success-tint: var(--p-green-600);  /* Success wash */
  --warning-tint: var(--p-amber-600);  /* Warning wash */
  --scrim: var(--p-neutral-ink);  /* Ink used as a GROUND — photo scrims and true-ink bands. Distinct from --ink-band (blue-900) and --surface-ink (blue-800), which are the brand's deep-blue stages; this one is actually ink. */
  --control-fill: var(--p-neutral-ink);  /* Inset control fill — one step DOWN from --card (night), so a field still reads as a well when the ground is already dark. */
  --on-dark-line: color-mix(in oklab, var(--p-neutral-white) 16%, transparent);  /* Hairline on a deep-blue stage. Identical to light: the stage is blue-800 in both appearances. */
  --on-dark-ink: color-mix(in oklab, var(--p-neutral-white) 74%, transparent);  /* Secondary text on a deep-blue stage. Identical to light: the stage does not remap. */
  --elevation-panel: 0 0 0 1px color-mix(in oklab, var(--p-neutral-white) 9%, transparent);  /* Depth shadows do not read on a dark ground — the panel is defined by its ring alone. */
}

/* ---------- Tier 1 overlay · verification — proves the reskin ---------- */
[data-theme="verification"] {
  --p-brand-100: #F7E4D8;
  --p-brand-200: #EFC3A9;
  --p-brand-300: #E29B76;
  --p-brand-400: #D2703F;
  --p-brand-500: #B4491A;  /* terracotta — stands where cupric stands */
  --p-brand-600: #8E3712;
  --p-brand-700: #6B290D;
  --p-brand-800: #4A1D09;
  --p-brand-900: #2B1105;
  --p-neutral-white: #FFFDFA;
  --p-neutral-cream: #F3E9DA;
  --p-neutral-stone: #DCCDB8;
  --p-neutral-ash: #BFAC93;
  --p-neutral-fog: #9A876E;
  --p-neutral-slate: #6E5C46;
  --p-neutral-graphite: #50412F;
  --p-neutral-charcoal: #2E251A;
  --p-neutral-night: #241C13;
  --p-neutral-ink: #17110B;
  --p-ink-200: #E2D8C9;
  --p-ink-400: #9B8A73;
  --p-ink-500: #7B6A54;
  --p-ink-600: #6B5B46;
  --p-ink-800: #4A3B2A;
  --p-line: #F2E7D9;
  --p-line-strong: #E0CFB8;
  --p-line-hover: #CDB79A;
  --p-tint: #FAF2E7;
  --p-green-400: #E6F0D8;
  --p-green-600: #4A6432;
  --p-amber-400: #F9EBD2;
  --p-amber-600: #8A5A08;
  --p-red-400: #FBE3DC;
  --p-red-500: #9B3520;
  --p-red-600: #7A2818;
}