@mkbabb/glass-ui 3.12.0 → 3.13.0

package/src/styles/theme.css

@@ -1,536 +1,33 @@
 /*
- * theme.css — Tailwind CSS v4 @theme block
+ * theme.css — Tailwind CSS v4 @theme block (thin @import root over theme/*.css)
  *
  * Maps every CSS custom property from tokens.css + typography.css to a
  * Tailwind utility-generating token. References vars (not literals) so
  * consumers can override at :root / .dark without rebuilding Tailwind.
  *
- * Three blocks (AV.W16 TW1):
- *   - LEADING plain `@theme`: the radius primitives + the radius semantic
- *     aliases. Plain (not inline) on purpose — the radius scale has no
- *     tokens.css twin, so each `--radius-*` is the lone declaration + single
- *     override point. Inline is WRONG here: it substitutes the VALUE, so two
- *     aliases resolving to one primitive (`--radius-card`/`--radius-dialog`
- *     both → `--radius-2xl`) collapse to an identical value and v4 drops one
- *     `rounded-*` utility when both are scanned. Plain mints each alias's own
- *     var, so value-identical siblings never collide.
- *   - `@theme inline`: the tokens.css `var(--token)` BRIDGES (color/shadow/
- *     blur/duration/ease/typography). Inline substitutes the referenced value
- *     and mints no second var, so the tokens.css token stays the single
- *     override point (plain would emit `--color-primary` AND `--primary`).
- *     Guardrail: NEVER `@property`-register a color token — registration
- *     snapshots the value and breaks light-dark() (see below).
- *   - trailing plain `@theme`: the remaining literals (`--animate-*`, opacity).
+ * AZ.W-CARVE — the four @theme constructs were CARVED into cohesive
+ * theme/*.css partials (each under the no-god-module 500-line bound),
+ * @import-ed below in CASCADE ORDER. The ordering is load-bearing: `@theme
+ * inline` (bridges) substitutes values, and the leading plain `@theme` radius
+ * aliases must precede the inline bridges (a re-ordered split would drop a
+ * value-identical `rounded-*` utility — the radius header note in
+ * theme/radius.css records the exact collision). Tailwind v4 registers
+ * `@theme` variables across `@import`ed files BY DESIGN (the "sharing across
+ * projects" pattern), so the four constructs span four partials with ZERO
+ * surface delta:
+ *   1. theme/radius.css   — the LEADING plain `@theme`: radius primitives +
+ *                           semantic radius aliases + the corner-SHAPE axis.
+ *   2. theme/bridges.css  — the `@theme inline`: the tokens.css `var(--token)`
+ *                           BRIDGES (color/shadow/blur/duration/ease/typography).
+ *   3. theme/literals.css — the trailing plain `@theme`: directly-authored
+ *                           LITERALS (--animate-*, opacity, text-shadow).
+ *   4. theme/dark.css     — the `@variant dark` class-based dark-mode variant.
+ *
+ * @import-ed by index.css (cascade rung after typography.css); the carve keeps
+ * the SAME @layer/source position → byte-isomorphic dist (the no-god-module
+ * import-order gate is the witness).
  */
