@sixthshift/design-system 0.2.1 → 0.4.0

package/src/theme/tokens.css

@@ -0,0 +1,824 @@
+/**
+ * Design tokens — the single source of truth for the design system.
+ *
+ * Hand-edited. Three token tiers, each answering a different question, and each
+ * with a different editor:
+ *
+ *   1. Palette — raw scales. What colours exist. Never referenced by
+ *      components; a new hue is added here and nowhere else.
+ *   2. Semantic — what a colour *means*, one block per mode. Every value points
+ *      at a palette entry, so a re-skin edits tier 1 only. This tier is what
+ *      collapses the light/dark axis: 145 of its tokens remap between modes, so
+ *      nothing downstream has to know a mode exists.
+ *   3. Component — which meaning a given component part uses, per variant and
+ *      state. Lives in `recipes/`, imported below. This is the consumer's
+ *      override surface: tier 2 is edited to re-skin, tier 3 to re-wire.
+ *
+ * Two emitters carry the tiers into the build:
+ *
+ *   - `@theme` tells Tailwind which utilities exist. Every semantic token needs
+ *     an entry here or its class does not compile. Component tokens do not —
+ *     tier 3 is read as plain `var()` in CSS, never through a utility.
+ *   - `@layer base` holds the few global rules the components genuinely need.
+ *     App opinions (page background, scroll behaviour) are deliberately not
+ *     here: a library has no business restyling its consumer's page.
+ *
+ * Nothing verifies any of that, so when you add a token: put it in *both* mode
+ * blocks and give it a `@theme` entry. Miss the dark block and it is undefined
+ * in dark mode; miss the `@theme` entry and its utility never compiles. Neither
+ * failure raises an error anywhere.
+ */
+
+/* Tier 3. Imported here rather than from each component's `.tsx` so it reaches
+   consumers through the `theme.css` import they already have — the build is
+   `tsc` only, which does not copy `.css` into `dist/`. `@import` must precede
+   every rule in this file, so this stays at the top. */
+@import "./recipes/index.css";
+
+/* =============================================================================
+   1. PALETTE
+   ============================================================================= */
+
+:root {
+  /* Identity. Declared as variables rather than comments so anything that wants
+     them — the token documentation stories, a consumer's about page — can read
+     them at runtime instead of parsing this file. */
+  --theme-name: "Default";
+  --theme-version: "0.1.0";
+
+  --color-emerald-50: #f2fafb;
+  --color-emerald-100: #d6eef0;
+  --color-emerald-200: #addde0;
+  --color-emerald-300: #7cc4c8;
+  --color-emerald-400: #4ba5a9;
+  --color-emerald-500: #368086;
+  --color-emerald-600: #2c666c;
+  --color-emerald-700: #234e53;
+  --color-emerald-800: #19393d;
+  --color-emerald-900: #11292c;
+  --color-emerald-950: #0a1a1d;
+
+  --color-topaz-50: #fff7f0;
+  --color-topaz-100: #ffe5d1;
+  --color-topaz-200: #fbc89f;
+  --color-topaz-300: #f0a066;
+  --color-topaz-400: #d9722e;
+  --color-topaz-500: #c4530a;
+  --color-topaz-600: #9f4007;
+  --color-topaz-700: #7b2e06;
+  --color-topaz-800: #5a2105;
+  --color-topaz-900: #3d1503;
+  --color-topaz-950: #230c02;
+
+  --color-ruby-50: #fff5f6;
+  --color-ruby-100: #fde1e4;
+  --color-ruby-200: #f8bac3;
+  --color-ruby-300: #ec8796;
+  --color-ruby-400: #d55368;
+  --color-ruby-500: #c33341;
+  --color-ruby-600: #9e2533;
+  --color-ruby-700: #7a1b27;
+  --color-ruby-800: #57131c;
+  --color-ruby-900: #3a0c13;
+  --color-ruby-950: #21070b;
+
+  --color-ocean-50: #f0f4fa;
+  --color-ocean-100: #dce6f4;
+  --color-ocean-200: #b9cde9;
+  --color-ocean-300: #8fafd9;
+  --color-ocean-400: #6691c7;
+  --color-ocean-500: #4573ae;
+  --color-ocean-600: #355a8c;
+  --color-ocean-700: #034078;
+  --color-ocean-800: #022f5a;
+  --color-ocean-900: #001f54;
+  --color-ocean-950: #0a1128;
+
+  --color-sky-50: #effcff;
+  --color-sky-100: #d6f5fb;
+  --color-sky-200: #b3ecf7;
+  --color-sky-300: #7fdff0;
+  --color-sky-400: #44c9e2;
+  --color-sky-500: #1282a2;
+  --color-sky-600: #0f6b86;
+  --color-sky-700: #10576d;
+  --color-sky-800: #12475a;
+  --color-sky-900: #133c4c;
+  --color-sky-950: #062733;
+
+  --color-earth-50: #fefcfb;
+  --color-earth-100: #faf6f4;
+  --color-earth-200: #f2ebe7;
+  --color-earth-300: #e8ddd6;
+  --color-earth-400: #d4c4b9;
+  --color-earth-500: #b8a192;
+  --color-earth-600: #9a816f;
+  --color-earth-700: #7d6555;
+  --color-earth-800: #5e4b40;
+  --color-earth-900: #3d302a;
+  --color-earth-950: #211916;
+
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+
+  --font-sans: Inter Variable, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: JetBrains Mono Variable, ui-monospace, monospace;
+}
+
+/* =============================================================================
+   2. SEMANTIC TOKENS
+   ============================================================================= */
+
+:root:not([data-theme]),
+:root[data-theme="light"] {
+  /* Background */
+  --bg-strong: var(--color-slate-800);
+  --bg-strong-hovered: var(--color-slate-900);
+  --bg-strong-pressed: var(--color-slate-950);
+  --bg-strong-disabled: var(--color-slate-300);
+  --bg-normal: white;
+  --bg-normal-hovered: var(--color-slate-50);
+  --bg-normal-pressed: var(--color-slate-100);
+  --bg-normal-disabled: var(--color-slate-200);
+  --bg-subtle: var(--color-slate-50);
+  --bg-subtle-hovered: var(--color-slate-100);
+  --bg-subtle-pressed: var(--color-slate-200);
+  --bg-subtle-disabled: var(--color-slate-100);
+  --bg-brand-subtle: var(--color-ocean-100);
+  --bg-brand-subtle-hovered: var(--color-ocean-200);
+  --bg-brand-subtle-pressed: var(--color-ocean-300);
+  --bg-brand-subtle-disabled: var(--color-ocean-50);
+  --bg-brand: var(--color-ocean-600);
+  --bg-brand-hovered: var(--color-ocean-700);
+  --bg-brand-pressed: var(--color-ocean-800);
+  --bg-brand-disabled: var(--color-ocean-300);
+  --bg-brand-strong: var(--color-ocean-800);
+  --bg-brand-strong-hovered: var(--color-ocean-900);
+  --bg-brand-strong-pressed: var(--color-ocean-950);
+  --bg-brand-strong-disabled: var(--color-ocean-400);
+  --bg-success-subtle: var(--color-emerald-100);
+  --bg-success-subtle-hovered: var(--color-emerald-200);
+  --bg-success-subtle-pressed: var(--color-emerald-300);
+  --bg-success-subtle-disabled: var(--color-emerald-50);
+  --bg-success: var(--color-emerald-600);
+  --bg-success-hovered: var(--color-emerald-700);
+  --bg-success-pressed: var(--color-emerald-800);
+  --bg-success-disabled: var(--color-emerald-300);
+  --bg-success-strong: var(--color-emerald-800);
+  --bg-success-strong-hovered: var(--color-emerald-900);
+  --bg-success-strong-pressed: var(--color-emerald-950);
+  --bg-success-strong-disabled: var(--color-emerald-400);
+  --bg-warning-subtle: var(--color-topaz-100);
+  --bg-warning-subtle-hovered: var(--color-topaz-200);
+  --bg-warning-subtle-pressed: var(--color-topaz-300);
+  --bg-warning-subtle-disabled: var(--color-topaz-50);
+  --bg-warning: var(--color-topaz-600);
+  --bg-warning-hovered: var(--color-topaz-700);
+  --bg-warning-pressed: var(--color-topaz-800);
+  --bg-warning-disabled: var(--color-topaz-300);
+  --bg-warning-strong: var(--color-topaz-800);
+  --bg-warning-strong-hovered: var(--color-topaz-900);
+  --bg-warning-strong-pressed: var(--color-topaz-950);
+  --bg-warning-strong-disabled: var(--color-topaz-400);
+  --bg-danger-subtle: var(--color-ruby-100);
+  --bg-danger-subtle-hovered: var(--color-ruby-200);
+  --bg-danger-subtle-pressed: var(--color-ruby-300);
+  --bg-danger-subtle-disabled: var(--color-ruby-50);
+  --bg-danger: var(--color-ruby-600);
+  --bg-danger-hovered: var(--color-ruby-700);
+  --bg-danger-pressed: var(--color-ruby-800);
+  --bg-danger-disabled: var(--color-ruby-300);
+  --bg-danger-strong: var(--color-ruby-800);
+  --bg-danger-strong-hovered: var(--color-ruby-900);
+  --bg-danger-strong-pressed: var(--color-ruby-950);
+  --bg-danger-strong-disabled: var(--color-ruby-400);
+  --bg-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Foreground */
+  --fg-strong: var(--color-slate-900);
+  --fg-strong-hovered: var(--color-slate-950);
+  --fg-strong-pressed: black;
+  --fg-strong-disabled: var(--color-slate-400);
+  --fg-on-strong: var(--color-slate-50);
+  --fg-on-strong-hovered: white;
+  --fg-on-strong-pressed: white;
+  --fg-on-strong-disabled: var(--color-slate-300);
+  --fg-normal: var(--color-slate-900);
+  --fg-normal-hovered: var(--color-slate-950);
+  --fg-normal-pressed: var(--color-slate-950);
+  --fg-normal-disabled: var(--color-slate-400);
+  --fg-subtle: var(--color-slate-500);
+  --fg-subtle-hovered: var(--color-slate-600);
+  --fg-subtle-pressed: var(--color-slate-700);
+  --fg-subtle-disabled: var(--color-slate-300);
+  --fg-brand: var(--color-ocean-700);
+  --fg-brand-hovered: var(--color-ocean-800);
+  --fg-brand-pressed: var(--color-ocean-900);
+  --fg-brand-disabled: var(--color-ocean-300);
+  --fg-on-brand-subtle: var(--color-ocean-800);
+  --fg-on-brand-subtle-hovered: var(--color-ocean-900);
+  --fg-on-brand-subtle-pressed: var(--color-ocean-950);
+  --fg-on-brand-subtle-disabled: var(--color-ocean-400);
+  --fg-on-brand: var(--color-slate-50);
+  --fg-on-brand-hovered: white;
+  --fg-on-brand-pressed: white;
+  --fg-on-brand-disabled: var(--color-slate-300);
+  --fg-on-brand-strong: var(--color-slate-50);
+  --fg-on-brand-strong-hovered: white;
+  --fg-on-brand-strong-pressed: white;
+  --fg-on-brand-strong-disabled: var(--color-slate-300);
+  --fg-success: var(--color-emerald-700);
+  --fg-success-hovered: var(--color-emerald-800);
+  --fg-success-pressed: var(--color-emerald-900);
+  --fg-success-disabled: var(--color-emerald-300);
+  --fg-on-success-subtle: var(--color-emerald-800);
+  --fg-on-success-subtle-hovered: var(--color-emerald-900);
+  --fg-on-success-subtle-pressed: var(--color-emerald-950);
+  --fg-on-success-subtle-disabled: var(--color-emerald-400);
+  --fg-on-success: var(--color-slate-50);
+  --fg-on-success-hovered: white;
+  --fg-on-success-pressed: white;
+  --fg-on-success-disabled: var(--color-slate-300);
+  --fg-on-success-strong: var(--color-slate-50);
+  --fg-on-success-strong-hovered: white;
+  --fg-on-success-strong-pressed: white;
+  --fg-on-success-strong-disabled: var(--color-slate-300);
+  --fg-warning: var(--color-topaz-700);
+  --fg-warning-hovered: var(--color-topaz-800);
+  --fg-warning-pressed: var(--color-topaz-900);
+  --fg-warning-disabled: var(--color-topaz-300);
+  --fg-on-warning-subtle: var(--color-topaz-800);
+  --fg-on-warning-subtle-hovered: var(--color-topaz-900);
+  --fg-on-warning-subtle-pressed: var(--color-topaz-950);
+  --fg-on-warning-subtle-disabled: var(--color-topaz-400);
+  --fg-on-warning: var(--color-slate-50);
+  --fg-on-warning-hovered: white;
+  --fg-on-warning-pressed: white;
+  --fg-on-warning-disabled: var(--color-slate-300);
+  --fg-on-warning-strong: var(--color-slate-50);
+  --fg-on-warning-strong-hovered: white;
+  --fg-on-warning-strong-pressed: white;
+  --fg-on-warning-strong-disabled: var(--color-slate-300);
+  --fg-danger: var(--color-ruby-700);
+  --fg-danger-hovered: var(--color-ruby-800);
+  --fg-danger-pressed: var(--color-ruby-900);
+  --fg-danger-disabled: var(--color-ruby-300);
+  --fg-on-danger-subtle: var(--color-ruby-800);
+  --fg-on-danger-subtle-hovered: var(--color-ruby-900);
+  --fg-on-danger-subtle-pressed: var(--color-ruby-950);
+  --fg-on-danger-subtle-disabled: var(--color-ruby-400);
+  --fg-on-danger: var(--color-slate-50);
+  --fg-on-danger-hovered: white;
+  --fg-on-danger-pressed: white;
+  --fg-on-danger-disabled: var(--color-slate-300);
+  --fg-on-danger-strong: var(--color-slate-50);
+  --fg-on-danger-strong-hovered: white;
+  --fg-on-danger-strong-pressed: white;
+  --fg-on-danger-strong-disabled: var(--color-slate-300);
+
+  /* Border */
+  --border-strong: var(--color-slate-800);
+  --border-strong-hovered: var(--color-slate-900);
+  --border-strong-pressed: var(--color-slate-950);
+  --border-strong-disabled: var(--color-slate-300);
+  --border-normal: var(--color-slate-300);
+  --border-normal-hovered: var(--color-slate-400);
+  --border-normal-pressed: var(--color-slate-500);
+  --border-normal-disabled: var(--color-slate-100);
+  --border-subtle: var(--color-slate-100);
+  --border-subtle-hovered: var(--color-slate-200);
+  --border-subtle-pressed: var(--color-slate-300);
+  --border-subtle-disabled: var(--color-slate-50);
+  --border-brand-subtle: var(--color-ocean-300);
+  --border-brand-subtle-hovered: var(--color-ocean-400);
+  --border-brand-subtle-pressed: var(--color-ocean-500);
+  --border-brand-subtle-disabled: var(--color-ocean-200);
+  --border-brand: var(--color-ocean-600);
+  --border-brand-hovered: var(--color-ocean-700);
+  --border-brand-pressed: var(--color-ocean-800);
+  --border-brand-disabled: var(--color-ocean-200);
+  --border-brand-strong: var(--color-ocean-800);
+  --border-brand-strong-hovered: var(--color-ocean-900);
+  --border-brand-strong-pressed: var(--color-ocean-950);
+  --border-brand-strong-disabled: var(--color-ocean-400);
+  --border-success: var(--color-emerald-300);
+  --border-success-hovered: var(--color-emerald-400);
+  --border-success-pressed: var(--color-emerald-500);
+  --border-success-disabled: var(--color-emerald-200);
+  --border-warning: var(--color-topaz-300);
+  --border-warning-hovered: var(--color-topaz-400);
+  --border-warning-pressed: var(--color-topaz-500);
+  --border-warning-disabled: var(--color-topaz-200);
+  --border-danger: var(--color-ruby-300);
+  --border-danger-hovered: var(--color-ruby-400);
+  --border-danger-pressed: var(--color-ruby-500);
+  --border-danger-disabled: var(--color-ruby-200);
+
+  /* Interaction */
+  --focus-ring: var(--color-ocean-500);
+}
+
+:root[data-theme="dark"] {
+  /* Background */
+  --bg-strong: var(--color-slate-200);
+  --bg-strong-hovered: var(--color-slate-100);
+  --bg-strong-pressed: var(--color-slate-50);
+  --bg-strong-disabled: var(--color-slate-600);
+  --bg-normal: var(--color-slate-900);
+  --bg-normal-hovered: var(--color-slate-800);
+  --bg-normal-pressed: var(--color-slate-700);
+  --bg-normal-disabled: var(--color-slate-900);
+  --bg-subtle: var(--color-slate-800);
+  --bg-subtle-hovered: var(--color-slate-700);
+  --bg-subtle-pressed: var(--color-slate-600);
+  --bg-subtle-disabled: var(--color-slate-800);
+  --bg-brand-subtle: var(--color-ocean-950);
+  --bg-brand-subtle-hovered: var(--color-ocean-900);
+  --bg-brand-subtle-pressed: var(--color-ocean-800);
+  --bg-brand-subtle-disabled: var(--color-ocean-950);
+  --bg-brand: var(--color-ocean-500);
+  --bg-brand-hovered: var(--color-ocean-600);
+  --bg-brand-pressed: var(--color-ocean-700);
+  --bg-brand-disabled: var(--color-ocean-800);
+  --bg-brand-strong: var(--color-ocean-300);
+  --bg-brand-strong-hovered: var(--color-ocean-200);
+  --bg-brand-strong-pressed: var(--color-ocean-100);
+  --bg-brand-strong-disabled: var(--color-ocean-600);
+  --bg-success-subtle: var(--color-emerald-950);
+  --bg-success-subtle-hovered: var(--color-emerald-900);
+  --bg-success-subtle-pressed: var(--color-emerald-800);
+  --bg-success-subtle-disabled: var(--color-emerald-950);
+  --bg-success: var(--color-emerald-500);
+  --bg-success-hovered: var(--color-emerald-600);
+  --bg-success-pressed: var(--color-emerald-700);
+  --bg-success-disabled: var(--color-emerald-800);
+  --bg-success-strong: var(--color-emerald-300);
+  --bg-success-strong-hovered: var(--color-emerald-200);
+  --bg-success-strong-pressed: var(--color-emerald-100);
+  --bg-success-strong-disabled: var(--color-emerald-600);
+  --bg-warning-subtle: var(--color-topaz-950);
+  --bg-warning-subtle-hovered: var(--color-topaz-900);
+  --bg-warning-subtle-pressed: var(--color-topaz-800);
+  --bg-warning-subtle-disabled: var(--color-topaz-950);
+  --bg-warning: var(--color-topaz-500);
+  --bg-warning-hovered: var(--color-topaz-600);
+  --bg-warning-pressed: var(--color-topaz-700);
+  --bg-warning-disabled: var(--color-topaz-800);
+  --bg-warning-strong: var(--color-topaz-300);
+  --bg-warning-strong-hovered: var(--color-topaz-200);
+  --bg-warning-strong-pressed: var(--color-topaz-100);
+  --bg-warning-strong-disabled: var(--color-topaz-600);
+  --bg-danger-subtle: var(--color-ruby-950);
+  --bg-danger-subtle-hovered: var(--color-ruby-900);
+  --bg-danger-subtle-pressed: var(--color-ruby-800);
+  --bg-danger-subtle-disabled: var(--color-ruby-950);
+  --bg-danger: var(--color-ruby-500);
+  --bg-danger-hovered: var(--color-ruby-600);
+  --bg-danger-pressed: var(--color-ruby-700);
+  --bg-danger-disabled: var(--color-ruby-800);
+  --bg-danger-strong: var(--color-ruby-300);
+  --bg-danger-strong-hovered: var(--color-ruby-200);
+  --bg-danger-strong-pressed: var(--color-ruby-100);
+  --bg-danger-strong-disabled: var(--color-ruby-600);
+  --bg-overlay: rgba(0, 0, 0, 0.6);
+
+  /* Foreground */
+  --fg-strong: var(--color-slate-50);
+  --fg-strong-hovered: white;
+  --fg-strong-pressed: white;
+  --fg-strong-disabled: var(--color-slate-500);
+  --fg-on-strong: var(--color-slate-900);
+  --fg-on-strong-hovered: var(--color-slate-950);
+  --fg-on-strong-pressed: black;
+  --fg-on-strong-disabled: var(--color-slate-500);
+  --fg-normal: var(--color-slate-50);
+  --fg-normal-hovered: white;
+  --fg-normal-pressed: white;
+  --fg-normal-disabled: var(--color-slate-500);
+  --fg-subtle: var(--color-slate-400);
+  --fg-subtle-hovered: var(--color-slate-300);
+  --fg-subtle-pressed: var(--color-slate-200);
+  --fg-subtle-disabled: var(--color-slate-600);
+  --fg-brand: var(--color-ocean-300);
+  --fg-brand-hovered: var(--color-ocean-200);
+  --fg-brand-pressed: var(--color-ocean-100);
+  --fg-brand-disabled: var(--color-ocean-700);
+  --fg-on-brand-subtle: var(--color-ocean-300);
+  --fg-on-brand-subtle-hovered: var(--color-ocean-200);
+  --fg-on-brand-subtle-pressed: var(--color-ocean-100);
+  --fg-on-brand-subtle-disabled: var(--color-ocean-700);
+  --fg-on-brand: white;
+  --fg-on-brand-hovered: white;
+  --fg-on-brand-pressed: white;
+  --fg-on-brand-disabled: var(--color-slate-400);
+  --fg-on-brand-strong: var(--color-slate-900);
+  --fg-on-brand-strong-hovered: var(--color-slate-950);
+  --fg-on-brand-strong-pressed: black;
+  --fg-on-brand-strong-disabled: var(--color-slate-500);
+  --fg-success: var(--color-emerald-300);
+  --fg-success-hovered: var(--color-emerald-200);
+  --fg-success-pressed: var(--color-emerald-100);
+  --fg-success-disabled: var(--color-emerald-700);
+  --fg-on-success-subtle: var(--color-emerald-300);
+  --fg-on-success-subtle-hovered: var(--color-emerald-200);
+  --fg-on-success-subtle-pressed: var(--color-emerald-100);
+  --fg-on-success-subtle-disabled: var(--color-emerald-700);
+  --fg-on-success: white;
+  --fg-on-success-hovered: white;
+  --fg-on-success-pressed: white;
+  --fg-on-success-disabled: var(--color-slate-500);
+  --fg-on-success-strong: var(--color-slate-900);
+  --fg-on-success-strong-hovered: var(--color-slate-950);
+  --fg-on-success-strong-pressed: black;
+  --fg-on-success-strong-disabled: var(--color-slate-500);
+  --fg-warning: var(--color-topaz-300);
+  --fg-warning-hovered: var(--color-topaz-200);
+  --fg-warning-pressed: var(--color-topaz-100);
+  --fg-warning-disabled: var(--color-topaz-700);
+  --fg-on-warning-subtle: var(--color-topaz-300);
+  --fg-on-warning-subtle-hovered: var(--color-topaz-200);
+  --fg-on-warning-subtle-pressed: var(--color-topaz-100);
+  --fg-on-warning-subtle-disabled: var(--color-topaz-700);
+  --fg-on-warning: white;
+  --fg-on-warning-hovered: white;
+  --fg-on-warning-pressed: white;
+  --fg-on-warning-disabled: var(--color-slate-500);
+  --fg-on-warning-strong: var(--color-slate-900);
+  --fg-on-warning-strong-hovered: var(--color-slate-950);
+  --fg-on-warning-strong-pressed: black;
+  --fg-on-warning-strong-disabled: var(--color-slate-500);
+  --fg-danger: var(--color-ruby-300);
+  --fg-danger-hovered: var(--color-ruby-200);
+  --fg-danger-pressed: var(--color-ruby-100);
+  --fg-danger-disabled: var(--color-ruby-700);
+  --fg-on-danger-subtle: var(--color-ruby-300);
+  --fg-on-danger-subtle-hovered: var(--color-ruby-200);
+  --fg-on-danger-subtle-pressed: var(--color-ruby-100);
+  --fg-on-danger-subtle-disabled: var(--color-ruby-700);
+  --fg-on-danger: white;
+  --fg-on-danger-hovered: white;
+  --fg-on-danger-pressed: white;
+  --fg-on-danger-disabled: var(--color-slate-500);
+  --fg-on-danger-strong: var(--color-slate-900);
+  --fg-on-danger-strong-hovered: var(--color-slate-950);
+  --fg-on-danger-strong-pressed: black;
+  --fg-on-danger-strong-disabled: var(--color-slate-500);
+
+  /* Border */
+  --border-strong: var(--color-slate-200);
+  --border-strong-hovered: var(--color-slate-100);
+  --border-strong-pressed: var(--color-slate-50);
+  --border-strong-disabled: var(--color-slate-600);
+  --border-normal: var(--color-slate-700);
+  --border-normal-hovered: var(--color-slate-600);
+  --border-normal-pressed: var(--color-slate-500);
+  --border-normal-disabled: var(--color-slate-800);
+  --border-subtle: var(--color-slate-800);
+  --border-subtle-hovered: var(--color-slate-700);
+  --border-subtle-pressed: var(--color-slate-600);
+  --border-subtle-disabled: var(--color-slate-900);
+  --border-brand-subtle: var(--color-ocean-700);
+  --border-brand-subtle-hovered: var(--color-ocean-600);
+  --border-brand-subtle-pressed: var(--color-ocean-500);
+  --border-brand-subtle-disabled: var(--color-ocean-800);
+  --border-brand: var(--color-ocean-500);
+  --border-brand-hovered: var(--color-ocean-400);
+  --border-brand-pressed: var(--color-ocean-300);
+  --border-brand-disabled: var(--color-ocean-800);
+  --border-brand-strong: var(--color-ocean-300);
+  --border-brand-strong-hovered: var(--color-ocean-200);
+  --border-brand-strong-pressed: var(--color-ocean-100);
+  --border-brand-strong-disabled: var(--color-ocean-600);
+  --border-success: var(--color-emerald-700);
+  --border-success-hovered: var(--color-emerald-600);
+  --border-success-pressed: var(--color-emerald-500);
+  --border-success-disabled: var(--color-emerald-800);
+  --border-warning: var(--color-topaz-700);
+  --border-warning-hovered: var(--color-topaz-600);
+  --border-warning-pressed: var(--color-topaz-500);
+  --border-warning-disabled: var(--color-topaz-800);
+  --border-danger: var(--color-ruby-700);
+  --border-danger-hovered: var(--color-ruby-600);
+  --border-danger-pressed: var(--color-ruby-500);
+  --border-danger-disabled: var(--color-ruby-800);
+
+  /* Interaction */
+  --focus-ring: var(--color-ocean-400);
+}
+
+/* =============================================================================
+   3. TAILWIND THEME
+   ============================================================================= */
+
+/* Theming is a runtime variable swap, not a build-time variant, so `dark:` is
+   only here for consumers who reach for it. Components never use it. */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme inline {
+  /* Drop Tailwind's stock palette: a `bg-red-500` in component source is a
+     token that was never designed, so it should fail to compile. */
+  --color-*: initial;
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Background */
+  --color-bg-strong: var(--bg-strong);
+  --color-bg-strong-hovered: var(--bg-strong-hovered);
+  --color-bg-strong-pressed: var(--bg-strong-pressed);
+  --color-bg-strong-disabled: var(--bg-strong-disabled);
+  --color-bg-normal: var(--bg-normal);
+  --color-bg-normal-hovered: var(--bg-normal-hovered);
+  --color-bg-normal-pressed: var(--bg-normal-pressed);
+  --color-bg-normal-disabled: var(--bg-normal-disabled);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-bg-subtle-hovered: var(--bg-subtle-hovered);
+  --color-bg-subtle-pressed: var(--bg-subtle-pressed);
+  --color-bg-subtle-disabled: var(--bg-subtle-disabled);
+  --color-bg-brand-subtle: var(--bg-brand-subtle);
+  --color-bg-brand-subtle-hovered: var(--bg-brand-subtle-hovered);
+  --color-bg-brand-subtle-pressed: var(--bg-brand-subtle-pressed);
+  --color-bg-brand-subtle-disabled: var(--bg-brand-subtle-disabled);
+  --color-bg-brand: var(--bg-brand);
+  --color-bg-brand-hovered: var(--bg-brand-hovered);
+  --color-bg-brand-pressed: var(--bg-brand-pressed);
+  --color-bg-brand-disabled: var(--bg-brand-disabled);
+  --color-bg-brand-strong: var(--bg-brand-strong);
+  --color-bg-brand-strong-hovered: var(--bg-brand-strong-hovered);
+  --color-bg-brand-strong-pressed: var(--bg-brand-strong-pressed);
+  --color-bg-brand-strong-disabled: var(--bg-brand-strong-disabled);
+  --color-bg-success-subtle: var(--bg-success-subtle);
+  --color-bg-success-subtle-hovered: var(--bg-success-subtle-hovered);
+  --color-bg-success-subtle-pressed: var(--bg-success-subtle-pressed);
+  --color-bg-success-subtle-disabled: var(--bg-success-subtle-disabled);
+  --color-bg-success: var(--bg-success);
+  --color-bg-success-hovered: var(--bg-success-hovered);
+  --color-bg-success-pressed: var(--bg-success-pressed);
+  --color-bg-success-disabled: var(--bg-success-disabled);
+  --color-bg-success-strong: var(--bg-success-strong);
+  --color-bg-success-strong-hovered: var(--bg-success-strong-hovered);
+  --color-bg-success-strong-pressed: var(--bg-success-strong-pressed);
+  --color-bg-success-strong-disabled: var(--bg-success-strong-disabled);
+  --color-bg-warning-subtle: var(--bg-warning-subtle);
+  --color-bg-warning-subtle-hovered: var(--bg-warning-subtle-hovered);
+  --color-bg-warning-subtle-pressed: var(--bg-warning-subtle-pressed);
+  --color-bg-warning-subtle-disabled: var(--bg-warning-subtle-disabled);
+  --color-bg-warning: var(--bg-warning);
+  --color-bg-warning-hovered: var(--bg-warning-hovered);
+  --color-bg-warning-pressed: var(--bg-warning-pressed);
+  --color-bg-warning-disabled: var(--bg-warning-disabled);
+  --color-bg-warning-strong: var(--bg-warning-strong);
+  --color-bg-warning-strong-hovered: var(--bg-warning-strong-hovered);
+  --color-bg-warning-strong-pressed: var(--bg-warning-strong-pressed);
+  --color-bg-warning-strong-disabled: var(--bg-warning-strong-disabled);
+  --color-bg-danger-subtle: var(--bg-danger-subtle);
+  --color-bg-danger-subtle-hovered: var(--bg-danger-subtle-hovered);
+  --color-bg-danger-subtle-pressed: var(--bg-danger-subtle-pressed);
+  --color-bg-danger-subtle-disabled: var(--bg-danger-subtle-disabled);
+  --color-bg-danger: var(--bg-danger);
+  --color-bg-danger-hovered: var(--bg-danger-hovered);
+  --color-bg-danger-pressed: var(--bg-danger-pressed);
+  --color-bg-danger-disabled: var(--bg-danger-disabled);
+  --color-bg-danger-strong: var(--bg-danger-strong);
+  --color-bg-danger-strong-hovered: var(--bg-danger-strong-hovered);
+  --color-bg-danger-strong-pressed: var(--bg-danger-strong-pressed);
+  --color-bg-danger-strong-disabled: var(--bg-danger-strong-disabled);
+  --color-bg-overlay: var(--bg-overlay);
+
+  /* Foreground */
+  --color-fg-strong: var(--fg-strong);
+  --color-fg-strong-hovered: var(--fg-strong-hovered);
+  --color-fg-strong-pressed: var(--fg-strong-pressed);
+  --color-fg-strong-disabled: var(--fg-strong-disabled);
+  --color-fg-on-strong: var(--fg-on-strong);
+  --color-fg-on-strong-hovered: var(--fg-on-strong-hovered);
+  --color-fg-on-strong-pressed: var(--fg-on-strong-pressed);
+  --color-fg-on-strong-disabled: var(--fg-on-strong-disabled);
+  --color-fg-normal: var(--fg-normal);
+  --color-fg-normal-hovered: var(--fg-normal-hovered);
+  --color-fg-normal-pressed: var(--fg-normal-pressed);
+  --color-fg-normal-disabled: var(--fg-normal-disabled);
+  --color-fg-subtle: var(--fg-subtle);
+  --color-fg-subtle-hovered: var(--fg-subtle-hovered);
+  --color-fg-subtle-pressed: var(--fg-subtle-pressed);
+  --color-fg-subtle-disabled: var(--fg-subtle-disabled);
+  --color-fg-brand: var(--fg-brand);
+  --color-fg-brand-hovered: var(--fg-brand-hovered);
+  --color-fg-brand-pressed: var(--fg-brand-pressed);
+  --color-fg-brand-disabled: var(--fg-brand-disabled);
+  --color-fg-on-brand-subtle: var(--fg-on-brand-subtle);
+  --color-fg-on-brand-subtle-hovered: var(--fg-on-brand-subtle-hovered);
+  --color-fg-on-brand-subtle-pressed: var(--fg-on-brand-subtle-pressed);
+  --color-fg-on-brand-subtle-disabled: var(--fg-on-brand-subtle-disabled);
+  --color-fg-on-brand: var(--fg-on-brand);
+  --color-fg-on-brand-hovered: var(--fg-on-brand-hovered);
+  --color-fg-on-brand-pressed: var(--fg-on-brand-pressed);
+  --color-fg-on-brand-disabled: var(--fg-on-brand-disabled);
+  --color-fg-on-brand-strong: var(--fg-on-brand-strong);
+  --color-fg-on-brand-strong-hovered: var(--fg-on-brand-strong-hovered);
+  --color-fg-on-brand-strong-pressed: var(--fg-on-brand-strong-pressed);
+  --color-fg-on-brand-strong-disabled: var(--fg-on-brand-strong-disabled);
+  --color-fg-success: var(--fg-success);
+  --color-fg-success-hovered: var(--fg-success-hovered);
+  --color-fg-success-pressed: var(--fg-success-pressed);
+  --color-fg-success-disabled: var(--fg-success-disabled);
+  --color-fg-on-success-subtle: var(--fg-on-success-subtle);
+  --color-fg-on-success-subtle-hovered: var(--fg-on-success-subtle-hovered);
+  --color-fg-on-success-subtle-pressed: var(--fg-on-success-subtle-pressed);
+  --color-fg-on-success-subtle-disabled: var(--fg-on-success-subtle-disabled);
+  --color-fg-on-success: var(--fg-on-success);
+  --color-fg-on-success-hovered: var(--fg-on-success-hovered);
+  --color-fg-on-success-pressed: var(--fg-on-success-pressed);
+  --color-fg-on-success-disabled: var(--fg-on-success-disabled);
+  --color-fg-warning: var(--fg-warning);
+  --color-fg-warning-hovered: var(--fg-warning-hovered);
+  --color-fg-warning-pressed: var(--fg-warning-pressed);
+  --color-fg-warning-disabled: var(--fg-warning-disabled);
+  --color-fg-on-warning-subtle: var(--fg-on-warning-subtle);
+  --color-fg-on-warning-subtle-hovered: var(--fg-on-warning-subtle-hovered);
+  --color-fg-on-warning-subtle-pressed: var(--fg-on-warning-subtle-pressed);
+  --color-fg-on-warning-subtle-disabled: var(--fg-on-warning-subtle-disabled);
+  --color-fg-on-warning: var(--fg-on-warning);
+  --color-fg-on-warning-hovered: var(--fg-on-warning-hovered);
+  --color-fg-on-warning-pressed: var(--fg-on-warning-pressed);
+  --color-fg-on-warning-disabled: var(--fg-on-warning-disabled);
+  --color-fg-danger: var(--fg-danger);
+  --color-fg-danger-hovered: var(--fg-danger-hovered);
+  --color-fg-danger-pressed: var(--fg-danger-pressed);
+  --color-fg-danger-disabled: var(--fg-danger-disabled);
+  --color-fg-on-danger-subtle: var(--fg-on-danger-subtle);
+  --color-fg-on-danger-subtle-hovered: var(--fg-on-danger-subtle-hovered);
+  --color-fg-on-danger-subtle-pressed: var(--fg-on-danger-subtle-pressed);
+  --color-fg-on-danger-subtle-disabled: var(--fg-on-danger-subtle-disabled);
+  --color-fg-on-danger: var(--fg-on-danger);
+  --color-fg-on-danger-hovered: var(--fg-on-danger-hovered);
+  --color-fg-on-danger-pressed: var(--fg-on-danger-pressed);
+  --color-fg-on-danger-disabled: var(--fg-on-danger-disabled);
+
+  /* Border */
+  --color-border-strong: var(--border-strong);
+  --color-border-strong-hovered: var(--border-strong-hovered);
+  --color-border-strong-pressed: var(--border-strong-pressed);
+  --color-border-strong-disabled: var(--border-strong-disabled);
+  --color-border-normal: var(--border-normal);
+  --color-border-normal-hovered: var(--border-normal-hovered);
+  --color-border-normal-pressed: var(--border-normal-pressed);
+  --color-border-normal-disabled: var(--border-normal-disabled);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-subtle-hovered: var(--border-subtle-hovered);
+  --color-border-subtle-pressed: var(--border-subtle-pressed);
+  --color-border-subtle-disabled: var(--border-subtle-disabled);
+  --color-border-brand-subtle: var(--border-brand-subtle);
+  --color-border-brand-subtle-hovered: var(--border-brand-subtle-hovered);
+  --color-border-brand-subtle-pressed: var(--border-brand-subtle-pressed);
+  --color-border-brand-subtle-disabled: var(--border-brand-subtle-disabled);
+  --color-border-brand: var(--border-brand);
+  --color-border-brand-hovered: var(--border-brand-hovered);
+  --color-border-brand-pressed: var(--border-brand-pressed);
+  --color-border-brand-disabled: var(--border-brand-disabled);
+  --color-border-brand-strong: var(--border-brand-strong);
+  --color-border-brand-strong-hovered: var(--border-brand-strong-hovered);
+  --color-border-brand-strong-pressed: var(--border-brand-strong-pressed);
+  --color-border-brand-strong-disabled: var(--border-brand-strong-disabled);
+  --color-border-success: var(--border-success);
+  --color-border-success-hovered: var(--border-success-hovered);
+  --color-border-success-pressed: var(--border-success-pressed);
+  --color-border-success-disabled: var(--border-success-disabled);
+  --color-border-warning: var(--border-warning);
+  --color-border-warning-hovered: var(--border-warning-hovered);
+  --color-border-warning-pressed: var(--border-warning-pressed);
+  --color-border-warning-disabled: var(--border-warning-disabled);
+  --color-border-danger: var(--border-danger);
+  --color-border-danger-hovered: var(--border-danger-hovered);
+  --color-border-danger-pressed: var(--border-danger-pressed);
+  --color-border-danger-disabled: var(--border-danger-disabled);
+
+  /* Interaction */
+  --color-focus-ring: var(--focus-ring);
+
+  /* Stacking order. Named tokens only — never a raw `z-[n]`. */
+  --z-index-content-sticky: 10;
+  --z-index-app-bar: 30;
+  --z-index-sheet: 50;
+  --z-index-popover: 60;
+  --z-index-modal: 70;
+  --z-index-toast: 9999;
+
+  /* Overlay enter/exit pairs, selected by `data-state`. */
+  --animate-fade-in: fade-in 200ms ease-out forwards;
+  --animate-fade-out: fade-out 200ms ease-out forwards;
+  --animate-fade-in-slow: fade-in 300ms ease-out forwards;
+  --animate-fade-out-slow: fade-out 300ms ease-out forwards;
+  --animate-slide-up-in: slide-up-in 200ms ease-out forwards;
+  --animate-slide-up-out: slide-up-out 200ms ease-out forwards;
+  --animate-slide-right-in: slide-right-in 200ms ease-out forwards;
+  --animate-slide-right-out: slide-right-out 200ms ease-out forwards;
+  --animate-slide-left-in: slide-left-in 200ms ease-out forwards;
+  --animate-slide-left-out: slide-left-out 200ms ease-out forwards;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes slide-up-in {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  @keyframes slide-up-out {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+  @keyframes slide-right-in {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes slide-right-out {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes slide-left-in {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes slide-left-out {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+}
+
+/* =============================================================================
+   4. BASE LAYER
+   ============================================================================= */
+
+/* Not app styling — each of these is something the components depend on. */
+@layer base {
+  /* Tailwind's preflight defaults border-color to currentColor, so any component
+     using a bare `border` would take its border from the text colour. */
+  * {
+    @apply border-border-normal;
+  }
+
+  /* Twenty components have no focus style of their own and rely on this. */
+  :focus-visible {
+    @apply outline-hidden ring-2 ring-focus-ring ring-offset-2 ring-offset-bg-normal;
+  }
+
+  /* Honored globally rather than per component, so every animation the system
+     ships inherits it. `!important` is the point: it has to beat the animation
+     utilities on the elements themselves. */
+  @media (prefers-reduced-motion: reduce) {
+    /* biome-ignore-start lint/complexity/noImportantStyles: overriding utility-level animations is the intent */
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+    /* biome-ignore-end lint/complexity/noImportantStyles: overriding utility-level animations is the intent */
+  }
+}