@vegastack/design-tokens 0.2.0 → 0.4.0

package/dist/base.css

@@ -55,17 +55,38 @@
     outline-color: Highlight;
   }
 
-  /* Composite text-entry surfaces (TextEdit) put their focus affordance on a WRAPPER via
-     `focus-within:border-ring/…` — a border TINT. The wrapper itself never matches
-     `:focus-visible` (the contenteditable inside it does), and forced-colors replaces
-     border-color outright, so in forced-colors mode that surface had NO visible focus indicator
-     at all. A real outline is the only affordance the forced palette preserves.
-     Simple fields (Input/Textarea/Select) need no equivalent: there the focused element IS the
-     control, so the `:focus-visible` rule above already covers them. */
-  [data-slot="text-edit"]:focus-within {
+  /* Text-entry focus (B1-01, 2026-09-07). Every text-entry control signals focus with the
+     border TINT (`focus:border-ring/(--alpha-tint-border)`) and strips the outline
+     (`outline-none`), because a raw text field cannot tell mouse from keyboard. Forced colours
+     replaces `border-color` outright, so the tint vanishes and `outline-style: none` stays in
+     force — a Windows High Contrast user had no caret location at all. This block is UNLAYERED
+     on purpose: it beats the component's `outline-none` (a layered utility) regardless of
+     specificity, so the fallback is written ONCE here, never per component.
+     - `input`/`textarea` at `:focus` (not `:focus-visible`, matching the tint's trigger);
+     - composite editors (TextEdit's contenteditable) at `:focus`;
+     - wrapper-tinted surfaces (`data-slot="text-edit"`, and every `data-field-group`) at
+       `:focus-within`. */
+  input:focus,
+  textarea:focus,
+  [contenteditable="true"]:focus,
+  [data-slot="text-edit"]:focus-within,
+  [data-field-group]:focus-within {
     outline: 2px solid Highlight;
     outline-offset: 1px;
   }
+
+  /* …and only ONE of them paints (Fo1, 2026-09-07). A bordered field GROUP — Input's prefix/suffix
+     wrapper, NumberField's stepper group, ChipInput, the Combobox input-group — clips with
+     `overflow-hidden` so its addons follow the rounded corner. The inner input's own outline is
+     offset outward INTO that clip, so it was drawn and then cut, which is how an addon field ended
+     up with no visible focus at all under the forced palette. The group carries the outline (it is
+     the element whose border the tint would have moved); the control inside it stands down, so the
+     two never paint a double ring. `data-field-group` is set by every consumer of
+     `fieldControlGroup` in `@vegastack/design` — the attribute IS the contract. */
+  [data-field-group] input:focus,
+  [data-field-group] textarea:focus {
+    outline: none;
+  }
 }
 
 /* ───────────────────────────────────────────────────────────────────────────────────────────────
@@ -85,7 +106,15 @@
   ::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
+    /* A zeroed DURATION alone is not enough: a staggered entrance schedules its
+     * per-item `animation-delay` in real time, so the items would still appear
+     * one after another (each instantly) over the full stagger window. Zeroing
+     * the delay too is what makes "reduced motion" a static end state — and it
+     * is why no component needs its own `motion-reduce:` restatement (audit
+     * batch Di1 / B2-06). */
+    animation-delay: 0s !important;
     transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
     scroll-behavior: auto !important;
   }
 

package/dist/theme.css

@@ -8,42 +8,46 @@
   color-scheme: light;
   --background: oklch(0.994 0.002 75);
   --foreground: oklch(0.145 0.003 75);
-  --card: oklch(0.985 0.003 75);
+  --card: oklch(0.994 0.002 75); /** Light cards are PAGE-COLOURED and separated by the alpha hairline alone (surface-ladder decision 2026-09-07, P1): no reference system lifts or sinks a light card. Dark keeps the one-step lift (neutral.900). */
   --card-foreground: oklch(0.145 0.003 75);
-  --popover: oklch(0.994 0.002 75);
+  --popover: oklch(0.994 0.002 75); /** Every floating surface is the card surface + shadow-overlay; never a lighter or darker rung of its own. */
   --popover-foreground: oklch(0.145 0.003 75);
+  --surface-1: oklch(0.97 0.003 75); /** Surface ladder rung 1 — the REST fill of a filled control (secondary/soft button, kbd, chip, segmented rail, tab-list pill) and the sunken well (code block, skeleton, disabled field, slider/progress track). `secondary` and `muted` are aliases of this rung. */
+  --surface-2: oklch(0.945 0.003 75); /** Surface ladder rung 2 — the HOVER step: a transparent row/item/ghost control hovers to it, a rung-1 control hovers to it. `accent` and `sidebar-accent` are aliases. Alpha twin: bg-foreground/(--alpha-hover). */
+  --surface-3: oklch(0.922 0.003 75); /** Surface ladder rung 3 — the PRESSED / SELECTED step (active:, data-selected, the active sidebar row, the switch off-track). Alpha twin: bg-foreground/(--alpha-pressed). */
   --primary: oklch(0.353 0.003 75);
   --primary-foreground: oklch(0.985 0.003 75);
   --primary-hover: oklch(0.269 0.003 75);
   --primary-active: oklch(0.236 0.003 75);