-
-/* Radius primitives — leading plain @theme (declared before the inline aliases
-   reference them; see the order note above). */
-@theme {
-    --radius: 0.625rem;
-    --radius-xs: 4px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-xl: 12px;
-    --radius-2xl: 1rem;
-    /* AW.W3b — a finite radius rung above --radius-2xl (16px), below
-       --radius-pill (the stadium). The big-dock card shell's corner geometry. */
-    --radius-3xl: 1.5rem;
-    --radius-pill: 9999px;
-
-    /* Semantic radius aliases — plain @theme (not inline; see header note).
-       Value-identical siblings (e.g. --radius-card + --radius-dialog) would
-       collapse + drop a rounded-* utility under inline; plain mints each
-       alias's own var. */
-    --radius-lg:      var(--radius);
-    --radius-card:    var(--radius-2xl);
-    --radius-panel:   var(--radius-xl);
-    --radius-dialog:  var(--radius-2xl);
-    --radius-input:   var(--radius);
-    --radius-button:  var(--radius);
-    /* AW.W25 — form-radius unification. `--radius-field` is the non-pill field
-       rung the multi-line / stepper form atoms (Textarea, NumberFieldInput)
-       resolve so a multi-line box stops inheriting the `9999px` stadium pill;
-       single-line controls (Input, SelectTrigger) keep the pill. `--radius-control`
-       is the semantic control-corner rung that retires the raw `rounded-sm` (4px)
-       on Checkbox + base Tabs onto a softer, named radius. One geometry language
-       across the form family — token + class only, no new primitive. */
-    --radius-field:   var(--radius-2xl);
-    --radius-control: var(--radius-md);
-    --radius-badge:   var(--radius-pill);
-    --radius-dock:    var(--radius-pill);
-    /* AW.W3b — the big-dock card shell's default (comfortable-density) radius.
-       The density-scaled --dock-card-radius (dock.css) resolves through this. */
-    --radius-dock-card: var(--radius-3xl);
-    --radius-tooltip: var(--radius-lg);
-
-    /* ── AX.W56 — the corner-SHAPE axis (parallel to the corner-RADIUS ladder above).
-       `corner-shape` only changes the CURVE within the `border-radius` box; the
-       region is still the `--radius-*` token. These are plain @theme (the radius
-       siblings' rationale applies — each alias is its own override point, and the
-       semantic shapes are value-identical keywords that must not collapse under
-       inline). Chrome 139+ only (~65% global May 2026); the un-gated `border-radius`
-       round stays the cross-engine CONTRACT and the `@supports (corner-shape:
-       superellipse(2))` gate (glass.css/dock.css) is the PE tier. NEVER make
-       corner-shape the contract — Safari/Firefox have no positive signal through 2026.
-
-       Superellipse exponent (MDN authoritative): `superellipse(K)` paints
-       |x|^(2K) + |y|^(2K) = 1, so the curve exponent n = 2K. The CSS `squircle`
-       keyword == `superellipse(2)` == n=4 — the iOS-idiomatic web squircle. The
-       k-PRIMITIVE band (a consumer dials 1.7–2.4 to taste; W42's dock-morph calc()s
-       its animated k against this ONE vocabulary — do not re-define a second k). */
-    --corner-k-squircle: 2;   /* the squircle — superellipse(2), n=4               */
-    --corner-k-soft:     1.7; /* gentler, between round and squircle — n≈3.4       */
-    --corner-k-sharp:    2.4; /* crisper square-bias for large surfaces — n≈4.8    */
-
-    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY.
-       Cards, pills/buttons, small docks, and panels stay ROUND (the superellipse is
-       imperceptible at a 16px card radius or a stadium pill — dropping it there is
-       visually free). The big-dock card shell (the large --radius-dock-card / 24px
-       surface) is the one site where the squircle READS — the iOS-26 idiom the dock
-       wants. A consumer opts an additional large-radius surface in by re-pointing its
-       `--corner-shape-<surface>` at `superellipse(var(--corner-k-squircle))`. */
-    --corner-shape-card:    round;
-    --corner-shape-pill:    round;
-    --corner-shape-panel:   round;
-    --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
-    /* AX.W56(R1) — the overlay-band glass surfaces W54 makes glass-default
-       (Dialog + Sheet content) ride the squircle alongside the big-dock. They
-       sit at the large `--radius-dialog` (16px) modal radius where the
-       superellipse READS — the same iOS-26 idiom. @supports-gated in glass.css
-       over the `border-radius` round CONTRACT; a consumer dials either back to
-       round by re-pointing the alias. */
-    --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
-    --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
-    /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
-       (the iOS color-picker idiom). It rides the same --corner-k-squircle
-       vocabulary; @supports-gated in Slider.vue over a --radius-* round
-       fallback. A consumer dials it to round (a circular knob) or to soft. */
-    --corner-shape-thumb:   superellipse(var(--corner-k-squircle));
-}
-
-@theme inline {
-    /* ═══════════════════════════════════════════════
-       Typography — size scale → text-* utilities
-       ═══════════════════════════════════════════════ */
-    --text-admin-label: var(--type-admin-label);
-    --text-micro:       var(--type-micro);
-    --text-caption:     var(--type-caption);
-    --text-small:       var(--type-small);
-    --text-body:        var(--type-body);
-    --text-prose:       var(--type-prose);
-    --text-subheading:  var(--type-subheading);
-    --text-heading:     var(--type-heading);
-    --text-title:       var(--type-title);
-    /* AX.W50 D17 — the picker-family type-scale → `text-dropdown` /
-       `text-dropdown-secondary` utilities, bridging the `--dropdown-text` token pair
-       (tokens.css §10, a specialization of W51's `--control-text` comfort register)
-       so a Tailwind `text-dropdown` utility resolves the family scale. Mirrors the
-       `--text-small: var(--type-small)` ladder-bridge idiom above. */
-    --text-dropdown:           var(--dropdown-text);
-    --text-dropdown-secondary: var(--dropdown-text-secondary);
-    --text-display:     var(--type-display-1);
-    --text-display-1:   var(--type-display-1);
-    --text-display-2:   var(--type-display-2);
-    --text-display-3:   var(--type-display-3);
-    --text-display-4:   var(--type-display-4);
-    --text-display-5:   var(--type-display-5);
-
-    /* Line heights → leading-* utilities */
-    --leading-micro:   var(--type-leading-micro);
-    --leading-caption: var(--type-leading-caption);
-    --leading-small:   var(--type-leading-small);
-    --leading-body:    var(--type-leading-body);
-    --leading-prose:   var(--type-leading-prose);
-    --leading-heading: var(--type-leading-heading);
-    --leading-display: var(--type-leading-display);
-
-    /* Letter spacing → tracking-* utilities */
-    --tracking-tight:  var(--type-tracking-tight);
-    --tracking-snug:   var(--type-tracking-snug);
-    --tracking-normal: var(--type-tracking-normal);
-    --tracking-wide:   var(--type-tracking-wide);
-    --tracking-wider:  var(--type-tracking-wider);
-    --tracking-caps:   var(--type-tracking-caps);
-
-    /* ═══════════════════════════════════════════════
-       Font families → font-* utilities
-
-       ONE brand register, bridged from tokens.css §0's --font-stack-* source.
-       --font-text is the body/heading/prose/display register (Plus Jakarta
-       Sans). --font-serif is a bridge alias for the demo configurator's "serif"
-       control slot — it resolves to the SAME text register (the library carries
-       no display-serif voice). A consumer rebrands the whole text register by
-       overriding --font-text once.
-       ═══════════════════════════════════════════════ */
-    --font-text:    var(--font-stack-text);
-    --font-display: var(--font-stack-display);
-    --font-serif:   var(--font-stack-text);
-    --font-sans:    var(--font-stack-sans);
-    --font-mono:    var(--font-stack-mono);
-
-    /* ═══════════════════════════════════════════════
-       Colors — core
-       ═══════════════════════════════════════════════ */
-    --color-border: var(--border);
-    /* AQ.W2 §3d — the whisper-alpha border hairline rung (border-border-soft /
-       bg-border-soft utilities). Auto-dark via --border. */
-    --color-border-soft: var(--border-soft);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    /* AU.W8b.4 — the muted-foreground-strong bridge (text-muted-foreground-strong
-       utility). The base token already exists (tokens.css:362); only the
-       --color-muted-foreground bridge was present. CardDescription consumes
-       text-muted-foreground-strong through this. NOT @property-registered (a
-       design-token color; registration would break light-dark() re-resolution). */
-    --color-muted-foreground-strong: var(--muted-foreground-strong);
-
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-
-    /* R0G-5 — bg-surface-public-data-panel utility. */
-    --color-surface-public-data-panel: var(--surface-public-data-panel);
-
-    --color-shadow: var(--shadow);
-
-    /* Semantic foregrounds — bg-{success,warning,info}-foreground +
-       text-{success,warning,info}-foreground. Companions to the existing
-       --color-{success,warning,info} bridges below. R5 vocab.γ gap row 4. */
-    --color-success-foreground: var(--success-foreground);
-    --color-warning-foreground: var(--warning-foreground);
-    --color-info-foreground:    var(--info-foreground);
-
-    /* Muted-tinted rungs — bg-muted-soft / bg-muted-medium. */
-    --color-muted-soft:   var(--muted-soft);
-    --color-muted-medium: var(--muted-medium);
-
-    /* AU.W8b.4 — glass-tier surface/border bridges (bg-glass-quiet /
-       border-glass-quiet). Companions to the existing --shadow-glass-quiet
-       bridge below; lets the Toggle `card` variant compose bg-glass-quiet /
-       border-glass-quiet / shadow-glass-quiet instead of bg-[var(--glass-…)]
-       arbitrary wraps. NOT @property-registered (design-token colors —
-       registration snapshots the resolved color + breaks light-dark()). */
-    --color-glass-quiet:        var(--glass-bg-quiet);
-    --color-glass-border-quiet: var(--glass-border-quiet);
-
-    /* Foreground-tint rungs — bg-surface-tint-{4,6,8,10,12,15,18,22,25}. */
-    --color-surface-tint-4:  var(--surface-tint-4);
-    --color-surface-tint-6:  var(--surface-tint-6);
-    --color-surface-tint-8:  var(--surface-tint-8);
-    --color-surface-tint-10: var(--surface-tint-10);
-    --color-surface-tint-12: var(--surface-tint-12);
-    --color-surface-tint-15: var(--surface-tint-15);
-    --color-surface-tint-18: var(--surface-tint-18);
-    --color-surface-tint-22: var(--surface-tint-22);
-    --color-surface-tint-25: var(--surface-tint-25);
-    --color-surface-tint-35: var(--surface-tint-35);
-    --color-surface-tint-40: var(--surface-tint-40);
-    --color-surface-tint-70: var(--surface-tint-70);
-
-    /* Surface-tint tier aliases (V.W3.T10) — semantic names mapped to
-       the canonical numeric scale. Lets consumers compose
-       `bg-surface-tint-quiet|floating|modal` without picking a numeric
-       rung; the alias resolves to the rung that matches the surface
-       tier's canonical opacity. Quiet ≈ 6% (light backdrop tint),
-       floating ≈ 12% (panel-tier tint), modal ≈ 18% (heavy modal tint). */
-    --color-surface-tint-quiet:    var(--surface-tint-6);
-    --color-surface-tint-floating: var(--surface-tint-12);
-    --color-surface-tint-modal:    var(--surface-tint-18);
-
-    /* Overlay scrims — bg-overlay-scrim{,-strong,-subtle}. */
-    --color-overlay-scrim:        var(--overlay-scrim);
-    --color-overlay-scrim-strong: var(--overlay-scrim-strong);
-    --color-overlay-scrim-subtle: var(--overlay-scrim-subtle);
-
-    /* ═══════════════════════════════════════════════
-       Colors — section palette (13-stop)
-       ═══════════════════════════════════════════════ */
-    --color-section-0:  var(--section-color-0);
-    --color-section-1:  var(--section-color-1);
-    --color-section-2:  var(--section-color-2);
-    --color-section-3:  var(--section-color-3);
-    --color-section-4:  var(--section-color-4);
-    --color-section-5:  var(--section-color-5);
-    --color-section-6:  var(--section-color-6);
-    --color-section-7:  var(--section-color-7);
-    --color-section-8:  var(--section-color-8);
-    --color-section-9:  var(--section-color-9);
-    --color-section-10: var(--section-color-10);
-    --color-section-11: var(--section-color-11);
-    --color-section-12: var(--section-color-12);
-
-    --color-section-heading: var(--section-heading);
-    --color-accent-pink: var(--accent-pink);
-    --color-accent-red:  var(--accent-red);
-
-    /* ═══════════════════════════════════════════════
-       Colors — viz basis
-       ═══════════════════════════════════════════════ */
-    --color-viz-fourier:   var(--viz-fourier);
-    --color-viz-chebyshev: var(--viz-chebyshev);
-    --color-viz-legendre:  var(--viz-legendre);
-    --color-viz-amber:     var(--viz-amber);
-    --color-viz-green:     var(--viz-green);
-
-    /* ═══════════════════════════════════════════════
-       Colors — semantic UI accents
-       ═══════════════════════════════════════════════ */
-    --color-tier-featured: var(--tier-featured);
-    --color-tier-saved:    var(--tier-saved);
-    --color-like:          var(--like);
-    --color-success:       var(--success);
-    --color-warning:       var(--warning);
-    --color-info:          var(--info);
-    --color-delete:        var(--delete);
-
-    /* ═══════════════════════════════════════════════
-       Colors — gold + rainbow accents (kept for consumers)
-       ═══════════════════════════════════════════════ */
-    --color-gold: var(--gold);
-    --color-gold-light: var(--gold-light);
-    --color-gold-dark: var(--gold-dark);
-    --color-gold-deep: var(--gold-deep);
-    /* D6.b — the gilt family: the rim (gilt edge) + the legible gold ink. The
-       `@theme` bridge surfaces `text-gold-ink` / `border-gold-rim` utilities
-       beside the existing gold quad. `--gold-ink` clears cream-law ② on `--card`
-       in both arms (proof:gold-ink-contrast). */
-    --color-gold-rim: var(--gold-rim);
-    --color-gold-ink: var(--gold-ink);
-
-    --color-rainbow-red:    var(--rainbow-red);
-    --color-rainbow-orange: var(--rainbow-orange);
-    --color-rainbow-yellow: var(--rainbow-yellow);
-    --color-rainbow-green:  var(--rainbow-green);
-    --color-rainbow-blue:   var(--rainbow-blue);
-    --color-rainbow-indigo: var(--rainbow-indigo);
-    --color-rainbow-violet: var(--rainbow-violet);
-
-    /* ═══════════════════════════════════════════════
-       Z-index → z-* utilities
-       ═══════════════════════════════════════════════ */
-    --z-index-behind: var(--z-behind);
-    --z-index-background: var(--z-background);
-    --z-index-content: var(--z-content);
-    --z-index-controls: var(--z-controls);
-    --z-index-bar: var(--z-bar);
-    --z-index-header: var(--z-header);
-    --z-index-dock: var(--z-dock);
-    --z-index-panel: var(--z-panel);
-    --z-index-overlay: var(--z-overlay);
-    --z-index-hovercard: var(--z-hovercard);
-    --z-index-tooltip: var(--z-tooltip);
-    --z-index-popover: var(--z-popover);
-    --z-index-modal: var(--z-modal);
-    --z-index-fullscreen: var(--z-fullscreen);
-    --z-index-toast: var(--z-toast);
-    --z-index-toggle: var(--z-toggle);
-    --z-index-max: var(--z-max);
-
-    /* The radius PRIMITIVES + the semantic radius aliases (→ rounded-*
-       utilities) live in the LEADING plain @theme block above — plain, not
-       inline, so value-identical aliases never collide during candidate
-       resolution. See the order/collision note there. */
-
-    /* ═══════════════════════════════════════════════
-       Sizing → h-*, min-w-*, and spacing utilities
-       ═══════════════════════════════════════════════ */
-    --height-chart-compact: var(--chart-height-compact);
-    --height-chart-default: var(--chart-height-default);
-    --height-chart-large:   var(--chart-height-large);
-    --min-width-input-sm:   var(--input-min-width-sm);
-    --spacing-chart-margin: var(--chart-margin);
-    /* AU.W8b.4 — w-popover utility (Combobox list width). Lifts `w-[200px]`. */
-    --width-popover:        var(--popover-width);
-
-    /* Golden-ratio spacing — p-phi-5 / m-phi-6 etc. via Tailwind's spacing
-       utilities. φ² and φ³ rungs for hero/chassis padding ladder. */
-    --spacing-phi-5: var(--space-phi-5);
-    --spacing-phi-6: var(--space-phi-6);
-
-    /* V.W2 T13 — Icon-size ladder bridge → `size-icon-*`/`h-icon-*`/`w-icon-*`
-       utilities. Consumers can compose via `class="size-icon-2xl"` etc.
-       directly without the `size-[var(--icon-2xl)]` arbitrary-property form. */
-    --spacing-icon-xs:  var(--icon-xs);
-    --spacing-icon-sm:  var(--icon-sm);
-    --spacing-icon-md:  var(--icon-md);
-    --spacing-icon-lg:  var(--icon-lg);
-    --spacing-icon-xl:  var(--icon-xl);
-    --spacing-icon-2xl: var(--icon-2xl);
-    --spacing-icon-3xl: var(--icon-3xl);
-    --spacing-icon-hero: var(--icon-hero);
-
-    /* ═══════════════════════════════════════════════
-       Shadows → shadow-* utilities
-       ═══════════════════════════════════════════════ */
-    --shadow-cartoon:       var(--cartoon-shadow);
-    --shadow-cartoon-hover: var(--cartoon-shadow-hover);
-    --shadow-soft:          var(--soft-shadow);
-    --shadow-elevated:      var(--elevated-shadow);
-    --shadow-modal:         var(--modal-shadow);
-
-    --shadow-card:           var(--card-shadow);
-    --shadow-dock:           var(--dock-shadow);
-    --shadow-dock-collapsed: var(--dock-shadow-collapsed);
-
-    --shadow-glass-wash:     var(--glass-shadow-wash);
-    --shadow-glass-quiet:    var(--glass-shadow-quiet);
-    --shadow-glass-resting:  var(--glass-shadow-resting);
-    --shadow-glass-floating: var(--glass-shadow-floating);
-    --shadow-glass-overlay:  var(--glass-shadow-overlay);
-
-    --shadow-cartoon-sm: var(--cartoon-shadow-sm);
-    --shadow-cartoon-md: var(--cartoon-shadow-md);
-    --shadow-cartoon-lg: var(--cartoon-shadow-lg);
-
-    /* ═══════════════════════════════════════════════
-       Blur → blur-* and backdrop-blur-* utilities
-       ═══════════════════════════════════════════════ */
-    --blur-glass-wash:     var(--glass-blur-wash-radius);
-    --blur-glass-quiet:    var(--glass-blur-quiet-radius);
-    --blur-glass-resting:  var(--glass-blur-resting-radius);
-    --blur-glass-floating: var(--glass-blur-floating-radius);
-    --blur-glass-overlay:  var(--glass-blur-overlay-radius);
-    --blur-dock:           var(--glass-blur-dock-radius);
-
-    /* ═══════════════════════════════════════════════
-       Easing → ease-* utilities
-       ═══════════════════════════════════════════════ */
-    --ease-spring-smooth: var(--spring-smooth);
-    --ease-spring-snappy: var(--spring-snappy);
-    --ease-spring-bouncy: var(--spring-bouncy);
-    --ease-spring-gentle: var(--spring-gentle);
-
-    --ease-standard: var(--motion-ease-standard);
-    --ease-out: var(--motion-ease-out);
-    --ease-in: var(--motion-ease-in);
-    --ease-out-expo: var(--motion-ease-out-expo);
-    --ease-apple: var(--motion-ease-apple);
-    --ease-spring: var(--spring-snappy);
-    --ease-decelerate: var(--motion-ease-out);
-    --ease-accelerate: var(--motion-ease-in);
-
-    /* ═══════════════════════════════════════════════
-       Duration → duration-* utilities
-       ═══════════════════════════════════════════════ */
-    --transition-duration-instant: var(--duration-instant);
-    --transition-duration-fast: var(--duration-fast);
-    --transition-duration-normal: var(--duration-normal);
-    --transition-duration-slow: var(--duration-slow);
-    --transition-duration-panel: var(--duration-panel);
-    --transition-duration-xl: var(--duration-xl);
-    --transition-duration-xxl: var(--duration-xxl);
-    --transition-duration-sparkle: var(--duration-sparkle);
-}
-
-/* ═══════════════════════════════════════════════════════════════════════
-   Directly-authored LITERALS — plain @theme (the override surface here is
-   the namespaced var itself, not a tokens.css bridge, so these mint their
-   global variable). Radius primitives, the --animate-* composites (literal
-   keyframe name + var() timing — no tokens.css twin to double), and the
-   opacity rungs.
-   ═══════════════════════════════════════════════════════════════════════ */
-@theme {
-    /* ═══════════════════════════════════════════════
-       Animation → animate-* utilities
-       ═══════════════════════════════════════════════ */
-    --animate-floating-panel-in: floating-panel-in var(--duration-fast) var(--ease-out);
-    --animate-tooltip-in: tooltip-in var(--duration-fast) var(--ease-out);
-    --animate-fade-in: fade-in var(--duration-normal) var(--spring-smooth);
-    --animate-scale-in: scale-in var(--duration-normal) var(--spring-smooth);
-    --animate-slide-up: slide-up var(--duration-normal) var(--spring-smooth);
-    --animate-dock-in: dock-in var(--duration-panel) var(--spring-snappy) both;
-    /* ── Shimmer family: documented duration offset ──────────────────────────
-       The shimmer ladder is intentionally non-paired-by-name:
-       - `--animate-shimmer` reads `--duration-shimmer-fast` (3s) — fast loop
-         tempo for the band-pass shimmer pattern (skeleton, marketing).
-       - `--animate-shimmer-sweep` and `--animate-gold-shimmer` both read the
-         unsuffixed `--duration-shimmer` (5s) — slower one-pass sweep for
-         brand-polish moments (Complete! gold-shimmer headline, hero lifts).
-       The fast/canonical split exists because the two shimmer modes (looping
-       band-pass vs one-pass sweep) want different tempos. The pre-V audit
-       (C-c §5.3) flagged this as a "naming inversion"; it is intentional —
-       documented here so the offset is searchable. The orphan
-       `--duration-shimmer-slow` (8s) was excised in V.W2 T5. */
-    --animate-shimmer: shimmer var(--duration-shimmer-fast) linear infinite;
-    --animate-shimmer-sweep: shimmer-sweep var(--duration-shimmer) ease-in-out infinite;
-    --animate-gold-shimmer: gold-shimmer-slide var(--duration-shimmer) linear infinite;
-    --animate-shake: shake 0.5s ease-in-out;
-
-    /* ═══════════════════════════════════════════════
-       Opacity → opacity-* utilities
-
-       Bridges the canonical `--opacity-disabled` (0.5) and
-       `--opacity-icon-muted` (0.8) rungs from tokens.css §11. Tailwind
-       v4 generates `opacity-disabled` / `opacity-icon-muted` utilities
-       (and the `disabled:opacity-disabled` modifier form) from these
-       @theme declarations; the values match tokens.css line 550-551.
-
-       Consumers replace 18+ hardcoded `disabled:opacity-50` literals
-       across the primitive slice with `disabled:opacity-disabled`.
-       (Per audit U.W0.C-a §1.2 / §gap.4 — U12.)
-       ═══════════════════════════════════════════════ */
-    --opacity-disabled:   0.5;
-    --opacity-icon-muted: 0.8;
-
-    /* ═══════════════════════════════════════════════
-       text-shadow → text-shadow-* utilities (AW.W26)
-
-       text-shadow is the lone shadow family that shipped no `@theme` bridge
-       (Tailwind v4.1 minted the `text-shadow-{2xs,xs,sm,md,lg}` utilities). The
-       rungs are warm-`--shadow-color`-derived via `color-mix` per the box-shadow
-       ladder (tokens.css §7) + the cartoon-shadow precept's one-source chain, so
-       they re-tint under `.dark` BY CONSTRUCTION — `--shadow-color: var(--foreground)`
-       flips light→dark with no hardcoded `.dark` re-declaration. The hand-rolled
-       multi-stop `text-shadow:` literals in `.depth-text` (utilities.css) +
-       `.text-engraved` (typography.css) now compose these tokens. */
-    --text-shadow-2xs: 0 1px 0 color-mix(in srgb, var(--shadow-color) 12%, transparent);
-    --text-shadow-xs:  0 1px 1px color-mix(in srgb, var(--shadow-color) 16%, transparent);
-    --text-shadow-sm:  0 1px 0 color-mix(in srgb, var(--shadow-color) 14%, transparent),
-                       0 2px 3px color-mix(in srgb, var(--shadow-color) 18%, transparent);
-    --text-shadow-md:  0 1px 0 color-mix(in srgb, var(--shadow-color) 16%, transparent),
-                       0 2px 4px color-mix(in srgb, var(--shadow-color) 20%, transparent),
-                       0 4px 8px color-mix(in srgb, var(--shadow-color) 14%, transparent);
-    --text-shadow-lg:  0 1px 0 color-mix(in srgb, var(--shadow-color) 18%, transparent),
-                       0 2px 4px color-mix(in srgb, var(--shadow-color) 22%, transparent),
-                       0 6px 12px color-mix(in srgb, var(--shadow-color) 18%, transparent);
-
-    /* Two IDENTITY text-shadow tokens — the hard offset STAMP (`.depth-text`)
-       + the two-stop EMBOSS (`.text-engraved`). These hold the multi-stop
-       literals INSIDE the `@theme` defs so the utilities compose `var(--text-shadow-*)`
-       and no raw `text-shadow:` literal survives in `utilities.css`/`typography.css`
-       (AW.W26 gate 4). Both are `--shadow-color`/surface-tint-derived, so they
-       re-tint under `.dark` BY CONSTRUCTION. */
-    --text-shadow-depth: 1px 1px 0 var(--shadow),
-                         2px 2px 0 var(--shadow),
-                         3px 3px 0 var(--shadow),
-                         4px 4px 0 var(--shadow),
-                         5px 5px 0 var(--shadow),
-                         5px 5px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-                         2px 2px 2px color-mix(in srgb, var(--shadow-color) 20%, transparent),
-                         4px 4px 5px color-mix(in srgb, var(--shadow-color) 25%, transparent),
-                         6px 6px 10px color-mix(in srgb, var(--shadow-color) 15%, transparent);
-    --text-shadow-engraved: 0 1px 0 color-mix(in srgb, var(--background) 30%, transparent),
-                            0 -1px 0 var(--surface-tint-8);
-}
-
-/* Class-based dark mode */
-@variant dark (&:where(.dark, .dark *));
+@import "./theme/radius.css";
+@import "./theme/bridges.css";
+@import "./theme/literals.css";
+@import "./theme/dark.css";