@heyramzi/ui 1.53.0 → 1.54.0

package/src/tokens/craft.css

@@ -0,0 +1,179 @@
+/* ── Radius, by role not by size ─────────────────────────────
+   A chip inside a control inside a card has to read as nested, which needs
+   three radii that step, not one radius reused. The Tailwind names are the
+   home so `rounded-lg` on a button already resolves to the control radius and
+   no component has to learn a new class. */
+@theme {
+  --radius-xs: 4px; /* tag, dot, inline code */
+  --radius-sm: 6px; /* chip, badge, small pill */
+  --radius-md: 7px; /* between a chip and a control */
+  --radius-lg: 8px; /* control: button, input, select, menu item */
+  --radius-xl: 10px; /* card, panel, stage */
+  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
+  --radius-3xl: 20px; /* hero surface, full-bleed panel */
+}
+
+/* ── Elevation ───────────────────────────────────────────────
+   Four steps of lift, plus the two edges that are not lift.
+
+   WHY the steps are shadow-only and the hairline is its own token: most boxes
+   in a kit already draw a border, and an elevation that bakes a `0 0 0 1px`
+   ring into every step gives those boxes two edges a pixel apart. Compose them
+   where a component drops its border:
+
+     box-shadow: var(--elev-hairline), var(--elev-card);
+
+   WHY each step is stacked rather than one blurred drop: a single shadow reads
+   as a sticker. Depth is several offsets falling off together, which is what
+   the eye reads as distance. They cost nothing extra because every stop is the
+   same colour at a different alpha.
+
+   WHY the blur radii are large and the alphas small: a 4px blur at 20% draws a
+   visible grey edge, which the eye reads as a second border. A 28px blur at 7%
+   is barely a colour anywhere and reads as height. Reach for more blur before
+   more alpha, every time.
+
+   `--elev-tint` is the one knob an app turns. Pure black greys a warm palette
+   out; the hue of the app's own darkest surface keeps the shadow in the
+   family. */
+:root {
+
+  /* Resting on the page. A button, a chip, a row. */
+  --elev-btn:
+    0 1px 1px -0.5px color-mix(in oklab, var(--elev-tint) 7%, transparent),
+    0 2px 5px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent);
+
+  /* Sitting on the page. A card, a stage, a panel. */
+  --elev-card:
+    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
+    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
+    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
+
+  /* Lifted off the page. A hovered card, a popover, a menu. */
+  --elev-raised:
+    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
+    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
+    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
+
+  /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
+  --elev-overlay:
+    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
+    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
+    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
+
+  /* The two edges. A hairline separates a surface from what is behind it; a rim
+     is the light catching its top edge, which is what makes a filled control
+     read as a physical key rather than a coloured rectangle. */
+  --elev-hairline: 0 0 0 1px var(--color-border, var(--border));
+  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 16%, transparent);
+
+  /* A field is the one box that goes in rather than up. */
+  --elev-field: inset 0 1px 2px color-mix(in oklab, var(--elev-tint) 7%, transparent);
+}
+
+/* A dark surface cannot cast a darker shadow than the page it sits on, so the
+   hairline does the separating and the shadow only sinks what is behind it. On
+   dark the hairline is white at a low alpha, which is what reads as a lit edge
+   rather than as a drawn border. */
+.dark {
+  --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
+  --elev-card:
+    0 1px 2px color-mix(in oklab, black 24%, transparent),
+    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
+  --elev-raised:
+    0 2px 6px color-mix(in oklab, black 30%, transparent),
+    0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
+  --elev-overlay:
+    0 4px 10px color-mix(in oklab, black 34%, transparent),
+    0 24px 56px -12px color-mix(in oklab, black 50%, transparent);
+
+  --elev-hairline: 0 0 0 1px color-mix(in oklab, white 10%, transparent);
+  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
+  --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
+}
+
+/* ── Focus ───────────────────────────────────────────────────
+   One ring, two parts: a solid edge that redraws the control's own outline in
+   the accent, and a soft halo that carries it off the surface. Written as a
+   variable so a component spends one line on it and every control focuses the
+   same way. */
+:root {
+  --ring-color: var(--color-ring, var(--ring));
+  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
+  /* A solid pixel redrawing the control's own edge, then a wide soft band. At a
+     higher alpha the band reads as a second border rather than as a glow, which
+     is why it is 16% over 4px and not 30% over 2px. */
+  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
+}
+
+/* ── Motion ──────────────────────────────────────────────────
+   The transitions-dev scale, verbatim, so a snippet pasted from that skill and
+   a component written here read from the same names.
+
+   The doctrine in one line: an open is an invitation and a close should get out
+   of the way, so every close is shorter than its open and no close bounces. */
+:root {
+  --duration-stagger: 40ms;
+  --duration-micro: 80ms;
+  --duration-quick: 150ms; /* every close, text swap, tooltip in */
+  --duration-fast: 250ms; /* every open, tabs, icon swap, page slide */
+  --duration-medium: 350ms; /* panel close, toast close */
+  --duration-slow: 400ms; /* panel open, skeleton reveal */
+  --duration-very-slow: 500ms; /* emphasis: badge, text reveal, success check */
+
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* all surface motion */
+  --ease-in-out: ease-in-out; /* swaps and cross-fades */
+  --ease-out: ease-out; /* tooltips */
+  --ease-linear: linear; /* shimmer, pulse, spinner */
+
+  --distance-micro: 4px;
+  --distance-small: 6px;
+  --distance-base: 8px;
+  --distance-medium: 12px;
+  --distance-large: 30px;
+
+  --scale-large: 0.96; /* modal */
+  --scale-medium: 0.97; /* dropdown, popover open */
+  --scale-small: 0.98; /* tooltip */
+  --scale-tiny: 0.99; /* dropdown close */
+
+  --blur-small: 2px;
+  --blur-medium: 3px;
+  --blur-large: 8px;
+}
+
+/* Tailwind utility aliases, so `shadow-card`, `duration-fast` and
+   `ease-smooth-out` exist as classes and a component can stay in utilities
+   instead of dropping into a style block for one shadow. */
+@theme inline {
+  --shadow-hairline: var(--elev-hairline);
+  --shadow-btn: var(--elev-btn);
+  --shadow-card: var(--elev-card);
+  --shadow-raised: var(--elev-raised);
+  --shadow-overlay: var(--elev-overlay);
+  --shadow-field: var(--elev-field);
+  --shadow-rim: var(--elev-rim);
+  /* A filled control: the lit top edge and the resting lift, in one class,
+     because the two never appear apart and utilities cannot be stacked. */
+  --shadow-key: var(--elev-rim), var(--elev-btn);
+  /* The composed pair, for a surface that draws no border of its own. */
+  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
+  --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
+  --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
+
+  --ease-smooth-out: var(--ease-smooth-out);
+
+  /* WHY the durations are re-declared under a second name: Tailwind's
+     `duration-*` utility reads `--transition-duration-*`, not `--duration-*`, so
+     the six names above generated no class at all. `duration-fast` therefore
+     compiled to nothing and the element ended up at `transition-duration: 0s`:
+     no error, no warning, and a component that simply does not animate. The
+     comment at the top of this block had claimed `duration-fast` was a class
+     since the block was written. Found 31 Aug 2026 by probing a live page. */
+  --transition-duration-micro: var(--duration-micro);
+  --transition-duration-quick: var(--duration-quick);
+  --transition-duration-fast: var(--duration-fast);
+  --transition-duration-medium: var(--duration-medium);
+  --transition-duration-slow: var(--duration-slow);
+  --transition-duration-very-slow: var(--duration-very-slow);
+}