-  --track: oklch(0.87 0.003 75);
-  --secondary: oklch(0.97 0.003 75);
-  --secondary-foreground: oklch(0.205 0.003 75);
-  --muted: oklch(0.97 0.003 75);
+  --secondary: oklch(0.97 0.003 75); /** ALIAS of surface-1 (kept so shadcn-shaped code keeps compiling). Never retune independently. */
+  --secondary-foreground: oklch(0.145 0.003 75); /** ALIAS of foreground — one ink on every neutral rung. */
+  --muted: oklch(0.97 0.003 75); /** ALIAS of surface-1 (shadcn name). muted-foreground stays a real text role. */
   --muted-foreground: oklch(0.439 0.003 75);
   --muted-foreground-faint: oklch(0.63 0.003 75);
-  --accent: oklch(0.97 0.003 75);
-  --accent-foreground: oklch(0.205 0.003 75);
+  --accent: oklch(0.945 0.003 75); /** ALIAS of surface-2, the hover/highlight rung (shadcn's `accent` — a NEUTRAL, never a hue). Menu/select/command `data-highlighted` rides on it. */
+  --accent-foreground: oklch(0.145 0.003 75); /** ALIAS of foreground. */
   --destructive: oklch(0.505 0.213 27.52);
   --destructive-foreground: oklch(0.985 0.003 75);
   --destructive-subtle: oklch(0.949 0.022 24);
-  --destructive-text: oklch(0.521 0.2 25);
+  --destructive-text: oklch(0.496 0.2 25); /** Page-readable red ink (was red.650, L 0.521). Re-tuned -0.025 L on 2026-09-07 so the soft PRESSED rung (`destructive-subtle-active`, fill @12% over subtle) still clears 4.5:1 — at the old ink the soft family sat at the AA edge on hover (4.60:1) and had no room for a pressed step. Every other pair only gains contrast. */
   --destructive-border: oklch(0.505 0.213 27.52); /** Invalid-state border ink, composited at --alpha-tint-border. A DEDICATED role because the fill hue cannot serve both: on the dark ground, destructive at 70% measures 1.92:1, far under the 3:1 WCAG 1.4.11 floor for a non-text UI indicator, and lightening `destructive` itself would drop destructive-foreground on the solid button below 4.5:1. Light keeps the fill hue (4.24:1); dark re-grounds to red.400 (4.00:1). */
   --success: oklch(0.5 0.16 150);
   --success-foreground: oklch(0.985 0.003 75);
   --success-subtle: oklch(0.951 0.051 150);
-  --success-text: oklch(0.5 0.13 150);
+  --success-text: oklch(0.48 0.13 150); /** Page-readable green ink (was green.650, L 0.5); -0.02 L for the soft pressed rung — see destructive-text. */
   --warning: oklch(0.52 0.145 52);
   --warning-foreground: oklch(0.985 0.003 75);
   --warning-subtle: oklch(0.96 0.019 42);
-  --warning-text: oklch(0.52 0.139 42);
+  --warning-text: oklch(0.505 0.139 42); /** Page-readable amber ink (was amber.650, L 0.52); -0.015 L for the soft pressed rung — see destructive-text. */
   --info: oklch(0.531 0.182 256);
   --info-foreground: oklch(0.985 0.003 75);
   --info-subtle: oklch(0.961 0.018 253);
-  --info-text: oklch(0.52 0.171 256);
-  --overlay: oklch(0.13 0.002 75 / 0.28); /** Modal scrim — the ONE sanctioned alpha-composite literal (a translucent wash has no primitive step; alpha is intrinsic to the role). */
-  --border: oklch(0.922 0.003 75);
-  --input: oklch(0.922 0.003 75);
+  --info-text: oklch(0.5 0.171 256); /** Link / informational blue ink (was blue.650, L 0.52); -0.02 L for the soft pressed rung — see destructive-text. */
+  --overlay: oklch(0.13 0.002 75 / 0.28); /** Modal scrim — an alpha-composite literal (a translucent wash has no primitive step; alpha is intrinsic to the role). Theme-split: the dark scrim is deeper. */
+  --media-scrim: oklch(0.13 0.002 75 / 0.6); /** THEME-INVARIANT media chrome scrim (B4-01): the gradient/backdrop behind controls laid over video or imagery. Always a warm-black alpha, never a theme token, so the chrome reads dark-scrim + light-ink in both themes (`primary` flips with the theme and inverted the chrome in dark). TEXT IS PERMITTED on this scrim: media-foreground clears 5.2:1 on it over a white worst-case backdrop, and tooling/contrast-check.mjs gates the pair at the AA TEXT floor (4.5:1), not the 3:1 non-text floor — so a retune that thins this scrim under AA fails the build rather than silently demoting its labels. */
+  --media-scrim-strong: oklch(0.13 0.002 75 / 0.8); /** Theme-invariant strong scrim for opaque media pills (volume popover, time badge) — 11:1 for media-foreground over a white worst case. Use it for any block of media text that needs headroom beyond the soft scrim's ~5.2:1, and for text over unusually bright or busy frames. */
+  --media-foreground: oklch(0.985 0.003 75); /** Theme-invariant media chrome ink: the warm off-white used for every icon, label and track drawn over media-scrim or media-scrim-strong. Labels are allowed on EITHER scrim — both are gated at the AA text floor (4.5:1) against this ink over the white worst case. Not overridden in dark on purpose. */
+  --input: oklch(0.145 0.003 75 / 0.08); /** ALIAS of border (the alpha hairline). `border` itself is DERIVED by the SD preprocessor: foreground at --alpha-border (D14) so one hairline survives on page, card, well and dark band alike. */
   --ring: oklch(0.353 0.003 75);
   --chart-1: oklch(0.546 0.245 262.88);
   --chart-2: oklch(0.6 0.118 184.7);
