@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/test/render.d.ts

@@ -7,5 +7,22 @@ import { RenderOptions } from "@testing-library/react";
  * top-level component sits on in a real app.
  */
 export declare function renderWithProviders(ui: React.ReactElement, options?: Omit<RenderOptions, "wrapper">): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+/**
+ * `waitFor` budget for a canvas that appears behind a lazy `import()` of the
+ * three.js / @react-three/fiber stack.
+ *
+ * 🔴 Not a magic number and not a papered-over failure: testing-library's
+ * default is 1000ms, which is sized for a React state flush, not for resolving
+ * and evaluating a 3D renderer chunk. `AIOrb.Liquid` mounts its canvas in
+ * ~590ms when its file runs alone and blew straight past 1000ms under
+ * full-suite load — a ~1-in-3 red gate whose only symptom was
+ * `expected null to be truthy`. The assertion is unchanged (no canvas ever =
+ * still a failure); this only stops the clock from being the thing under test.
+ * A passing run does not get slower — `waitFor` resolves the moment the
+ * condition holds.
+ */
+export declare const R3F_MOUNT_TIMEOUT: {
+    readonly timeout: 5000;
+};
 export { screen, within, waitFor, act, fireEvent } from "@testing-library/react";
 export { default as userEvent } from "@testing-library/user-event";

package/dist/theme.css

@@ -1,5 +1,9 @@
+/* NOTE: this file ships as dist/theme.css (copied verbatim by build:copy-css) and is
+   only ever consumed from there. Paths below are therefore resolved relative to dist/:
+   `../src/global.scss` = the shipped src/global.scss (package.json `files` ships src/global.scss
+   + src/styles), and `../dist` = the built components scanned for used classes. */
 @source "../dist";