package/src/tokens/index.css

@@ -0,0 +1,19 @@
+/* tokens.css
+ *
+ * The shared style layer for @heyramzi/ui, imported once after Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@heyramzi/ui/tokens.css";
+ *   @import "@heyramzi/ui/animations";
+ *   @import "@heyramzi/ui/shadcn/utilities.css"; // only if you use Attachment or Message
+ *
+ * It carries three things: the color palette and semantic tokens, the craft
+ * layer (radius, elevation, focus and motion), and the small set of motion
+ * primitives the components share. Override any variable on :root to retheme.
+ * The parts load in this order because later blocks read earlier variables.
+ */
+
+@import "./palette.css";
+@import "./base.css";
+@import "./craft.css";
+@import "./primitives.css";

package/src/tokens/palette.css

@@ -0,0 +1,410 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Font families */
+@theme {
+  --font-sans: var(--font-satoshi), system-ui, sans-serif;
+  --font-heading: var(--font-manrope), system-ui, sans-serif;
+  --font-mono: var(--font-space-grotesk), ui-monospace, monospace;
+  --font-quote: var(--font-space-grotesk), ui-monospace, monospace;
+}
+
+/* OKLCH Color Variables - Single source of truth for all colors */
+/* Palette: indigo, sand and terra, with a neutral gray scale. */
+:root {
+  color-scheme: light;
+  /* === Font Variables === */
+  /* Each consuming app defines @font-face and sets these to the actual font family names */
+  --font-satoshi: "Satoshi", system-ui, sans-serif;
+  --font-manrope: "Manrope", system-ui, sans-serif;
+  --font-space-grotesk: "Space Grotesk", ui-monospace, monospace;
+
+  /* === Core Gray Scale (7 shades, zero-chroma neutral) === */
+  --gray-50: oklch(0.98 0 0); /* Almost white — backgrounds */
+  --gray-100: oklch(0.94 0 0); /* Very light gray — subtle backgrounds */
+  --gray-200: oklch(0.92 0 0); /* Light gray — borders */
+  --gray-300: oklch(0.84 0 0); /* Muted — disabled, placeholder text */
+  --gray-500: oklch(0.65 0 0); /* Medium gray — secondary text */
+  --gray-700: oklch(0.45 0 0); /* Dark gray — body text */
+  --gray-900: oklch(0.15 0 0); /* Near-black — headings, primary text */
+
+  /* === Accent Colors (3 chromatic) — 60/30/10 split === */
+  --brand-indigo: oklch(0.5 0.2 272); /* Primary 60% — CTAs, links, active states, brand mark */
+  --brand-indigo-light: oklch(0.68 0.16 272); /* Dark mode variant */
+  --brand-sand: oklch(0.78 0.08 40); /* Warmth 30% — highlights, badges, soft accents */
+  --brand-terra: oklch(0.65 0.2 30); /* Signal 10% — warnings, attention, energy */
+
+  /* === Surface System (6 named colors) === */
+  /* Dark surfaces (indigo-tinted, h258-264)        Light pendants (warm-tinted, h55)       */
+  --brand-ink: oklch(0.12 0.04 258); /* Base — page background                      */
+  --brand-night: oklch(0.18 0.05 262); /* Surface — cards, panels     ↔ Linen          */
+  --brand-veil: oklch(0.28 0.06 264); /* Borders, dividers          ↔ Mist            */
+  --brand-dusk: oklch(0.22 0.05 262); /* Between night/veil — hover surfaces, inputs  */
+  --brand-cream: oklch(0.97 0.01 55); /* On-dark text, light backgrounds              */
+  --brand-linen: oklch(0.985 0.003 55); /* Light surface — cards      ↔ Night           */
+  --brand-mist: oklch(0.9 0.006 55); /* Light borders, dividers    ↔ Veil            */
+
+  /* === Indigo Tint Scale (5-step, core = 600) === */
+  --indigo-100: oklch(0.92 0.04 272);
+  --indigo-200: oklch(0.82 0.08 272);
+  --indigo-400: oklch(0.68 0.16 272);
+  --indigo-600: oklch(0.5 0.2 272); /* = --brand-indigo */
+  --indigo-800: oklch(0.34 0.18 272);
+
+  /* === Sand Tint Scale (5-step, core = 400) === */
+  --sand-100: oklch(0.94 0.02 40);
+  --sand-200: oklch(0.88 0.04 40);
+  --sand-400: oklch(0.78 0.08 40); /* = --brand-sand */
+  --sand-600: oklch(0.64 0.1 40);
+  --sand-800: oklch(0.5 0.08 40);
+
+  /* === Terra Tint Scale (5-step, core = 400) === */
+  --terra-100: oklch(0.92 0.05 30);
+  --terra-200: oklch(0.82 0.1 30);
+  --terra-400: oklch(0.65 0.2 30); /* = --brand-terra */
+  --terra-600: oklch(0.52 0.2 30);
+  --terra-800: oklch(0.38 0.15 30);
+
+  /* === Status Tint Scales (5-step, mirror indigo/sand/terra) === */
+  /* WHY: status badges use bg-X-100 text-X-600 dark:bg-X-800/30 dark:text-X-400 */
+  /* Success (green) — positive states */
+  --success-100: oklch(0.94 0.05 150);
+  --success-200: oklch(0.88 0.09 148);
+  --success-400: oklch(0.75 0.15 146);
+  --success-600: oklch(0.62 0.17 145); /* = --success */
+  --success-800: oklch(0.45 0.13 148);
+  /* Warning (amber) — attention, caution */
+  --warning-100: oklch(0.95 0.05 85);
+  --warning-200: oklch(0.9 0.09 82);
+  --warning-400: oklch(0.82 0.13 78);
+  --warning-600: oklch(0.68 0.14 70);
+  --warning-800: oklch(0.5 0.11 65);
+  /* Info (blue) — informational */
+  --info-100: oklch(0.93 0.04 250);
+  --info-200: oklch(0.85 0.08 250);
+  --info-400: oklch(0.72 0.14 250);
+  --info-600: oklch(0.6 0.16 252);
+  --info-800: oklch(0.45 0.15 255);
+
+  /* === Categorical Palette (diagram groups, tags, chart series) === */
+  /* WHY: identity colors for grouping/visual distinction, not semantic state. */
+  --cat-blue: oklch(0.62 0.18 250);
+  --cat-green: oklch(0.65 0.17 150);
+  --cat-amber: oklch(0.75 0.14 75);
+  --cat-pink: oklch(0.65 0.21 350);
+  --cat-teal: oklch(0.68 0.12 195);
+  --cat-orange: oklch(0.7 0.19 45);
+  --cat-rose: oklch(0.64 0.22 15);
+  --cat-cyan: oklch(0.7 0.12 220);
+  --cat-yellow: oklch(0.85 0.16 95);
+  --cat-indigo: oklch(0.58 0.2 272);
+  --cat-purple: oklch(0.58 0.22 305);
+
+  /* === Semantic Colors === */
+  --success: oklch(0.62 0.17 145); /* Green — positive states */
+  --error: oklch(0.6 0.2 25); /* Terra-dark — destructive actions */
+  --warning: oklch(0.78 0.14 75); /* Amber — warnings, attention */
+  --info: oklch(0.68 0.16 250); /* Blue — informational */
+
+  /* === Pure Colors === */
+  --white: oklch(1 0 0);
+  --black: oklch(0 0 0);
+
+  /* === Sidebar Colors === */
+  /* Sidebar is one shade darker than content — Linear-style depth */
+  --sidebar: oklch(0.96 0 0);
+  --sidebar-foreground: oklch(0.45 0 0);
+  --sidebar-primary: oklch(0.15 0 0);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.91 0 0);
+  --sidebar-ring: var(--brand-indigo);
+
+  /* === Shadow tint ===
+     The one knob the design layer exposes. Pure black greys out warm surfaces,
+     so the shadow takes the darkest surface's hue. Radius, focus and motion live there. */
+  --elev-tint: oklch(0.12 0.04 258); /* = --brand-ink */
+}
+
+@theme {
+  /* Gray scale utilities (bg-gray-100, border-gray-200, text-gray-300, etc.) */
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-500: var(--gray-500);
+  --color-gray-700: var(--gray-700);
+  --color-gray-900: var(--gray-900);
+
+  /* Brand colors (V6 names) */
+  --color-brand-indigo: var(--brand-indigo);
+  --color-brand-indigo-light: var(--brand-indigo-light);
+  --color-brand-sand: var(--brand-sand);
+  --color-brand-terra: var(--brand-terra);
+  /* Surface system */
+  --color-brand-ink: var(--brand-ink);
+  --color-brand-night: var(--brand-night);
+  --color-brand-veil: var(--brand-veil);
+  --color-brand-dusk: var(--brand-dusk);
+  --color-brand-cream: var(--brand-cream);
+  --color-brand-linen: var(--brand-linen);
+  --color-brand-mist: var(--brand-mist);
+
+  /* Tint scales */
+  --color-indigo-100: var(--indigo-100);
+  --color-indigo-200: var(--indigo-200);
+  --color-indigo-400: var(--indigo-400);
+  --color-indigo-600: var(--indigo-600);
+  --color-indigo-800: var(--indigo-800);
+  --color-sand-100: var(--sand-100);
+  --color-sand-200: var(--sand-200);
+  --color-sand-400: var(--sand-400);
+  --color-sand-600: var(--sand-600);
+  --color-sand-800: var(--sand-800);
+  --color-terra-100: var(--terra-100);
+  --color-terra-200: var(--terra-200);
+  --color-terra-400: var(--terra-400);
+  --color-terra-600: var(--terra-600);
+  --color-terra-800: var(--terra-800);
+
+  /* Semantic colors */
+  --color-success: var(--success);
+  --color-error: var(--error);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+
+  /* Status tint scales (bg-success-100, text-warning-600, etc.) */
+  --color-success-100: var(--success-100);
+  --color-success-200: var(--success-200);
+  --color-success-400: var(--success-400);
+  --color-success-600: var(--success-600);
+  --color-success-800: var(--success-800);
+  --color-warning-100: var(--warning-100);
+  --color-warning-200: var(--warning-200);
+  --color-warning-400: var(--warning-400);
+  --color-warning-600: var(--warning-600);
+  --color-warning-800: var(--warning-800);
+  --color-info-100: var(--info-100);
+  --color-info-200: var(--info-200);
+  --color-info-400: var(--info-400);
+  --color-info-600: var(--info-600);
+  --color-info-800: var(--info-800);
+
+  /* Categorical palette (diagram groups, tags, chart series) */
+  --color-cat-blue: var(--cat-blue);
+  --color-cat-green: var(--cat-green);
+  --color-cat-amber: var(--cat-amber);
+  --color-cat-pink: var(--cat-pink);
+  --color-cat-teal: var(--cat-teal);
+  --color-cat-orange: var(--cat-orange);
+  --color-cat-rose: var(--cat-rose);
+  --color-cat-cyan: var(--cat-cyan);
+  --color-cat-yellow: var(--cat-yellow);
+  --color-cat-indigo: var(--cat-indigo);
+  --color-cat-purple: var(--cat-purple);
+
+  /* A hue as text or icon on its own tint: 40% toward the foreground clears AA in both themes.
+     A tone's 10% tint under plain destructive text is 3.6:1; the ink mix is not. */
+  --color-cat-cyan-ink: color-mix(in oklab, var(--color-cat-cyan) 60%, var(--color-foreground));
+  --color-cat-teal-ink: color-mix(in oklab, var(--color-cat-teal) 60%, var(--color-foreground));
+  --color-cat-purple-ink: color-mix(in oklab, var(--color-cat-purple) 60%, var(--color-foreground));
+  --color-cat-amber-ink: color-mix(in oklab, var(--color-cat-amber) 60%, var(--color-foreground));
+  --color-success-ink: color-mix(in oklab, var(--color-success) 60%, var(--color-foreground));
+  --color-destructive-ink: color-mix(in oklab, var(--color-destructive) 60%, var(--color-foreground));
+
+  /* Light theme color system — uses named surface colors (linen/mist pendants of night/veil) */
+  --color-background: var(--gray-50);
+  --color-foreground: var(--gray-900);
+  --color-foreground-muted: var(--gray-700);
+
+  --color-card: var(--brand-linen); /* Surface — pendant of night */
+  --color-card-foreground: var(--gray-900);
+
+  --color-popover: var(--brand-linen);
+  --color-popover-foreground: var(--gray-900);
+
+  --color-primary: var(--gray-900);
+  --color-primary-foreground: var(--gray-50);
+
+  --color-secondary: var(--gray-100);
+  --color-secondary-foreground: var(--gray-900);
+
+  --color-muted: var(--gray-100);
+  --color-muted-foreground: var(--gray-700);
+
+  --color-accent: var(--gray-100);
+  --color-accent-foreground: var(--gray-900);
+
+  --color-destructive: var(--error);
+  --color-destructive-foreground: var(--gray-50);
+
+  --color-border: var(--brand-mist); /* Borders — pendant of veil */
+  --color-input: var(--brand-mist);
+  /* WHY the accent, not gray-900: a near-black halo reads as an error first.
+     Focus is the one moment the brand speaks in chrome. */
+  --color-ring: var(--brand-indigo);
+
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* A spinner reads as a speed. Tailwind's 1s looks like thinking, not working,
+     and `animate-spin` is on every loading glyph, so this is a cheap win. */
+  --animate-spin: spin 700ms linear infinite;
+
+  /* Every bare `transition-colors` / `transition-all` reads these two. Tailwind's
+     150ms is the right beat on the wrong ease, and ~200 call sites used it. */
+  --default-transition-duration: var(--duration-quick);
+  --default-transition-timing-function: var(--ease-smooth-out);
+
+  /* Collapsible animations, on the craft layer's scale and asymmetric: an open
+     invites, a close gets out of the way. The old `0.2s ease-out` was off-scale. */
+  --animate-collapsible-down: collapsible-down var(--duration-fast) var(--ease-smooth-out);
+  --animate-collapsible-up: collapsible-up var(--duration-quick) var(--ease-smooth-out);
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--bits-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--bits-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  /* Accordion animations, on the same scale and the same asymmetry. */
+  --animate-accordion-down: accordion-down var(--duration-fast) var(--ease-smooth-out);
+  --animate-accordion-up: accordion-up var(--duration-quick) var(--ease-smooth-out);
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--bits-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--bits-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+.dark {
+  /* WHY: LayerChart halos axis labels with light-dark(), which reads color-scheme, not the .dark class. */
+  color-scheme: dark;
+  /* Dark theme — named surface system (ink/night/veil) */
+  --color-background: var(--brand-ink); /* Base — page background */
+  --color-foreground: var(--brand-cream);
+  --color-foreground-muted: var(--gray-300);
+
+  --color-card: var(--brand-night); /* Surface — cards, panels */
+  --color-card-foreground: var(--brand-cream);
+
+  --color-popover: var(--brand-night);
+  --color-popover-foreground: var(--brand-cream);
+
+  --color-primary: var(--brand-cream);
+  --color-primary-foreground: var(--gray-900);
+
+  --color-secondary: var(--brand-dusk); /* Between night (0.18) and veil (0.28) */
+  --color-secondary-foreground: var(--brand-cream);
+
+  --color-muted: var(--brand-dusk); /* Between night and veil — hover surfaces */
+  --color-muted-foreground: var(--gray-300);
+
+  --color-accent: var(--brand-dusk); /* Between night and veil — accent surfaces */
+  --color-accent-foreground: var(--brand-cream);
+
+  --color-destructive: var(--terra-400); /* Lighter terra for dark bg */
+  --color-destructive-foreground: var(--brand-cream);
+
+  --color-border: var(--brand-veil); /* Named border color */
+  --color-input: var(--brand-dusk); /* Between night and veil — input surfaces */
+  --color-ring: var(--brand-indigo-light);
+
+  /* Brand colors for dark theme — lighter variants for contrast on ink bg */
+  --color-brand-indigo: var(--brand-indigo-light); /* L=0.68 on ink L=0.12 = ΔL 0.56 ✓ */
+
+  /* Dark sidebar — uses named surface system */
+  --sidebar: var(--brand-night);
+  --sidebar-foreground: var(--brand-cream);
+  --sidebar-primary: var(--brand-indigo-light);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.24 0.05 262); /* Between night and veil */
+  --sidebar-accent-foreground: var(--brand-cream);
+  --sidebar-border: var(--brand-veil);
+  --sidebar-ring: var(--brand-indigo-light);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* === shadcn bare-name bridge ===
+   WHY: shared packages with raw CSS read `var(--card)` and friends with a light
+   fallback. We name them `--color-*`, so they painted white cards on ink. */
+
+/* One `:root` block covers both themes, since `.dark` sits on html too. Set a
+   `--color-*` on a subtree and you must override the bare name there as well. */
+:root {
+  --background: var(--color-background);
+  --foreground: var(--color-foreground);
+
+  --card: var(--color-card);
+  --card-foreground: var(--color-card-foreground);
+
+  --popover: var(--color-popover);
+  --popover-foreground: var(--color-popover-foreground);
+
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+
+  --secondary: var(--color-secondary);
+  --secondary-foreground: var(--color-secondary-foreground);
+
+  --muted: var(--color-muted);
+  --muted-foreground: var(--color-muted-foreground);
+
+  --accent: var(--color-accent);
+  --accent-foreground: var(--color-accent-foreground);
+
+  --destructive: var(--color-destructive);
+  --destructive-foreground: var(--color-destructive-foreground);
+
+  --border: var(--color-border);
+  --input: var(--color-input);
+  --ring: var(--color-ring);
+
+  /* Chart series. Indigo leads, green second. Terra sits at 4 since a rate gauge
+     reads as caution, not identity. Every value has a dark variant. */
+  --chart-1: var(--color-brand-indigo);
+  --chart-2: var(--cat-green);
+  --chart-3: var(--brand-sand);
+  --chart-4: var(--brand-terra);
+  --chart-5: var(--cat-cyan);
+}