@@ -53,7 +57,9 @@
   --chart-6: oklch(0.505 0.213 27.52);
   --chart-7: oklch(0.6 0.127 104.2); /** Olive (hue 104) — reassigned from green.600, which collided with the brand phosphor hue (CX-9). */
   --chart-8: oklch(0.531 0.182 256);
-  --brand: oklch(0.6 0.17 148); /** The phosphor-green brand accent, LIGHT half (theme-split per CX-9): marker roles ONLY (live/AI-state dot, sparkline endpoint, eyebrow highlight, terminal prompt glyph). 3.5:1 on card/background — meaningful glyphs pass WCAG 1.4.11. Never fills, borders-at-rest, headlines, or buttons. */
+  --chart-single: oklch(0.145 0.003 75); /** Single-series chart ink (D29): one series is drawn in foreground ink; the categorical chart-1…8 hues start at two series. */
+  --brand: oklch(0.6 0.17 148); /** The phosphor-green brand accent, LIGHT half (theme-split per CX-9): MARKER roles (live/AI-state dot, sparkline endpoint, eyebrow highlight, terminal prompt glyph) plus the `cta` Button's faint wash and its accent outline — the one sanctioned button, D17/D18. 3.5:1 on card/background — meaningful glyphs pass WCAG 1.4.11, and it is NOT a text ink: brand LABELS take `brand-text`. Never a headline colour, a full-strength surface, or a decorative wash beyond one radial. */
+  --brand-text: oklch(0.46 0.17 148); /** The PAGE-READABLE brand ink, LIGHT half — the same role every chromatic family ships as `<family>-text`. `brand` itself is a 3.5:1 marker and fails WCAG 1.4.3 as a label (measured 3.41:1 for the `cta` Button's mono label over its own faint wash, 2026-09-09), so any brand-coloured TEXT reads through this token instead. Gated at 4.5:1 by contrast-check over background/card/popover/surface-1–3 and over the brand wash at alpha-surface-faint/hover/pressed. */
   --tag-blue: oklch(0.6 0.16 256); /** Tag palette (Attio-teardown Wave 1): 10 chromatic hues x base/subtle/text mirroring the family/family-subtle/family-text shape. base = dots/accents (>=3:1 non-text vs background), subtle = chip fill, text = chip text (>=4.5:1 on subtle AND page). Neutral tags use muted/muted-foreground. AA-validated fail-closed in contrast-check.mjs. */
   --tag-blue-subtle: oklch(0.955 0.02 256);
   --tag-blue-text: oklch(0.51 0.15 256);
@@ -84,13 +90,13 @@
   --tag-purple: oklch(0.6 0.16 295);
   --tag-purple-subtle: oklch(0.955 0.02 295);
   --tag-purple-text: oklch(0.51 0.15 295);
-  --sidebar: oklch(0.985 0.003 75);
-  --sidebar-foreground: oklch(0.269 0.003 75);
-  --sidebar-primary: oklch(0.145 0.003 75);
+  --sidebar: oklch(0.994 0.002 75); /** The sidebar-* family is ALIASES ONLY (B6-01): the rail is a card surface on the ladder, not a second palette. Names kept for shadcn-shaped code. */
+  --sidebar-foreground: oklch(0.145 0.003 75);
+  --sidebar-primary: oklch(0.353 0.003 75);
   --sidebar-primary-foreground: oklch(0.985 0.003 75);
-  --sidebar-accent: oklch(0.955 0.003 75);
+  --sidebar-accent: oklch(0.945 0.003 75); /** ALIAS of surface-2 — the rail's hover rung; the active row sits one rung higher on surface-3 so active+hover still moves (SP-06). */
   --sidebar-accent-foreground: oklch(0.145 0.003 75);
-  --sidebar-border: oklch(0.922 0.003 75);
+  --sidebar-border: oklch(0.145 0.003 75 / 0.08);
   --sidebar-ring: oklch(0.353 0.003 75);
   --radius: 0.75rem;
   --radius-xs: 0.125rem; /** Micro radius — caret/arrow triangles and other sub-control geometry (was a silent Tailwind fallback, register P1-10). */
@@ -109,35 +115,39 @@
   --icon-feature: 1.5rem; /** 24px icon — feature/empty-state glyphs (design.md 'feature'). */
   --sidebar-width: 15rem; /** Expanded sidebar rail width (was a JS constant invisible to design-lint, register P2-13). */
   --sidebar-width-icon: 3rem; /** Collapsed icon-only rail width. */
+  --sidebar-width-mobile: 18rem; /** Width of the sidebar when it renders as an off-canvas sheet below the md breakpoint (was an inline `18rem` fallback, B6-08). */
+  --layout-header-height: 3.5rem; /** 56px app-shell header band (was a raw `h-14`, B6-08). Sticky/fixed content below the header offsets by this. */
+  --layout-overlay-max-height: calc(100dvh - 16rem); /** The tallest a scrolling overlay body (Command list, Board column, ShortcutOverlay) may grow: the dynamic viewport minus a 16rem chrome allowance. DTCG 2025.10 has no calc expression type, so this dimension is authored as the CSS string it resolves to and passed through verbatim (the same precedent as the `easing` linear() token). */
+  --panel-width-sm: 14rem; /** 224px floating panel (compact popover, small menu, single-value date trigger). */
+  --panel-width-md: 18rem; /** 288px floating panel — the default Popover, EmojiPicker, checklist card, range date trigger. */
+  --panel-width-lg: 20rem; /** 320px floating panel (rich HoverCard previews). */
   --shadow-overlay: 0 4px 14px -4px oklch(0.13 0.002 75 / 0.1), 0 2px 4px -2px oklch(0.13 0.002 75 / 0.06);