-@import "./global.scss";
+@import "../src/global.scss";
 
 @theme {
   --font-weight-light: 300;

package/dist/themes/ember.css

@@ -0,0 +1,131 @@
+/* ============================================================
+   @flikk/ui — Ember theme
+   Coral/burnt-orange primary × Plus Jakarta Sans × pill geometry × zinc neutrals.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/ember.css";
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` MUST get an explicit `.dark` value below (this file is later in
+     source order, so its :root wins over styles.css's `.dark` otherwise).
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base var (see CLAUDE.md §3).
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — Tailwind v4 orange ramp (coral/terracotta accent) */
+    --color-primary-50: oklch(98% 0.016 73.684);
+    --color-primary-100: oklch(95.4% 0.038 75.164);
+    --color-primary-200: oklch(90.1% 0.076 70.697);
+    --color-primary-300: oklch(83.7% 0.128 66.29);
+    --color-primary-400: oklch(75% 0.183 55.934);
+    --color-primary-500: oklch(70.5% 0.213 47.604);
+    --color-primary-600: oklch(64.6% 0.222 41.116);
+    --color-primary-700: oklch(55.3% 0.195 38.402);
+    --color-primary-800: oklch(47% 0.157 37.304);
+    --color-primary-900: oklch(40.8% 0.123 38.172);
+    --color-primary-950: oklch(26.6% 0.079 36.259);
+    --color-primary: var(--color-primary-600);
+
+    /* Neutrals — Tailwind v4 zinc ramp (cool near-neutral cast; reads as the
+       dark navy-black used for filled badges/buttons/headings in the
+       reference dashboard). Dark text tokens reference these rungs by var(),
+       so dark picks the cast up too. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(96.7% 0.001 286.375);
+    --color-mono-200: oklch(92% 0.004 286.32);
+    --color-mono-300: oklch(87.1% 0.006 286.286);
+    --color-mono-400: oklch(70.5% 0.015 286.067);
+    --color-mono-500: oklch(55.2% 0.016 285.938);
+    --color-mono-600: oklch(44.2% 0.017 285.786);
+    --color-mono-700: oklch(37% 0.013 285.805);
+    --color-mono-800: oklch(27.4% 0.006 286.033);
+    --color-mono-900: oklch(21% 0.006 285.885);
+    --color-mono-950: oklch(14.1% 0.005 285.823);
+
+    /* Borders — zinc-tinted hairlines at the same lightness rungs as the
+       base theme's neutral borders (93% / 87% / 80%) */
+    --color-border: oklch(92% 0.004 286.32);
+    --color-border-secondary: oklch(87.1% 0.006 286.286);
+    --color-border-hover: oklch(80% 0.01 286);
+
+    /* Typography */
+    --font-family-base: "Plus Jakarta Sans", var(--font-sans);
+
+    /* Geometry — rounder, softer cards; every --*-radius derives from this */
+    --radius-base: 24px;
+
+    /* Taller, pill-leaning controls (base: 32/40/48). Buttons inherit via
+       --button-min-h-* = var(--form-min-h-*). */
+    --form-min-h-sm: 40px;
+    --form-min-h-md: 48px;
+    --form-min-h-lg: 56px;
+
+    /* Wider padding to suit the pill shape */
+    --form-px-sm: 16px;
+    --form-px-md: 20px;
+    --form-px-lg: 24px;
+    --button-px-sm: 18px;
+    --button-px-md: 22px;
+    --button-px-lg: 28px;
+    --button-icon-p-sm: 8px;
+    --button-icon-p-md: 10px;
+    --button-icon-p-lg: 12px;
+
+    /* Chip tier — grow badges/pills/tags/keycaps to match the spacious controls.
+       Radius rides --radius-base (24px → pill), so only padding is set here. */
+    --badge-px-sm: 8px;
+    --badge-px-md: 10px;
+    --badge-py-sm: 2px;
+    --badge-py-md: 4px;
+    --badge-pill-px-sm: 12px;
+    --badge-pill-px-md: 14px;
+    --pill-px-sm: 14px;
+    --pill-px-md: 14px;
+    --pill-px-lg: 18px;
+    --pill-py-sm: 4px;
+    --pill-py-md: 4px;
+    --pill-py-lg: 6px;
+    --tag-px-sm: 12px;
+    --tag-px-md: 12px;
+    --tag-pl-md: 14px;
+    --tag-py-sm: 4px;
+    --tag-py-md: 4px;
+    --kbd-px-sm: 8px;
+    --kbd-px-md: 10px;
+  }
+
+  .dark {
+    /* One step lighter on dark surfaces, matching Iris/Jade: orange-500 keeps
+       saturated white-on-coral legible without reading washy like -400 would
+       on a big filled button. */
+    --color-primary: var(--color-primary-500);
+
+    /* Zinc in light, NEUTRAL in dark. Mid/deep zinc rungs read violet-tinted
+       against the hueless dark surfaces (#171717…) — same judgment as
+       Iris's "slate reads navy" — so the whole dark ramp reverts to the base
+       hueless values; light keeps the cool zinc cast. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(97% 0 0);
+    --color-mono-200: oklch(92.2% 0 0);
+    --color-mono-300: oklch(87% 0 0);
+    --color-mono-400: oklch(70.8% 0 0);
+    --color-mono-500: oklch(55.6% 0 0);
+    --color-mono-600: oklch(43.9% 0 0);
+    --color-mono-700: oklch(37.1% 0 0);
+    --color-mono-800: oklch(26.9% 0 0);
+    --color-mono-900: oklch(20.5% 0 0);
+    --color-mono-950: oklch(14.5% 0 0);
+
+    /* Restated verbatim from styles.css .dark (see authoring rules above) */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.1);
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
+  }
+}

package/dist/themes/iris.css

