@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/tokens.css

@@ -0,0 +1,993 @@
+/* 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.
+ */
+
+@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);
+
+  /* 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);
+}
+
+/* The shadow family, now valued by @heyramzi/ui/design. Names stay because
+   170-odd call sites use them. Shadow only, since these elements draw their own border. */
+
+/* New work: use `shadow-btn`, `shadow-card`, `shadow-raised` and `shadow-overlay`. */
+@layer utilities {
+  .shadow-soft-sm {
+    box-shadow: var(--elev-btn);
+  }
+
+  .shadow-soft {
+    box-shadow: var(--elev-card);
+  }
+
+  .shadow-soft-md {
+    box-shadow: var(--elev-raised);
+  }
+
+  /* The one step that answers a pointer rather than describing a resting
+     height, so it borrows the step above whatever it was at rest. */
+  .shadow-soft-hover {
+    box-shadow: var(--elev-raised);
+  }
+}
+
+/* The nine bits-ui state variants moved into `@heyramzi/ui/design` on 14 Sep
+   2026. app.css imports that before this file. */
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.84 0 0) transparent;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: oklch(0.84 0 0);
+    border-radius: 9999px;
+  }
+  .dark & {
+    scrollbar-color: oklch(0.45 0 0) transparent;
+    &::-webkit-scrollbar-thumb {
+      background: oklch(0.45 0 0);
+    }
+  }
+}
+
+/* WHY: below sm the dialog docks as a bottom sheet. The .t-modal scale would lift
+   it off the edge. A sheet enters from the edge it rests on. */
+@media (max-width: 639px) {
+  [data-slot="dialog-content"]:not([data-command-dialog]).t-modal {
+    transform: translateY(100%);
+    transition:
+      transform var(--modal-open-dur) var(--modal-ease),
+      opacity var(--modal-open-dur) var(--modal-ease);
+  }
+  [data-slot="dialog-content"]:not([data-command-dialog]).t-modal[data-state="open"] {
+    transform: translateY(0);
+  }
+  [data-slot="dialog-content"]:not([data-command-dialog]).t-modal[data-state="closed"] {
+    transform: translateY(100%);
+    transition:
+      transform var(--modal-close-dur) var(--modal-ease),
+      opacity var(--modal-close-dur) var(--modal-ease);
+  }
+}
+
+/* ── The palette does not animate ──────────────────────
+   WHY: it's opened by shortcut dozens of times a day, so an entrance feels like
+   lag. Raycast and Spotlight don't animate either. */
+
+/* The backdrop is a sibling in the portal, so it's named via `overlayClass`.
+   Reaching across the portal would also hit a dialog open underneath. */
+[data-slot="dialog-content"][data-command-dialog].t-modal,
+[data-slot="dialog-overlay"].t-modal-backdrop.t-instant {
+  transition: none;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+    scrollbar-color: var(--gray-300) transparent;
+    /* WHY: iOS Safari inflates text in landscape unless this is pinned. */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+  .dark html,
+  html.dark {
+    scrollbar-color: var(--brand-veil) transparent;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+
+  /* WHY: the browser's default highlight is a system blue from no theme. Indigo
+     at 18% keeps text at its own contrast in both modes. */
+  ::selection {
+    background-color: color-mix(in oklab, var(--brand-indigo) 18%, transparent);
+  }
+  .dark ::selection,
+  html.dark ::selection {
+    background-color: color-mix(in oklab, var(--brand-indigo-light) 26%, transparent);
+  }
+
+  /* ── Touch input ───────────────────────────────────────
+     WHY any-pointer: an iPad with a Magic Keyboard reports a fine pointer, and
+     `pointer: coarse` would drop touch sizing while the screen's still tapped. */
+
+  /* iOS paints a gray flash on every tap, which clashes with our own :active
+     feedback, so it's turned off. */
+  @media (any-pointer: coarse) {
+    a,
+    button,
+    label,
+    summary,
+    select,
+    [role="button"],
+    [role="link"],
+    [role="menuitem"],
+    [role="option"],
+    [role="tab"] {
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    /* WHY: rows are built at desk density (28-32px). A thumb needs 44px, and rows
+       stack, so growing them costs only scroll. */
+    [data-slot="dropdown-menu-item"],
+    [data-slot="dropdown-menu-checkbox-item"],
+    [data-slot="dropdown-menu-radio-item"],
+    [data-slot="select-item"],
+    [data-slot="command-item"],
+    [data-slot="context-menu-item"],
+    [data-slot="context-menu-checkbox-item"],
+    [data-slot="context-menu-radio-item"] {
+      min-height: 44px;
+    }
+  }
+}
+
+/* ── Reduced motion, once ──────────────────────────────
+   WHY here: 22 files had no guard and 32 wrote their own. Both app.css files
+   import this, so it's stated once. */
+
+/* A floor, not a kill switch: transitions still run at the micro step, so hover
+   and focus still answer. Entrance delays, loops and long travel go. */
+
+/* Unlayered so it beats utilities and scoped rules. A component that wants
+   different behaviour writes its own reduced-motion block with `!important`. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-delay: 0ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-delay: 0ms !important;
+    transition-duration: var(--duration-micro) !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ── 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);
+}
+
+/* The bits-ui state variants every primitive in `./shadcn` is written against.
+ *
+ * bits-ui v2 writes `data-checked` / `data-open` and v1 wrote
+ * `data-state="checked"`, so each variant matches both and a component does not
+ * have to know which it is talking to. They live here rather than in a
+ * consumer's stylesheet because the classes that need them ship in this
+ * package: an app that defines only the palette would render a switch that
+ * never moves. */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@layer base {
+  /* One ring for the whole kit. `:where` keeps it at specificity zero on top of
+     the layer, so a control that needs a different ring writes one and wins. */
+  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+    outline: none;
+    box-shadow: var(--ring-focus);
+  }
+
+  /* The accent at a low alpha, not the browser blue, because a selected word is
+     the one moment the palette shows up inside running text. */
+  ::selection {
+    background: color-mix(in oklab, var(--ring-color) 24%, transparent);
+  }
+
+  /* A default macOS overlay scrollbar paints a black bar on a dark panel. Track
+     transparent, thumb on the line token, so it belongs to whatever surface it
+     is over. The border is what insets the thumb without a second element. */
+  :where(html) {
+    scrollbar-color: var(--color-border, var(--border)) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-clip: padding-box;
+    border-radius: 999px;
+    background-color: var(--color-border, var(--border));
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-muted-foreground, var(--muted-foreground));
+  }
+}
+
+@layer components {
+  /* Three moves the kit repeats. They are classes rather than tokens because a
+     component wants one name, not four declarations, and because the reduced
+     motion guard then lives in one place instead of in every component.
+
+     Namespaced `t-` to match the transitions-dev snippets, which these sit
+     beside rather than duplicate. */
+
+  /* A control that reads as a key: it travels down a pixel under the finger.
+     The travel is what sells it, because a colour change alone reads as a hover
+     state, not as a press. */
+  .t-press {
+    transition:
+      background-color var(--duration-quick) var(--ease-smooth-out),
+      border-color var(--duration-quick) var(--ease-smooth-out),
+      color var(--duration-quick) var(--ease-smooth-out),
+      box-shadow var(--duration-quick) var(--ease-smooth-out),
+      transform var(--duration-micro) var(--ease-smooth-out);
+  }
+
+  .t-press:active:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(1px);
+  }
+
+  /* A card that answers the pointer. It rises by a pixel and gains the next
+     step of elevation, so the hover reads as the card coming forward rather
+     than as its border changing colour. */
+  .t-lift {
+    transition:
+      box-shadow var(--duration-fast) var(--ease-smooth-out),
+      transform var(--duration-fast) var(--ease-smooth-out);
+  }
+
+  .t-lift:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--elev-raised);
+  }
+
+  /* A surface arriving. The open carries the distance, the scale and the blur;
+     the close drops all three and takes less time, per the open/close
+     asymmetry rule in transitions-dev. */
+  .t-enter {
+    animation: t-enter var(--duration-fast) var(--ease-smooth-out) both;
+  }
+
+  .t-exit {
+    animation: t-exit var(--duration-quick) var(--ease-smooth-out) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-press,
+    .t-lift {
+      transition: none;
+    }
+
+    .t-press:active,
+    .t-lift:hover {
+      transform: none;
+    }
+
+    .t-enter,
+    .t-exit {
+      animation-duration: 1ms;
+    }
+  }
+}
+
+@keyframes t-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--distance-micro)) scale(var(--scale-medium));
+    filter: blur(var(--blur-small));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}
+
+/* A mark confirming a state that has already changed: it arrives after the box
+   it sits in, so it grows into place instead of fading. */
+@keyframes t-check {
+  from {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes t-exit {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--scale-tiny));
+  }
+}