-  --shadow-lit: inset 0 1px 0 0 oklch(1 0 0 / 0.12), 0 1px 2px 0 oklch(0.13 0.002 75 / 0.18), 0 2px 6px -2px oklch(0.13 0.002 75 / 0.14); /** Wave 2 'lit' action finish (MK-approved amendment to flat-by-default): a 1px on-fill top-light + warm-ink ambient pair for PRIMARY actions only. Attio-calibrated, warm-adapted. Never on cards/surfaces — the flat elevation model stands everywhere else. */
-  --effect-blur-glass: 8px; /** Backdrop blur for the existing glass Button finish. Matches Tailwind v4's shipped blur-sm value while exposing the effect through a semantic contract. */
+  --effect-blur-glass: 8px; /** Backdrop blur for chrome that floats over content (the Attachment upload veil). The Button `glass` variant it was introduced for was deleted 2026-09-07 (audit D16). */
   --z-raised: 10; /** Local raise WITHIN a component's own stacking context (focused OTP slot / segmented item, floating label, bubble reactions, select scroll arrows). Never for portaled surfaces. */
-  --z-overlay: 50; /** The single portal band: every portaled floating surface (dialog, sheet, popover, menu, select, tooltip, hover-card). Nesting resolves by DOM order — Base UI appends portals to <body>, so a Select inside a Dialog mounts later and stacks above within the same band. Toasts (sonner) are the documented exemption ABOVE this band (library-managed z; a toast must outrank a modal regardless of mount order). */
+  --z-overlay: 50; /** The portal band: every portaled floating surface (dialog, sheet, popover, menu, select, tooltip, hover-card). Nesting resolves by DOM order — Base UI appends portals to <body>, so a Select inside a Dialog mounts later and stacks above within the same band. Toasts are the ONE surface above it, on their own `z-toast` band. */
+  --z-toast: 60; /** The toast band, one step above `z-overlay`. A toast is the only surface that must outrank a modal REGARDLESS of mount order — the viewport mounts with the app provider, so DOM order would otherwise put every later-opened dialog on top of it. Within the band the stack counts DOWN from this value by `--toast-index`, so the frontmost toast is the highest. Nothing else may claim this band. */
   --opacity-dim: 50%; /** Element opacity for disabled controls and dimmed affordances (outside-month days, decorative chevrons). */
   --opacity-hint-soft: 60%; /** Element opacity for hover-revealed hints (e.g. sort affordance on row hover). */
   --opacity-hint: 70%; /** Element opacity for resting secondary controls that reach 100% on hover (e.g. alert close). */
   --opacity-track: 25%; /** Element opacity of the circular progress track ring. */
+  --alpha-hover: 7%; /** The alpha twin of surface-2: `bg-<ink>/(--alpha-hover)` composites the hover rung onto ANY backdrop (a kbd inside a hovered row, a chip on a well, a control over media). foreground at 7% over the page measures L 0.943 light / 0.267 dark over card — within 0.003 of the opaque rung. Theme-invariant. */
+  --alpha-pressed: 10%; /** The alpha twin of surface-3 (pressed/selected): foreground at 10% measures L 0.921 light / 0.292 dark over card. Theme-invariant. */
+  --alpha-border: 8%; /** The hairline alpha (D14): `border` is DERIVED as foreground at this alpha, so one hairline reads on page, card, well and dark band. 8% light (L 0.936, Geist gray-400 territory) / 14% dark (L 0.325 over card). */
   --alpha-tint-border: 70%; /** Border tint for focus (ring) and error (destructive) borders — design.md's ring/70 pattern. */
   --alpha-outline-border: 50%; /** Resting border of the outline button family (border-<family>). */
   --alpha-border-subtle: 20%; /** Alert variant border tint (border-<family>). */
-  --alpha-border-soft: 30%; /** Toast (sonner) status border tint (border-<family>). */
+  --alpha-border-soft: 30%; /** The softer of the two border-tint steps. Introduced for the sonner toast surface; since the Base UI Toast migration (O2) the toast tint uses `alpha-border-subtle` like Alert, so this step currently has NO in-repo caller. Kept because it is published token surface — retiring it is a token-batch decision, not a component one. */
   --alpha-surface-faint: 5%; /** Resting wash of the outline button family (bg-<family>). */
-  --alpha-surface-subtle: 10%; /** Hover wash of the outline button family (bg-<family>). */
   --alpha-ink-tint: 10%; /** Neutral pressed/hover ink tint (bg-foreground) — toggle pressed, chip remove hover. */
   --alpha-ink-tint-strong: 15%; /** Hovered pressed-state ink tint (bg-foreground). */
-  --alpha-soft-hover: 20%; /** Hover wash of soft (subtle-filled) status surfaces. Theme-split: 30% in dark. */
-  --alpha-soft-surface: 10%; /** Resting wash of soft status surfaces (chat destructive bubble). Theme-split: 20% in dark. */
   --alpha-input: 30%; /** Dark-theme input fill tint (bg-input) — see the dark-tint scoping note. */