@@ -0,0 +1,94 @@
+/* ============================================================
+   @flikk/ui — Iris theme
+   Indigo primary × Bricolage Grotesque × rounder geometry × slate neutrals.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/iris.css";
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` MUST get an explicit `.dark` value below (this file is later in
+     source order, so its :root wins over styles.css's `.dark` otherwise).
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base var (see CLAUDE.md §3).
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — Tailwind v4 indigo ramp */
+    --color-primary-50: oklch(96.2% 0.018 272.314);
+    --color-primary-100: oklch(93% 0.034 272.788);
+    --color-primary-200: oklch(87% 0.065 274.039);
+    --color-primary-300: oklch(78.5% 0.115 274.713);
+    --color-primary-400: oklch(67.3% 0.182 276.935);
+    --color-primary-500: oklch(58.5% 0.233 277.117);
+    --color-primary-600: oklch(51.1% 0.262 276.966);
+    --color-primary-700: oklch(45.7% 0.24 277.023);
+    --color-primary-800: oklch(39.8% 0.195 277.366);
+    --color-primary-900: oklch(35.9% 0.144 278.697);
+    --color-primary-950: oklch(25.7% 0.09 281.288);
+    --color-primary: var(--color-primary-600);
+
+    /* Neutrals — Tailwind v4 slate ramp (cool cast on text/fills; dark text
+       tokens reference these rungs by var(), so dark picks the cast up too) */
+    --color-mono-50: oklch(98.4% 0.003 247.858);
+    --color-mono-100: oklch(96.8% 0.007 247.896);
+    --color-mono-200: oklch(92.9% 0.013 255.508);
+    --color-mono-300: oklch(86.9% 0.022 252.894);
+    --color-mono-400: oklch(70.4% 0.04 256.788);
+    --color-mono-500: oklch(55.4% 0.046 257.417);
+    --color-mono-600: oklch(44.6% 0.043 257.281);
+    --color-mono-700: oklch(37.2% 0.044 257.287);
+    --color-mono-800: oklch(27.9% 0.041 260.031);
+    --color-mono-900: oklch(20.8% 0.042 265.755);
+    --color-mono-950: oklch(12.9% 0.042 264.695);
+
+    /* Borders — slate-tinted hairlines at the same lightness rungs as the
+       base theme's neutral borders (93% / 87% / 80%) */
+    --color-border: oklch(92.9% 0.013 255.508);
+    --color-border-secondary: oklch(86.9% 0.022 252.894);
+    --color-border-hover: oklch(80% 0.03 255);
+
+    /* Typography */
+    --font-family-base: "Bricolage Grotesque", var(--font-sans);
+
+    /* Geometry — rounder, friendlier; every --*-radius derives from this */
+    --radius-base: 16px;
+  }
+
+  .dark {
+    /* Hue ramps read one step lighter on dark surfaces: indigo-400 filled
+       controls keep white text via the auto -contrast formula */
+    --color-primary: var(--color-primary-400);
+
+    /* Slate in light, NEUTRAL in dark. Mid/deep slate rungs read navy against
+       the hueless dark surfaces (#171717…) — visible anywhere a component
+       legitimately paints from the ramp in dark (Button/Badge soft-neutral
+       fills, disabled text/fill tokens, …). The base theme itself makes this
+       call (dark text-secondary is hardcoded hueless: "slate was too blue").
+       So the whole dark ramp reverts to the base hueless values; light keeps
+       the slate cast. Text tokens need no pins — placeholder/muted alpha-derive
+       from text-primary, and the rest resolve through these rungs. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(97% 0 0);
+    --color-mono-200: oklch(92.2% 0 0);
+    --color-mono-300: oklch(87% 0 0);
+    --color-mono-400: oklch(70.8% 0 0);
+    --color-mono-500: oklch(55.6% 0 0);
+    --color-mono-600: oklch(43.9% 0 0);
+    --color-mono-700: oklch(37.1% 0 0);
+    --color-mono-800: oklch(26.9% 0 0);
+    --color-mono-900: oklch(20.5% 0 0);
+    --color-mono-950: oklch(14.5% 0 0);
+
+    /* Restated verbatim from styles.css .dark (see authoring rules above) —
+       the translucent light hairlines already carry a cool hue */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.1);
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
+  }
+}

package/dist/themes/jade.css

