@sixthshift/design-system 0.5.0 → 0.7.0

package/src/theme/tokens.css

@@ -1,824 +0,0 @@
-/**
- * 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 */
-  }
-}