-  --alpha-input-hover: 50%; /** Dark-theme input fill tint on hover (bg-input). */
-  --alpha-fill-hover: 80%; /** Hover dim of an interactive solid fill (bg-primary/secondary/muted/accent on chat bubbles, secondary button). */
   --alpha-wash-faint: 40%; /** Faint neutral wash (bg-muted) — rich-text toolbar. */
   --alpha-wash: 50%; /** Neutral wash (bg-muted) — card/table footers, ghost dark hover. */
   --alpha-wash-strong: 60%; /** Stronger neutral wash (bg-muted) — line-tab hover. */
   --alpha-backdrop-soft: 60%; /** Translucent surface backdrop (bg-background) — pill tab list. */
   --alpha-glass: 90%; /** Glass button surface (bg-background + backdrop-blur). */
   --alpha-glass-hover: 95%; /** Glass button surface on hover. */
-  --alpha-link-hover: 80%; /** Hovered link text dim (text-info-text) in rendered rich text. */
+  --alpha-link-hover: 88%; /** Hovered link text dim, applied to a `<family>-text` ink in rendered rich text and on the `link` Button. 88%, not 80%: at 80% the light composites measured 4.03–4.11:1 for success/info/warning (2026-09-09) — a hover state that drops the link below WCAG 1.4.3 AA. contrast-check gates the composite, not just the solid ink. */
   --alpha-outline-soft: 50%; /** Soft neutral outline/ring (base outline default, date-picker today ring). */
   --font-family-sans: Geist, sans-serif;
   --font-family-mono: 'Geist Mono', monospace;
@@ -147,23 +157,29 @@
   --duration-fast: 150ms;
   --duration-base: 200ms;
   --duration-slow: 300ms;
+  --duration-indeterminate: 1200ms; /** 1200ms — the loop cadence of the ONE sanctioned looping utility, `motion-indeterminate` (an indeterminate Progress sweep; audit M-06). Not an interaction duration: interactions use fast/base/slow. */
   --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
   --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
   --motion-ease-spring: linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1); /** CSS linear() spring with a very small overshoot — the success-bounce/appear curve for state-feedback micro-interactions (Phase M). Subtle by design: dense dev-tool aesthetic, not playful. */
   --motion-blur: 2px; /** Motion-blur amount for blur-fade entrances (Phase M text/element reveals). */
+  --border: oklch(0.145 0.003 75 / 0.08); /** DERIVED: foreground at 8% (alpha-border) — the one alpha hairline (D14). */
   --destructive-hover: oklch(0.455 0.213 27.52); /** DERIVED: destructive fill at L-0.05 (hover step). */
   --destructive-active: oklch(0.415 0.213 27.52); /** DERIVED: destructive fill at L-0.09 (active step). */
   --destructive-subtle-hover: oklch(0.91 0.036 20.4); /** DERIVED: destructive fill @7.000000000000001% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
+  --destructive-subtle-active: oklch(0.883 0.046 19.3); /** DERIVED: destructive fill @12% composited over destructive-subtle (soft-pressed surface, AA-gated against destructive-text). */
   --success-hover: oklch(0.45 0.16 150); /** DERIVED: success fill at L-0.05 (hover step). */
   --success-active: oklch(0.41 0.16 150); /** DERIVED: success fill at L-0.09 (active step). */
   --success-subtle-hover: oklch(0.919 0.059 151.1); /** DERIVED: success fill @7.000000000000001% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
+  --success-subtle-active: oklch(0.896 0.065 151.7); /** DERIVED: success fill @12% composited over success-subtle (soft-pressed surface, AA-gated against success-text). */
   --warning-hover: oklch(0.47 0.145 52); /** DERIVED: warning fill at L-0.05 (hover step). */
   --warning-active: oklch(0.43 0.145 52); /** DERIVED: warning fill at L-0.09 (active step). */
   --warning-subtle-hover: oklch(0.929 0.027 48.8); /** DERIVED: warning fill @7.000000000000001% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
+  --warning-subtle-active: oklch(0.906 0.034 51.5); /** DERIVED: warning fill @12% composited over warning-subtle (soft-pressed surface, AA-gated against warning-text). */
   --info-hover: oklch(0.481 0.182 256); /** DERIVED: info fill at L-0.05 (hover step). */
   --info-active: oklch(0.441 0.182 256); /** DERIVED: info fill at L-0.09 (active step). */
   --info-subtle-hover: oklch(0.929 0.03 251.1); /** DERIVED: info fill @7.000000000000001% composited over info-subtle (soft-hover surface, AA-gated against info-text). */
+  --info-subtle-active: oklch(0.906 0.038 250.5); /** DERIVED: info fill @12% composited over info-subtle (soft-pressed surface, AA-gated against info-text). */
 }
 
 /**
@@ -182,26 +198,27 @@
   --primary-foreground: oklch(0.145 0.003 75);
   --primary-hover: oklch(0.97 0.003 75);
   --primary-active: oklch(0.994 0.002 75);
-  --track: oklch(0.439 0.003 75);
-  --secondary: oklch(0.269 0.003 75);
+  --surface-1: oklch(0.236 0.003 75); /** Dark ladder: card 0.205 -> surface-1 0.236 -> surface-2 0.269 -> surface-3 0.29 (lighter = higher, ~0.03 L per rung, the Radix/Linear dark step). */
+  --surface-2: oklch(0.269 0.003 75);
+  --surface-3: oklch(0.29 0.003 75);
+  --secondary: oklch(0.236 0.003 75);
   --secondary-foreground: oklch(0.922 0.003 75);