@@ -0,0 +1,139 @@
+/* ============================================================
+   @flikk/ui — Jade theme
+   Emerald primary × Poppins × pill geometry × warm stone neutrals.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/jade.css";
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` MUST get an explicit `.dark` value below (this file is later in
+     source order, so its :root wins over styles.css's `.dark` otherwise).
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base var (see CLAUDE.md §3).
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — Tailwind v4 emerald ramp */
+    --color-primary-50: oklch(97.9% 0.021 166.113);
+    --color-primary-100: oklch(95% 0.052 163.051);
+    --color-primary-200: oklch(90.5% 0.093 164.15);
+    --color-primary-300: oklch(84.5% 0.143 164.978);
+    --color-primary-400: oklch(76.5% 0.177 163.223);
+    --color-primary-500: oklch(69.6% 0.17 162.48);
+    --color-primary-600: oklch(59.6% 0.145 163.225);
+    --color-primary-700: oklch(50.8% 0.118 165.612);
+    --color-primary-800: oklch(43.2% 0.095 166.913);
+    --color-primary-900: oklch(37.8% 0.077 168.94);
+    --color-primary-950: oklch(26.2% 0.051 172.552);
+    --color-primary: var(--color-primary-600);
+
+    /* Neutrals — Tailwind v4 stone ramp (warm cast; jade-and-sandstone
+       pairing). Dark text tokens reference these rungs by var(), and
+       placeholder/muted alpha-derive from text-primary automatically. */
+    --color-mono-50: oklch(98.5% 0.001 106.423);
+    --color-mono-100: oklch(97% 0.001 106.424);
+    --color-mono-200: oklch(92.3% 0.003 48.717);
+    --color-mono-300: oklch(86.9% 0.005 56.366);
+    --color-mono-400: oklch(70.9% 0.01 56.259);
+    --color-mono-500: oklch(55.3% 0.013 58.071);
+    --color-mono-600: oklch(44.4% 0.011 73.639);
+    --color-mono-700: oklch(37.4% 0.01 67.558);
+    --color-mono-800: oklch(26.8% 0.007 34.298);
+    --color-mono-900: oklch(21.6% 0.006 56.043);
+    --color-mono-950: oklch(14.7% 0.004 49.25);
+
+    /* Borders — stone-tinted hairlines at the base lightness rungs
+       (93% / 87% / 80%) */
+    --color-border: oklch(92.3% 0.003 48.717);
+    --color-border-secondary: oklch(86.9% 0.005 56.366);
+    --color-border-hover: oklch(80% 0.008 56);
+
+    /* Typography — Poppins on a 14px-based text scale (--font-scale multiplies
+       the whole --text-* ramp, rounded to whole px; text-sm 12px, text-base
+       14px). Spacing and the px geometry tokens below are unaffected. */
+    --font-family-base: "Poppins", var(--font-sans);
+    --font-scale: 0.875;
+
+    /* Geometry — pill-leaning: at the taller control heights below, buttons
+       and inputs read as soft pills; cards round to 30px */
+    --radius-base: 20px;
+
+    /* Card padding — roomier to suit the taller, pill-leaning geometry */
+    --card-px: 32px;
+    --card-py: 32px;
+
+    /* Taller, comfier controls (base: 32/40/48). Buttons inherit via
+       --button-min-h-* = var(--form-min-h-*). */
+    --form-min-h-sm: 36px;
+    --form-min-h-md: 44px;
+    --form-min-h-lg: 52px;
+
+    /* Wider padding to suit the pill shape */
+    --form-px-sm: 14px;
+    --form-px-md: 18px;
+    --form-px-lg: 20px;
+    --button-px-sm: 16px;
+    --button-px-md: 20px;
+    --button-px-lg: 24px;
+    --button-icon-p-sm: 8px;
+    --button-icon-p-md: 10px;
+    --button-icon-p-lg: 12px;
+
+    /* Chip tier — grow badges/pills/tags/keycaps to match the taller controls.
+       Radius rides --radius-base (20px → pill), so only padding is set here. */
+    --badge-px-sm: 7px;
+    --badge-px-md: 9px;
+    --badge-py-sm: 1px;
+    --badge-py-md: 3px;
+    --badge-pill-px-sm: 11px;
+    --badge-pill-px-md: 13px;
+    --pill-px-sm: 13px;
+    --pill-px-md: 13px;
+    --pill-px-lg: 16px;
+    --pill-py-sm: 3px;
+    --pill-py-md: 3px;
+    --pill-py-lg: 5px;
+    --tag-px-sm: 11px;
+    --tag-px-md: 11px;
+    --tag-pl-md: 13px;
+    --tag-py-sm: 3px;
+    --tag-py-md: 3px;
+    --kbd-px-sm: 7px;
+    --kbd-px-md: 9px;
+  }
+
+  .dark {
+    /* One step lighter on dark surfaces. -500, not -400: the emerald ramp
+       runs light (400 = L 0.765) and the auto -contrast crossover would still
+       give it white text — washy on a big filled button. 500 keeps saturated
+       white-on-green legible. */
+    --color-primary: var(--color-primary-500);
+
+    /* Stone in light, NEUTRAL in dark. Warm stone rungs read muddy-brown
+       against the hueless dark surfaces (#171717…) — same judgment as Iris's
+       "slate reads navy" — so the whole dark ramp reverts to the base hueless
+       values; light keeps the warm cast. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(97% 0 0);
+    --color-mono-200: oklch(92.2% 0 0);
+    --color-mono-300: oklch(87% 0 0);
+    --color-mono-400: oklch(70.8% 0 0);
+    --color-mono-500: oklch(55.6% 0 0);
+    --color-mono-600: oklch(43.9% 0 0);
+    --color-mono-700: oklch(37.1% 0 0);
+    --color-mono-800: oklch(26.9% 0 0);
+    --color-mono-900: oklch(20.5% 0 0);
+    --color-mono-950: oklch(14.5% 0 0);
+
+    /* Restated verbatim from styles.css .dark (see authoring rules above) */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.1);
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
+  }
+}