-  --muted: oklch(0.269 0.003 75);
+  --muted: oklch(0.236 0.003 75);
   --muted-foreground: oklch(0.66 0.003 75);
   --muted-foreground-faint: oklch(0.559 0.003 75);
   --accent: oklch(0.269 0.003 75);
-  --accent-foreground: oklch(0.967 0.003 75);
+  --accent-foreground: oklch(0.922 0.003 75);
   --destructive-subtle: oklch(0.275 0.07 25);
-  --destructive-text: oklch(0.72 0.16 25);
+  --destructive-text: oklch(0.74 0.16 25); /** Dark red ink (was red.400, L 0.72); +0.02 L so the soft pressed rung (fill @40% over subtle) clears 4.5:1 — see the light destructive-text note. */
   --destructive-border: oklch(0.72 0.16 25); /** Dark-ground invalid-state border ink. red.400 at --alpha-tint-border measures 4.00:1 on background and 3.86:1 on card, clearing the 3:1 WCAG 1.4.11 floor the shared destructive fill misses (1.92:1). */
   --success-subtle: oklch(0.276 0.061 150);
-  --success-text: oklch(0.72 0.17 150);
+  --success-text: oklch(0.74 0.17 150); /** Dark green ink (was green.500, L 0.72); +0.02 L for the soft pressed rung. */
   --warning-subtle: oklch(0.28 0.069 42);
   --warning-text: oklch(0.769 0.188 70.08);
   --info-subtle: oklch(0.275 0.059 255);
-  --info-text: oklch(0.72 0.13 256);
+  --info-text: oklch(0.76 0.13 256); /** Dark link / informational blue ink (was blue.400, L 0.72); +0.04 L for the soft pressed rung — blue had the least headroom (4.50:1 at hover). */
   --overlay: oklch(0 0 0 / 0.55);
-  --border: oklch(0.269 0.003 75);
-  --input: oklch(0.269 0.003 75);
+  --input: oklch(0.922 0.003 75 / 0.14);
   --ring: oklch(0.922 0.003 75);
   --chart-1: oklch(0.623 0.214 259.81);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -211,6 +228,7 @@
   --chart-6: oklch(0.69 0.21 25);
   --chart-7: oklch(0.72 0.15 103.9);
   --chart-8: oklch(0.72 0.13 256);
+  --chart-single: oklch(0.922 0.003 75); /** Repeated here on purpose: an alias is resolved per run, so a light-only alias would leak the LIGHT ink into `.dark` through the cascade (the contrast gate caught exactly that). */
   --tag-blue: oklch(0.72 0.14 256);
   --tag-blue-subtle: oklch(0.275 0.05 256);
   --tag-blue-text: oklch(0.75 0.13 256);
@@ -241,23 +259,27 @@
   --tag-purple: oklch(0.72 0.15 295);
   --tag-purple-subtle: oklch(0.275 0.05 295);
   --tag-purple-text: oklch(0.75 0.13 295);
-  --sidebar: oklch(0.145 0.003 75);
-  --sidebar-foreground: oklch(0.87 0.003 75);
+  --sidebar: oklch(0.205 0.003 75);
+  --sidebar-foreground: oklch(0.922 0.003 75);
   --sidebar-primary: oklch(0.922 0.003 75);
   --sidebar-primary-foreground: oklch(0.145 0.003 75);
-  --sidebar-accent: oklch(0.205 0.003 75);
+  --sidebar-accent: oklch(0.269 0.003 75);
   --sidebar-accent-foreground: oklch(0.922 0.003 75);
-  --sidebar-border: oklch(0.269 0.003 75);
+  --sidebar-border: oklch(0.922 0.003 75 / 0.14);
   --sidebar-ring: oklch(0.922 0.003 75);
-  --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles only. */
-  --alpha-soft-hover: 30%; /** Dark half of the theme-split soft-surface hover wash. */
-  --alpha-soft-surface: 20%; /** Dark half of the theme-split soft-surface resting wash. */
+  --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles plus the `cta` Button's wash/outline. */
+  --brand-text: oklch(0.86 0.21 148); /** The page-readable brand ink, DARK half. On the dark and marketing grounds the marker value already measures 12.2:1 as a label, so brand-text and brand carry the SAME value here — the split exists because the light half cannot. */
+  --alpha-border: 14%; /** Dark half of the hairline alpha (D14): near-white ink needs more alpha than near-black to read as a line — foreground at 14% over card measures L 0.325, over the page 0.302. */
   --shadow-overlay: 0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4); /** DARK overlay shadow, strengthened (Wave 1 — Attio-calibrated): the old single 24px layer was near-invisible on the dark canvas; this two-layer ramp restores the floating cue while staying below Attio's 88px maximal ramp. */
-  --shadow-lit: inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5);
+  --border: oklch(0.922 0.003 75 / 0.14); /** DERIVED: foreground at 14% (alpha-border) — the one alpha hairline (D14). */
   --destructive-subtle-hover: oklch(0.34 0.123 26.3); /** DERIVED: destructive fill @30% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
+  --destructive-subtle-active: oklch(0.364 0.137 26.9); /** DERIVED: destructive fill @40% composited over destructive-subtle (soft-pressed surface, AA-gated against destructive-text). */
   --success-subtle-hover: oklch(0.348 0.092 148.9); /** DERIVED: success fill @30% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
+  --success-subtle-active: oklch(0.371 0.101 148.5); /** DERIVED: success fill @40% composited over success-subtle (soft-pressed surface, AA-gated against success-text). */
   --warning-subtle-hover: oklch(0.356 0.093 46.6); /** DERIVED: warning fill @30% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
+  --warning-subtle-active: oklch(0.381 0.1 47.3); /** DERIVED: warning fill @40% composited over warning-subtle (soft-pressed surface, AA-gated against warning-text). */
   --info-subtle-hover: oklch(0.354 0.101 254.3); /** DERIVED: info fill @30% composited over info-subtle (soft-hover surface, AA-gated against info-text). */
+  --info-subtle-active: oklch(0.38 0.114 254.5); /** DERIVED: info fill @40% composited over info-subtle (soft-pressed surface, AA-gated against info-text). */
 }
 
 /**
@@ -276,26 +298,27 @@
   --primary-foreground: oklch(0.145 0.003 75);
   --primary-hover: oklch(0.97 0.003 75);
   --primary-active: oklch(0.994 0.002 75);
-  --track: oklch(0.439 0.003 75);
-  --secondary: oklch(0.269 0.003 75);
+  --surface-1: oklch(0.236 0.003 75); /** Dark ladder: card 0.205 -> surface-1 0.236 -> surface-2 0.269 -> surface-3 0.29 (lighter = higher, ~0.03 L per rung, the Radix/Linear dark step). */
+  --surface-2: oklch(0.269 0.003 75);
+  --surface-3: oklch(0.29 0.003 75);
+  --secondary: oklch(0.236 0.003 75);
   --secondary-foreground: oklch(0.922 0.003 75);
-  --muted: oklch(0.269 0.003 75);
+  --muted: oklch(0.236 0.003 75);
   --muted-foreground: oklch(0.66 0.003 75);
   --muted-foreground-faint: oklch(0.559 0.003 75);
   --accent: oklch(0.269 0.003 75);
-  --accent-foreground: oklch(0.967 0.003 75);
+  --accent-foreground: oklch(0.922 0.003 75);
   --destructive-subtle: oklch(0.275 0.07 25);
-  --destructive-text: oklch(0.72 0.16 25);
+  --destructive-text: oklch(0.74 0.16 25); /** Dark red ink (was red.400, L 0.72); +0.02 L so the soft pressed rung (fill @40% over subtle) clears 4.5:1 — see the light destructive-text note. */
   --destructive-border: oklch(0.72 0.16 25); /** Dark-ground invalid-state border ink. red.400 at --alpha-tint-border measures 4.00:1 on background and 3.86:1 on card, clearing the 3:1 WCAG 1.4.11 floor the shared destructive fill misses (1.92:1). */
   --success-subtle: oklch(0.276 0.061 150);
-  --success-text: oklch(0.72 0.17 150);
+  --success-text: oklch(0.74 0.17 150); /** Dark green ink (was green.500, L 0.72); +0.02 L for the soft pressed rung. */
   --warning-subtle: oklch(0.28 0.069 42);
   --warning-text: oklch(0.769 0.188 70.08);
   --info-subtle: oklch(0.275 0.059 255);
-  --info-text: oklch(0.72 0.13 256);
+  --info-text: oklch(0.76 0.13 256); /** Dark link / informational blue ink (was blue.400, L 0.72); +0.04 L for the soft pressed rung — blue had the least headroom (4.50:1 at hover). */
   --overlay: oklch(0 0 0 / 0.55);
-  --border: oklch(0.269 0.003 75);
-  --input: oklch(0.269 0.003 75);
+  --input: oklch(0.922 0.003 75 / 0.14);
   --ring: oklch(0.922 0.003 75);
   --chart-1: oklch(0.623 0.214 259.81);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -305,6 +328,7 @@
   --chart-6: oklch(0.69 0.21 25);
   --chart-7: oklch(0.72 0.15 103.9);
   --chart-8: oklch(0.72 0.13 256);
+  --chart-single: oklch(0.922 0.003 75); /** Repeated here on purpose: an alias is resolved per run, so a light-only alias would leak the LIGHT ink into `.dark` through the cascade (the contrast gate caught exactly that). */
   --tag-blue: oklch(0.72 0.14 256);
   --tag-blue-subtle: oklch(0.275 0.05 256);
   --tag-blue-text: oklch(0.75 0.13 256);
@@ -335,23 +359,27 @@
   --tag-purple: oklch(0.72 0.15 295);
   --tag-purple-subtle: oklch(0.275 0.05 295);
   --tag-purple-text: oklch(0.75 0.13 295);
-  --sidebar: oklch(0.145 0.003 75);
-  --sidebar-foreground: oklch(0.87 0.003 75);
+  --sidebar: oklch(0.205 0.003 75);
+  --sidebar-foreground: oklch(0.922 0.003 75);
   --sidebar-primary: oklch(0.922 0.003 75);
   --sidebar-primary-foreground: oklch(0.145 0.003 75);
-  --sidebar-accent: oklch(0.205 0.003 75);
+  --sidebar-accent: oklch(0.269 0.003 75);
   --sidebar-accent-foreground: oklch(0.922 0.003 75);