package/dist/themes/precision.css

@@ -0,0 +1,232 @@
+/* ============================================================
+   @flikk/ui — Precision theme
+   Cobalt primary × IBM Plex × compact geometry × cool graphite surfaces.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/precision.css";
+
+   This preset intentionally changes tokens only. It is designed to make the
+   existing component set feel denser, quieter, and more instrument-like
+   without introducing component-specific selectors or changing markup.
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` gets an explicit `.dark` value below.
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base variable in styles.css.
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — precise cobalt blue. Saturated enough for small status and
+       focus details, but darker than a neon accent on large filled controls. */
+    --color-primary-50: oklch(97% 0.014 254.604);
+    --color-primary-100: oklch(93.2% 0.032 255.585);
+    --color-primary-200: oklch(88.2% 0.059 254.128);
+    --color-primary-300: oklch(80.9% 0.105 251.813);
+    --color-primary-400: oklch(70.7% 0.165 254.624);
+    --color-primary-500: oklch(62.3% 0.214 259.815);
+    --color-primary-600: oklch(54.6% 0.245 262.881);
+    --color-primary-700: oklch(48.8% 0.243 264.376);
+    --color-primary-800: oklch(42.4% 0.199 265.638);
+    --color-primary-900: oklch(37.9% 0.146 265.522);
+    --color-primary-950: oklch(28.2% 0.091 267.935);
+    --color-primary: var(--color-primary-600);
+
+    /* Cool graphite neutral ramp. The chroma is deliberately low: enough to
+       make the interface feel technical without turning every surface navy. */
+    --color-mono-50: oklch(98.4% 0.003 255);
+    --color-mono-100: oklch(96.8% 0.005 255);
+    --color-mono-200: oklch(92.4% 0.008 255);
+    --color-mono-300: oklch(86.8% 0.011 255);
+    --color-mono-400: oklch(70.6% 0.016 255);
+    --color-mono-500: oklch(55.4% 0.019 255);
+    --color-mono-600: oklch(44.5% 0.021 255);
+    --color-mono-700: oklch(36.8% 0.021 255);
+    --color-mono-800: oklch(26.6% 0.02 255);
+    --color-mono-900: oklch(19.8% 0.018 255);
+    --color-mono-950: oklch(12.4% 0.016 255);
+
+    /* Cooler canvas with crisp white working surfaces. The smaller tonal gap
+       keeps the page calm; elevation rings provide the panel definition. */
+    --surface-1: #f4f6f9;
+    --surface-2: #f8f9fb;
+    --surface-3: #ffffff;
+    --surface-4: #ffffff;
+    --surface-5: #ffffff;
+    --surface-6: #ffffff;
+    --surface-7: #ffffff;
+    --surface-8: #ffffff;
+    --color-surface-sunken: #edf0f4;
+    --color-surface-hover: oklch(25% 0.018 255 / 0.055);
+
+    /* Fine blue-graphite edges read more like instrument separators than
+       generic gray card outlines. */
+    --color-border: oklch(91.5% 0.01 255);
+    --color-border-secondary: oklch(84.5% 0.016 255);
+    --color-border-hover: oklch(72% 0.03 255);
+
+    /* Restrained categorical palette: cobalt leads, supporting series stay
+       cool or muted so semantic status colours retain their meaning. */
+    --color-chart-track: oklch(25% 0.018 255 / 0.07);
+    --color-chart-1: #3f6ff5;
+    --color-chart-2: #1da99a;
+    --color-chart-3: #8067d9;
+    --color-chart-4: #c98a2e;
+    --color-chart-5: #c95783;
+
+    /* IBM Plex supplies the engineered character without resorting to mono
+       everywhere. Existing font-mono utilities pick up Plex Mono. */
+    --font-family-base: "IBM Plex Sans", var(--font-sans);
+    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-scale: 0.9375;
+
+    /* The @import above ships Plex Sans at 400/500/600/700 only. The base
+       preset points --font-weight-light at 300 and --font-weight-extrabold at
+       800, neither of which this theme loads — the browser would synthesise
+       them, and synthetic weights in Plex read mushy at the small sizes this
+       theme leans on. Remap both onto real loaded weights. This is why the
+       weight tokens are themeable at all: the same numeral means a different
+       thing in every family. */
+    --font-weight-light: 400;
+    --font-weight-extrabold: 700;
+
+    /* Plex Sans is already a narrow, engineered face, so Tailwind's default
+       -0.025em over-tightens it at display sizes; back it off slightly. */
+    --tracking-tight: -0.015em;
+
+    /* Denser leading for display roles. Large numerals in a dashboard are read
+       as values, not prose — the extra leading the base preset gives them just
+       pushes surrounding chrome apart. */
+    --page-heading-title-line-height: 1.25;
+    --section-title-line-height: 1.35;
+    --metric-value-line-height-sm: 1.25;
+    --metric-value-line-height-md: 1.1;
+    --metric-value-line-height-lg: 1.1;
+    --kpi-value-line-height-sm: 1.25;
+    --kpi-value-line-height-md: 1.15;
+    --kpi-value-line-height-lg: 1.1;
+
+    /* Compact, controlled geometry. Surface-specific overrides keep content
+       panels slightly softer than controls while avoiding pill-like cards. */
+    --radius-base: 6px;
+    --card-radius: 10px;
+    --modal-radius: 12px;
+    --drawer-radius: 12px;
+    --metric-radius: 8px;
+    --dropdown-radius: 8px;
+    --popover-radius: 8px;
+    --codeblock-radius: 8px;
+    --alert-radius: 8px;
+    --toast-radius: 8px;
+
+    /* Denser control rhythm for dashboard and professional-tool layouts. */
+    --form-min-h-sm: 30px;
+    --form-min-h-md: 34px;
+    --form-min-h-lg: 38px;
+    --form-px-sm: 10px;
+    --form-px-md: 12px;
+    --form-px-lg: 14px;
+    --button-px-sm: 10px;
+    --button-px-md: 12px;
+    --button-px-lg: 14px;
+    --button-icon-p-sm: 6px;
+    --button-icon-p-md: 7px;
+    --button-icon-p-lg: 8px;
+
+    /* Tighten composed surfaces without making dense data illegible. */
+    --card-px: 20px;
+    --card-py: 20px;
+    --metric-content-p-sm: 10px;
+    --metric-content-p-md: 14px;
+    --metric-content-p-lg: 16px;
+
+    /* Slightly stronger display roles maintain hierarchy after reducing the
+       global type scale. */
+    --card-title-size: var(--text-base);
+    --page-heading-title-size: var(--text-2xl);
+    --metric-value-size-sm: var(--text-xl);
+    --metric-value-size-md: var(--text-3xl);
+    --metric-value-size-lg: var(--text-4xl);
+    --kpi-value-size-sm: var(--text-xl);
+    --kpi-value-size-md: var(--text-3xl);
+    --kpi-value-size-lg: var(--text-4xl);
+
+    /* Crisper elevation: a cool edge with less diffuse shadow than the base
+       preset. The existing elevation ladder continues to provide the shape. */
+    --elevation-shadow-color: rgb(15 23 42 / 0.075);
+    --overlay-bg: rgb(7 10 16 / 0.72);
+    --overlay-blur: 10px;
+    --shimmer-surface-highlight: color-mix(in srgb, #fff 48%, transparent);
+  }
+
+  .dark {
+    /* Blue-400 stays vivid on graphite while remaining controlled on large
+       filled surfaces. Auto contrast resolves the foreground. */
+    --color-primary: var(--color-primary-400);
+
+    /* Keep the graphite cast in dark mode instead of falling back to the
+       neutral base ramp. */
+    --color-mono-50: oklch(98.4% 0.003 255);
+    --color-mono-100: oklch(96.8% 0.005 255);
+    --color-mono-200: oklch(92.4% 0.008 255);
+    --color-mono-300: oklch(86.8% 0.011 255);
+    --color-mono-400: oklch(70.6% 0.016 255);
+    --color-mono-500: oklch(55.4% 0.019 255);
+    --color-mono-600: oklch(44.5% 0.021 255);
+    --color-mono-700: oklch(36.8% 0.021 255);
+    --color-mono-800: oklch(26.6% 0.02 255);
+    --color-mono-900: oklch(19.8% 0.018 255);
+    --color-mono-950: oklch(12.4% 0.016 255);
+
+    /* Graphite elevation ladder. Each rung remains visibly distinct without
+       the broad gray jumps of a conventional dark theme. */
+    --surface-1: #0c0f14;
+    --surface-2: #11151c;
+    --surface-3: #161b23;
+    --surface-4: #1b212b;
+    --surface-5: #202833;
+    --surface-6: #26303c;
+    --surface-7: #2c3745;
+    --surface-8: #333f4f;
+    --color-surface-sunken: #10141a;
+    --color-surface-hover: oklch(85% 0.03 255 / 0.08);
+
+    --color-text-primary: oklch(96.5% 0.006 255);
+    --color-text-secondary: oklch(77% 0.014 255);
+    --color-text-placeholder: color-mix(
+      in oklab,
+      var(--color-text-primary) 38%,
+      transparent
+    );
+    --color-text-muted: color-mix(
+      in oklab,
+      var(--color-text-primary) 52%,
+      transparent
+    );
+    --color-text-disabled: var(--color-mono-600);
+
+    --color-border: oklch(92% 0.02 255 / 0.07);
+    --color-border-secondary: oklch(92% 0.02 255 / 0.13);
+    --color-border-hover: oklch(92% 0.035 255 / 0.24);
+    --color-chart-track: oklch(92% 0.02 255 / 0.08);
+
+    /* Tune the base engine's dark elevation variables rather than replacing
+       its carefully layered shadows. */
+    --dm-hi-base: rgba(196, 218, 255, 0.015);
+    --dm-hi-mid: rgba(196, 218, 255, 0.025);
+    --dm-hi-high: rgba(196, 218, 255, 0.04);
+    --dm-hi-peak: rgba(196, 218, 255, 0.055);
+    --dm-ring-base: rgba(196, 218, 255, 0.025);
+    --dm-ring-mid: rgba(196, 218, 255, 0.045);
+    --dm-ring-high: rgba(196, 218, 255, 0.07);
+    --dm-drop: rgba(0, 0, 0, 0.24);
+    --overlay-bg: rgb(3 5 9 / 0.8);
+    --shimmer-surface-highlight: color-mix(in srgb, #bcd2ff 7%, transparent);
+  }
+}