-  --sidebar-border: oklch(0.269 0.003 75);
+  --sidebar-border: oklch(0.922 0.003 75 / 0.14);
   --sidebar-ring: oklch(0.922 0.003 75);
-  --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles only. */
-  --alpha-soft-hover: 30%; /** Dark half of the theme-split soft-surface hover wash. */
-  --alpha-soft-surface: 20%; /** Dark half of the theme-split soft-surface resting wash. */
+  --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles plus the `cta` Button's wash/outline. */
+  --brand-text: oklch(0.86 0.21 148); /** The page-readable brand ink, DARK half. On the dark and marketing grounds the marker value already measures 12.2:1 as a label, so brand-text and brand carry the SAME value here — the split exists because the light half cannot. */
+  --alpha-border: 14%; /** Dark half of the hairline alpha (D14): near-white ink needs more alpha than near-black to read as a line — foreground at 14% over card measures L 0.325, over the page 0.302. */
   --shadow-overlay: 0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4); /** DARK overlay shadow, strengthened (Wave 1 — Attio-calibrated): the old single 24px layer was near-invisible on the dark canvas; this two-layer ramp restores the floating cue while staying below Attio's 88px maximal ramp. */
-  --shadow-lit: inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5);
+  --border: oklch(0.922 0.003 75 / 0.14); /** DERIVED: foreground at 14% (alpha-border) — the one alpha hairline (D14). */
   --destructive-subtle-hover: oklch(0.34 0.123 26.3); /** DERIVED: destructive fill @30% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
+  --destructive-subtle-active: oklch(0.364 0.137 26.9); /** DERIVED: destructive fill @40% composited over destructive-subtle (soft-pressed surface, AA-gated against destructive-text). */
   --success-subtle-hover: oklch(0.348 0.092 148.9); /** DERIVED: success fill @30% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
+  --success-subtle-active: oklch(0.371 0.101 148.5); /** DERIVED: success fill @40% composited over success-subtle (soft-pressed surface, AA-gated against success-text). */
   --warning-subtle-hover: oklch(0.356 0.093 46.6); /** DERIVED: warning fill @30% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
+  --warning-subtle-active: oklch(0.381 0.1 47.3); /** DERIVED: warning fill @40% composited over warning-subtle (soft-pressed surface, AA-gated against warning-text). */
   --info-subtle-hover: oklch(0.354 0.101 254.3); /** DERIVED: info fill @30% composited over info-subtle (soft-hover surface, AA-gated against info-text). */
+  --info-subtle-active: oklch(0.38 0.114 254.5); /** DERIVED: info fill @40% composited over info-subtle (soft-pressed surface, AA-gated against info-text). */
 }
 
 /* Two-layer type scale (T1): both ladders + the active binding (product by default). */
@@ -407,11 +435,13 @@
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
   --color-primary-active: var(--primary-active);
-  --color-track: var(--track);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -437,7 +467,9 @@
   --color-info-subtle: var(--info-subtle);
   --color-info-text: var(--info-text);
   --color-overlay: var(--overlay);
-  --color-border: var(--border);
+  --color-media-scrim: var(--media-scrim);
+  --color-media-scrim-strong: var(--media-scrim-strong);
+  --color-media-foreground: var(--media-foreground);
   --color-input: var(--input);
   --color-ring: var(--ring);
   --color-chart-1: var(--chart-1);
@@ -448,7 +480,9 @@
   --color-chart-6: var(--chart-6);
   --color-chart-7: var(--chart-7);
   --color-chart-8: var(--chart-8);
+  --color-chart-single: var(--chart-single);
   --color-brand: var(--brand);
+  --color-brand-text: var(--brand-text);
   --color-tag-blue: var(--tag-blue);
   --color-tag-blue-subtle: var(--tag-blue-subtle);
   --color-tag-blue-text: var(--tag-blue-text);
@@ -487,18 +521,23 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-border: var(--border);
   --color-destructive-hover: var(--destructive-hover);
   --color-destructive-active: var(--destructive-active);
   --color-destructive-subtle-hover: var(--destructive-subtle-hover);
+  --color-destructive-subtle-active: var(--destructive-subtle-active);
   --color-success-hover: var(--success-hover);
   --color-success-active: var(--success-active);
   --color-success-subtle-hover: var(--success-subtle-hover);
+  --color-success-subtle-active: var(--success-subtle-active);
   --color-warning-hover: var(--warning-hover);
   --color-warning-active: var(--warning-active);
   --color-warning-subtle-hover: var(--warning-subtle-hover);
+  --color-warning-subtle-active: var(--warning-subtle-active);
   --color-info-hover: var(--info-hover);
   --color-info-active: var(--info-active);
   --color-info-subtle-hover: var(--info-subtle-hover);
+  --color-info-subtle-active: var(--info-subtle-active);
   /* text-* remap — utilities resolve through the scoped --type-* binding (CX-6) */
   --text-xs: var(--type-xs);
   --text-xs--line-height: var(--type-xs--line-height);
@@ -577,6 +616,8 @@
   --font-sans: var(--font-family-sans);
   --font-mono: var(--font-family-mono);
   --font-serif: var(--font-family-serif);
+  --font-display: var(--font-family-display);
+  --font-pixel: var(--font-family-pixel);
   --ease-standard: var(--motion-ease-standard);
   --ease-emphasized: var(--motion-ease-emphasized);
   --ease-exit: var(--motion-ease-exit);