@djangocfg/ui-core 2.1.460 → 2.1.463

package/src/styles/presets/types.ts

@@ -1,140 +1,9 @@
 /**
- * Theme preset types — lives in ui-core so Wails, Electron, and any
- * non-Next.js consumer can use presets without pulling in @djangocfg/layouts.
- */
-
-/**
- * Core semantic colors — **fully-wrapped CSS colors** (`hsl(...)`, `oklch(...)`, `#rrggbb`, …).
+ * Names of the static CSS presets shipped by ui-core.
  *
- * Required by the `@theme inline { --color-X: var(--X); }` shape so Tailwind's
- * opacity modifier (`bg-card/40`) can resolve through `color-mix`. Bare HSL
- * triplets (`240 17% 97%`) silently break every opacity modifier — they used
- * to work via a manual `hsl(var(--X))` wrapper in tokens.css; that wrapper is
- * gone after the v4 refactor. Same rule for `border` / `ring` / `chart-*` /
- * `sidebar-*` (every color-typed key). `radius` + typography keys stay raw.
- */
-export type ThemeCssVarColorKey =
-  | 'background'
-  | 'foreground'
-  | 'card'
-  | 'card-foreground'
-  | 'popover'
-  | 'popover-foreground'
-  | 'primary'
-  | 'primary-foreground'
-  | 'secondary'
-  | 'secondary-foreground'
-  | 'muted'
-  | 'muted-foreground'
-  | 'accent'
-  | 'accent-foreground'
-  | 'destructive'
-  | 'destructive-foreground';
-
-/**
- * Layout / focus tokens — `radius` is a CSS length, the rest are wrapped colors.
- * `divider` is the hairline-between-rows token (deliberately *lighter* than
- * `--card` so it stays visible on elevated surfaces — see styles README).
- * `overlay` is the modal scrim behind dialogs/drawers/sheets — a wrapped color
- * that OWNS its own opacity (`hsl(0 0% 0% / 0.55)`). Brand presets that set a
- * custom `background` should set `overlay` too: on a near-black canvas the base
- * 0.6/0.7 scrim crushes the backdrop flat and the dialog can't lift off it.
- */
-export type ThemeCssVarChromeKey = 'border' | 'input' | 'divider' | 'overlay' | 'ring' | 'radius';
-
-/**
- * Status surfaces — each role has a 4-token set (icon/accent, banner background,
- * readable foreground, border ring) used by banners/alerts. Presets with a
- * custom `background` should re-tint these so banners don't clash with the
- * canvas; presets that keep the default canvas can omit them. All are
- * **fully-wrapped CSS colors** (same rule as `ThemeCssVarColorKey`).
- *
- * `*-foreground` = status TEXT on the tinted `*-background` (banners).
- * `on-*` = readable text/icon ON the solid `*` fill (badges, pills, filled
- * chips) — a near-black/near-white contrast color, NOT the banner tint. The
- * base `on-*` (near-black) is safe for most fills; a preset only needs to set
- * `on-*` when it retints a fill DARK enough that near-black fails (e.g.
- * Fluent's dark light-mode green/blue → white ink).
- */
-export type ThemeCssVarStatusKey =
-  | 'warning'
-  | 'warning-background'
-  | 'warning-foreground'
-  | 'warning-border'
-  | 'success'
-  | 'success-background'
-  | 'success-foreground'
-  | 'success-border'
-  | 'destructive-background'
-  | 'destructive-border'
-  | 'info'
-  | 'info-background'
-  | 'info-foreground'
-  | 'info-border'
-  | 'on-success'
-  | 'on-warning'
-  | 'on-info'
-  | 'on-destructive';
-
-/**
- * Typography tokens — override system font stack and scale per preset.
- * Values are plain CSS (not HSL): font-family strings, rem lengths, unitless line-height, em letter-spacing.
- */
-export type ThemeCssVarTypographyKey =
-  | 'font-sans'
-  | 'font-mono'
-  | 'font-size-base'
-  | 'font-size-sm'
-  | 'font-size-xs'
-  | 'font-size-lg'
-  | 'font-size-xl'
-  | 'line-height-base'
-  | 'letter-spacing-base';
-
-export type ThemeCssVarSidebarKey =
-  | 'sidebar-background'
-  | 'sidebar-foreground'
-  | 'sidebar-primary'
-  | 'sidebar-primary-foreground'
-  | 'sidebar-accent'
-  | 'sidebar-accent-foreground'
-  | 'sidebar-border'
-  | 'sidebar-ring';
-
-/**
- * Categorical chart colors. **Fully-wrapped CSS colors** (`hsl(...)`) — same
- * rule as every color key. Consume via the Tailwind utility (`bg-chart-1`,
- * backed by `--color-chart-N` in tokens.css) or `var(--chart-N)`; never wrap as
- * `hsl(var(--chart-N))` (that double-wraps to `hsl(hsl(...))` and is invalid).
- */
-export type ThemeCssVarChartKey = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
-
-/** All keys that map to `--${key}` in ui-core CSS files */
-export type ThemeCssVarKey =
-  | ThemeCssVarColorKey
-  | ThemeCssVarChromeKey
-  | ThemeCssVarStatusKey
-  | ThemeCssVarTypographyKey
-  | ThemeCssVarSidebarKey
-  | ThemeCssVarChartKey;
-
-/** Partial map of semantic variables for one color mode */
-export type ThemeCssVarMap = Partial<Record<ThemeCssVarKey, string>>;
-
-/**
- * Built-in preset IDs.
- *
- * Two families:
- *   - Brand / OS-native: default, django-cfg, ios, macos, windows
- *     (pixel-accurate Apple HIG / Microsoft Fluent tokens — useful for
- *     Wails/Electron desktop and mobile web).
- *   - Density / accessibility: soft (radius 1rem), dense (0.25rem),
- *     high-contrast (a11y).
- *
- * The earlier code-editor vibe palette (catppuccin / dracula / github /
- * gruvbox / material / nord / one-dark / solarized / tokyo-night) was
- * removed in May 2026 — those are for IDE skins, not admin/desktop UI.
- * Re-add a preset only when a real product needs it.
+ * Preset tokens are intentionally not represented as TypeScript maps. CSS is
+ * the single source of truth and consumers select a preset with a stylesheet
+ * import, e.g. `@djangocfg/ui-core/styles/presets/macos`.
  */
 export type ThemeStylePresetId =
   | 'default'
@@ -145,16 +14,3 @@ export type ThemeStylePresetId =
   | 'soft'
   | 'dense'
   | 'high-contrast';
-
-/**
- * Optional style layer: named preset + per-mode overrides.
- * Merged: globals (CSS imports) → preset → vars.light / vars.dark
- */
-export interface ThemeStyleConfig {
-  /** @default 'default' */
-  preset?: ThemeStylePresetId;
-  vars?: {
-    light?: ThemeCssVarMap;
-    dark?: ThemeCssVarMap;
-  };
-}

package/src/theme/README.md

@@ -1,85 +1,57 @@
-# Theme — providers, switches, and forced themes
+# Theme runtime
 
-The runtime side of the design system. `styles/` ships the **tokens** (CSS
-variables) and the Tailwind utilities that read them; `theme/` is the **React**
-layer that decides *which* token set is live (light / dark / a preset) and lets
-you switch or pin it.
+`@djangocfg/ui-core` separates static design tokens from runtime mode
+selection:
 
-> Read [`../styles/README.md`](../styles/README.md) first for the **token
-> contract** — it is load-bearing for everything here. The one rule that bites:
-> **base tokens are full CSS colors (`hsl(...)`), never bare triplets.**
+- `@djangocfg/ui-core/styles/css/` owns all CSS tokens and presets.
+- `ThemeProvider` owns the `html.dark` class and light/dark preference.
+- `ThemeOverride` temporarily changes that class for a route.
+- `ForceTheme` is only for a genuinely opposite-theme subtree.
 
-## Exports
+Select a preset in the host stylesheet, after the golden-path styles:
 
-| Export | What it does |
-|---|---|
-| `ThemeProvider` / `useThemeContext` | Wraps `next-themes`. Owns the `html.dark` class + the user's light/dark/system choice. Mount once at the app root (via `BaseApp` in `@djangocfg/layouts`, which mounts it for you). |
-| `ThemeToggle` | A light/dark toggle button. |
-| `ThemeSegmented` | A segmented light/dark/system control. |
-| `ThemeOverride` | **Pathname-aware forced theme.** Mutates the real `next-themes` value while the route matches a rule, restores the user's pick when it leaves. Globs (`*`, `**`) supported. This is the **correct** way to force a route's theme. |
-| `resolveForcedTheme` | Pure helper — first matching rule → forced theme (or `null`). Pair with `ForcedThemeProvider`. |
-| `ForcedThemeProvider` / `useForcedTheme` | Lets descendants read the currently-forced theme. |
-| `ForceTheme` | **Scoped, inline-var theme for a subtree.** A `<div class={theme}>` that re-declares the token vars inline. Use sparingly — see the trap below. |
+```css
+@import "@djangocfg/ui-core/styles/full";
+@import "@djangocfg/ui-core/styles/presets/macos";
+```
 
-## Choosing: `ThemeOverride` vs `ForceTheme`
+There is no runtime preset injection, token builder, or `ThemeStyleBridge`.
+Navigation, hydration, lazy chunks, CDN revalidation, and system preference
+changes cannot remove or replace the product palette.
 
-They look similar; they are not interchangeable.
+## Exports
+
+| Export | Responsibility |
+|---|---|
+| `ThemeProvider` / `useThemeContext` | `next-themes` wrapper; owns `.dark` and light/dark/system preference. |
+| `ThemeToggle` | Light/dark toggle. |
+| `ThemeSegmented` | Light/dark/system control. |
+| `ThemeOverride` | Route-aware light/dark override using the real provider. |
+| `resolveForcedTheme` | Pure route-rule matcher. |
+| `ForcedThemeProvider` / `useForcedTheme` | Context for a currently forced mode. |
+| `ForceTheme` | Last-resort scoped subtree override with valid full-color tokens. |
 
-| | `ThemeOverride` (preferred) | `ForceTheme` (last resort) |
-|---|---|---|
-| How | mutates the real `next-themes` value → toggles `html.dark` | wraps children in `<div class={theme} style={inline vars}>` |
-| Scope | the **whole app** while the route matches | just that **subtree** |
-| Tokens | the real preset/`theme.css` tokens cascade — **always valid** | re-declares a hardcoded token map inline |
-| Active preset | **respected** (macos/ios/django-cfg/…) | **ignored** — ships its own generic palette |
-| Risk | none | bare-triplet trap (below); also overrides your brand accent |
+## Choosing a runtime mode
 
-**Default to `ThemeOverride`** for "this route is always dark" (the common case —
-a marketing landing, a docs section). It's how the cmdop site forces its homepage
-dark:
+Use `ThemeOverride` when a complete route must be dark or light:
 
 ```tsx
-// in the app shell (RootAppLayout)
 <BaseApp theme={{ defaultTheme: 'dark' }}>
-  <ThemeOverride pathname={pathnameWithoutLocale} rules={[{ path: '/', theme: 'dark' }]} />
+  <ThemeOverride pathname={pathname} rules={[{ path: '/', theme: 'dark' }]} />
   {children}
 </BaseApp>
 ```
 
-Reach for `ForceTheme` **only** when you need a single subtree in the opposite
-theme of the rest of the page (e.g. a dark preview card on a light page) and you
-cannot drive it through the router.
+Use `ForceTheme` only when one subtree must differ from the surrounding page.
+It is not a preset selector and does not replace the host CSS import.
 
-## ⚠️ The `ForceTheme` bare-triplet trap
+## Token rule
 
-`ForceTheme` re-declares tokens inline. Under the **Tailwind v4 token contract**,
-base tokens are **full colors** and the utilities read them raw:
+Every color variable must be a complete CSS color:
 
 ```css
-.bg-muted    { background-color: var(--muted); }
-.border-border { border-color: var(--border); }
+--muted: hsl(240 3% 11%); /* valid */
 ```
 
-So a token set to a **bare HSL triplet** is a broken color:
-
-```css
---muted: 0 0% 10%;     /* ❌ var(--muted) → "0 0% 10%" → not a color → declaration dropped */
---muted: hsl(0 0% 10%);/* ✅ valid color */
-```
-
-The failure is **silent and confusing**: inside the `ForceTheme` subtree
-`bg-muted` renders **transparent** and `border-border` renders the inherited
-fallback (≈ white), while `border-divider` (a token `ForceTheme` doesn't
-re-declare) still works — so it looks like "random borders are white and some
-fills vanished." It is NOT a Tailwind content-scan problem; the utilities exist,
-their *input* is invalid. Full write-up + how to diagnose:
-[`TROUBLESHOOTING.md`](TROUBLESHOOTING.md).
-
-`ForceTheme`'s token map is wrapped in `hsl(...)` as of this version, so the trap
-is closed for the values it ships. But the lesson stands for **any** inline token
-override you write: wrap in `hsl(...)`, or prefer `ThemeOverride` so the real
-(already-valid) preset tokens cascade and you never hand-maintain a palette.
-
-## Maintenance rule
-
-After changing a component or the token map here, update this README and bump the
-package patch version (consumers pin npm versions; this file is the changelog).
+Never use a bare HSL triplet such as `240 3% 11%`; Tailwind consumes semantic
+variables directly and the browser will drop invalid color declarations.

package/src/theme/TROUBLESHOOTING.md

@@ -2,6 +2,10 @@
 
 Symptom-first. Each entry: what you see → why → the fix.
 
+The product palette is static CSS imported from `styles/presets/*`. The React
+theme layer only changes `.dark`; if the palette is missing, inspect the CSS
+import/export path before debugging React state or localStorage.
+
 ---
 
 ## "Random white borders + transparent fills on part of the page"

package/src/styles/presets/build.ts

@@ -1,64 +0,0 @@
-import type { ThemeCssVarMap, ThemeStyleConfig, ThemeStylePresetId } from './types';
-import { THEME_STYLE_PRESETS } from './presets';
-
-function mergeLayer(base: ThemeCssVarMap | undefined, over: ThemeCssVarMap | undefined): ThemeCssVarMap {
-  return { ...base, ...over };
-}
-
-/**
- * Tailwind v4 `rounded-*` utilities are backed by `--radius-*` scale variables.
- * When semantic `radius` is present, emit the derived scale too.
- */
-function withTailwindRadiusScale(vars: ThemeCssVarMap): Array<[string, string]> {
-  const entries = Object.entries(vars);
-  const radius = vars.radius;
-  if (!radius) return entries;
-
-  const r = String(radius).trim();
-  if (!r) return entries;
-
-  const scale: Array<[string, string]> = [
-    ['radius-xs', `calc(${r} - 6px)`],
-    ['radius-sm', `calc(${r} - 4px)`],
-    ['radius-md', `calc(${r} - 2px)`],
-    ['radius-lg', r],
-    ['radius-xl', `calc(${r} + 4px)`],
-    ['radius-2xl', `calc(${r} + 8px)`],
-    ['radius-3xl', `calc(${r} + 12px)`],
-    ['radius-4xl', `calc(${r} + 16px)`],
-  ];
-
-  return [...entries, ...scale];
-}
-
-/**
- * Build a stylesheet fragment: preset → vars.light / vars.dark.
- * Inject this after globals (later rule wins).
- */
-export function buildThemeStyleSheet(style?: ThemeStyleConfig): string {
-  if (!style) return '';
-
-  const presetId: ThemeStylePresetId = style.preset ?? 'default';
-  const preset = THEME_STYLE_PRESETS[presetId] ?? THEME_STYLE_PRESETS.default;
-
-  const light = mergeLayer(preset.light, style.vars?.light);
-  const dark = mergeLayer(preset.dark, style.vars?.dark);
-
-  const blocks: string[] = [];
-
-  if (Object.keys(light).length > 0) {
-    const body = withTailwindRadiusScale(light)
-      .map(([k, v]) => `  --${k}: ${v};`)
-      .join('\n');
-    blocks.push(`:root {\n${body}\n}`);
-  }
-
-  if (Object.keys(dark).length > 0) {
-    const body = withTailwindRadiusScale(dark)
-      .map(([k, v]) => `  --${k}: ${v};`)
-      .join('\n');
-    blocks.push(`.dark {\n${body}\n}`);
-  }
-
-  return blocks.join('\n\n');
-}

package/src/styles/presets/themes/default.ts

@@ -1,6 +0,0 @@
-import type { ThemePreset } from './types';
-
-export const defaultPreset: ThemePreset = {
-  light: {},
-  dark: {},
-};

package/src/styles/presets/themes/dense.ts

@@ -1,31 +0,0 @@
-/**
- * dense — density modifier (NOT a full color theme).
- *
- * Tight radius (0.25rem) + slightly stronger neutral chrome for data-heavy
- * admin tables/grids where rows need crisp separation. Overrides only neutral
- * surfaces (radius/border/input/divider/muted/card/accent) and inherits brand
- * colors from the active base/brand preset, so it composes with `django-cfg`.
- * Light and dark are symmetric.
- */
-import type { ThemePreset } from './types';
-
-export const densePreset: ThemePreset = {
-  light: {
-    radius: '0.25rem',
-    border: 'hsl(0 0% 82%)',
-    input: 'hsl(0 0% 82%)',
-    divider: 'hsl(0 0% 88%)',
-    muted: 'hsl(0 0% 94%)',
-    card: 'hsl(0 0% 100%)',
-    accent: 'hsl(0 0% 93%)',
-  },
-  dark: {
-    radius: '0.25rem',
-    border: 'hsl(0 0% 24%)',
-    input: 'hsl(0 0% 24%)',
-    divider: 'hsl(0 0% 46% / 0.18)',  // translucent hairline — dissolves into the page
-    muted: 'hsl(0 0% 12%)',
-    card: 'hsl(0 0% 10%)',
-    accent: 'hsl(0 0% 14%)',
-  },
-};

package/src/styles/presets/themes/django-cfg.ts

@@ -1,62 +0,0 @@
-/**
- * django-cfg brand preset.
- *
- * The default ui-core theme already uses the django-cfg cyan family, so this
- * preset is the *explicit, self-contained* brand declaration: it re-states the
- * full brand-bearing token set (primary, ring, accent wash, sidebar, charts,
- * info status) so the identity survives even when layered over a non-default
- * base, and tints the neutral hover/accent surfaces with a faint brand wash
- * instead of the base's pure grey.
- *
- * Brand cyan: #0989aa (light, `192 90% 35%`) / #00d9ff (dark, `189 100% 50%`).
- * Only color tokens are set — radius/typography inherit base so the brand can
- * be combined with `soft`/`dense` density modifiers downstream.
- */
-import type { ThemePreset } from './types';
-
-export const djangoCfgPreset: ThemePreset = {
-  light: {
-    primary: 'hsl(192 90% 35%)',
-    'primary-foreground': 'hsl(0 0% 100%)',
-    // Faint brand wash on hover/selected surfaces (vs base's neutral grey)
-    accent: 'hsl(192 60% 94%)',
-    'accent-foreground': 'hsl(192 90% 22%)',
-    ring: 'hsl(192 90% 40%)',
-    'sidebar-primary': 'hsl(192 90% 35%)',
-    'sidebar-primary-foreground': 'hsl(0 0% 100%)',
-    'sidebar-accent': 'hsl(192 55% 93%)',
-    'sidebar-accent-foreground': 'hsl(192 90% 22%)',
-    'sidebar-ring': 'hsl(192 90% 40%)',
-    // Info status routed to the brand hue so banners read as on-brand
-    info: 'hsl(192 90% 35%)',
-    'info-background': 'hsl(192 100% 96%)',
-    'info-foreground': 'hsl(192 90% 22%)',
-    'info-border': 'hsl(192 80% 78%)',
-    'chart-1': 'hsl(192 90% 35%)',
-    'chart-2': 'hsl(142 76% 36%)',
-    'chart-3': 'hsl(262 83% 58%)',
-    'chart-4': 'hsl(26 90% 57%)',
-    'chart-5': 'hsl(346 77% 50%)',
-  },
-  dark: {
-    primary: 'hsl(189 100% 50%)',
-    'primary-foreground': 'hsl(0 0% 9%)',
-    accent: 'hsl(189 40% 18%)',
-    'accent-foreground': 'hsl(189 100% 78%)',
-    ring: 'hsl(189 100% 50%)',
-    'sidebar-primary': 'hsl(189 100% 50%)',
-    'sidebar-primary-foreground': 'hsl(0 0% 9%)',
-    'sidebar-accent': 'hsl(189 35% 16%)',
-    'sidebar-accent-foreground': 'hsl(189 100% 78%)',
-    'sidebar-ring': 'hsl(189 100% 50%)',
-    info: 'hsl(189 100% 55%)',
-    'info-background': 'hsl(189 70% 10%)',
-    'info-foreground': 'hsl(189 90% 75%)',
-    'info-border': 'hsl(189 50% 28%)',
-    'chart-1': 'hsl(189 100% 50%)',
-    'chart-2': 'hsl(142 76% 50%)',
-    'chart-3': 'hsl(262 83% 65%)',
-    'chart-4': 'hsl(26 90% 60%)',
-    'chart-5': 'hsl(346 77% 58%)',
-  },
-};

package/src/styles/presets/themes/high-contrast.ts

@@ -1,35 +0,0 @@
-/**
- * high-contrast — accessibility modifier (NOT a full color theme).
- *
- * Pushes border/divider/text contrast to meet stronger WCAG ratios: harder
- * borders, darker (light) / brighter (dark) text, a stronger focus ring, and a
- * pure white / near-black canvas so foreground separation is maximal. Brand
- * colors (primary/charts/status) are inherited so the a11y boost stacks on top
- * of any base or brand preset. Light and dark are symmetric.
- */
-import type { ThemePreset } from './types';
-
-export const highContrastPreset: ThemePreset = {
-  light: {
-    background: 'hsl(0 0% 100%)',
-    foreground: 'hsl(0 0% 6%)',
-    card: 'hsl(0 0% 100%)',
-    'card-foreground': 'hsl(0 0% 6%)',
-    border: 'hsl(0 0% 62%)',
-    input: 'hsl(0 0% 62%)',
-    divider: 'hsl(0 0% 68%)',
-    'muted-foreground': 'hsl(0 0% 28%)',
-    ring: 'hsl(0 0% 12%)',
-  },
-  dark: {
-    background: 'hsl(0 0% 4%)',
-    foreground: 'hsl(0 0% 100%)',
-    card: 'hsl(0 0% 8%)',
-    'card-foreground': 'hsl(0 0% 100%)',
-    border: 'hsl(0 0% 48%)',
-    input: 'hsl(0 0% 48%)',
-    divider: 'hsl(0 0% 42%)',
-    'muted-foreground': 'hsl(0 0% 82%)',
-    ring: 'hsl(0 0% 92%)',
-  },
-};

package/src/styles/presets/themes/index.ts

@@ -1,24 +0,0 @@
-import type { ThemeStylePresetId } from '../types';
-import type { ThemePreset } from './types';
-
-import { defaultPreset } from './default';
-import { djangoCfgPreset } from './django-cfg';
-import { iosPreset } from './ios';
-import { macosPreset } from './macos';
-import { windowsPreset } from './windows';
-import { softPreset } from './soft';
-import { densePreset } from './dense';
-import { highContrastPreset } from './high-contrast';
-
-export type { ThemePreset };
-
-export const THEME_PRESETS: Record<ThemeStylePresetId, ThemePreset> = {
-  'default':        defaultPreset,
-  'django-cfg':     djangoCfgPreset,
-  'ios':            iosPreset,
-  'macos':          macosPreset,
-  'windows':        windowsPreset,
-  'soft':           softPreset,
-  'dense':          densePreset,
-  'high-contrast':  highContrastPreset,
-};

package/src/styles/presets/themes/ios.ts

@@ -1,114 +0,0 @@
-import type { ThemePreset } from './types';
-
-export const iosPreset: ThemePreset = {
-  light: {
-    background: 'hsl(0 0% 98%)',
-    foreground: 'hsl(220 9% 12%)',
-    card: 'hsl(0 0% 100%)',
-    'card-foreground': 'hsl(220 9% 12%)',
-    popover: 'hsl(0 0% 100%)',
-    'popover-foreground': 'hsl(220 9% 12%)',
-    primary: 'hsl(211 100% 50%)',
-    'primary-foreground': 'hsl(0 0% 100%)',
-    secondary: 'hsl(220 9% 92%)',
-    'secondary-foreground': 'hsl(220 9% 12%)',
-    muted: 'hsl(220 9% 94%)',
-    'muted-foreground': 'hsl(220 9% 40%)',
-    accent: 'hsl(220 9% 94%)',
-    'accent-foreground': 'hsl(220 9% 12%)',
-    destructive: 'hsl(0 100% 58%)',
-    'destructive-foreground': 'hsl(0 0% 100%)',
-    border: 'hsl(220 9% 85%)',   // nudged darker so outlines read on white cards
-    input: 'hsl(220 9% 88%)',
-    ring: 'hsl(211 100% 50%)',
-    divider: 'hsl(220 9% 88%)',  // hairline, a touch lighter than border
-    radius: '0.75rem',
-    // Modal scrim — light dim, iOS sheets keep the backdrop visible.
-    overlay: 'hsl(220 9% 10% / 0.32)',
-    'sidebar-background': 'hsl(0 0% 99%)',
-    'sidebar-foreground': 'hsl(220 9% 12%)',
-    'sidebar-primary': 'hsl(211 100% 50%)',
-    'sidebar-primary-foreground': 'hsl(0 0% 100%)',
-    'sidebar-accent': 'hsl(220 9% 94%)',
-    'sidebar-accent-foreground': 'hsl(220 9% 12%)',
-    'sidebar-border': 'hsl(220 9% 88%)',
-    'sidebar-ring': 'hsl(211 100% 50%)',
-    'chart-1': 'hsl(211 100% 50%)',
-    'chart-2': 'hsl(145 63% 42%)',
-    'chart-3': 'hsl(262 83% 58%)',
-    'chart-4': 'hsl(35 100% 50%)',
-    'chart-5': 'hsl(346 77% 50%)',
-    // Status surfaces — iOS system colors
-    warning: 'hsl(35 100% 50%)',
-    'warning-background': 'hsl(35 100% 95%)',
-    'warning-foreground': 'hsl(28 80% 30%)',
-    'warning-border': 'hsl(35 90% 78%)',
-    success: 'hsl(145 63% 42%)',
-    'success-background': 'hsl(145 60% 95%)',
-    'success-foreground': 'hsl(145 60% 24%)',
-    'success-border': 'hsl(145 55% 76%)',
-    'destructive-background': 'hsl(0 100% 96%)',
-    'destructive-border': 'hsl(0 90% 80%)',
-    info: 'hsl(211 100% 50%)',
-    'info-background': 'hsl(211 100% 96%)',
-    'info-foreground': 'hsl(211 80% 30%)',
-    'info-border': 'hsl(211 90% 80%)',
-  },
-  dark: {
-    background: 'hsl(240 6% 10%)',
-    foreground: 'hsl(0 0% 96%)',
-    // Lifted 14→16 for a clearer float off the dark page (see macos rationale).
-    card: 'hsl(240 6% 16%)',
-    'card-foreground': 'hsl(0 0% 96%)',
-    // Kept a distinct step above card.
-    popover: 'hsl(240 6% 20%)',
-    'popover-foreground': 'hsl(0 0% 96%)',
-    primary: 'hsl(211 100% 55%)',
-    'primary-foreground': 'hsl(0 0% 100%)',
-    secondary: 'hsl(240 5% 26%)',
-    'secondary-foreground': 'hsl(0 0% 96%)',
-    // Recessed surface — below the page (bg 10%) and below card (16%), so
-    // bg-muted rails/chips read as sunk, not level with the panel.
-    muted: 'hsl(240 5% 13%)',
-    'muted-foreground': 'hsl(240 5% 64%)',
-    accent: 'hsl(240 5% 18%)',
-    'accent-foreground': 'hsl(0 0% 96%)',
-    destructive: 'hsl(0 100% 67%)',
-    'destructive-foreground': 'hsl(0 0% 100%)',
-    border: 'hsl(240 5% 27%)',   // raised so outlines read on the dark page
-    input: 'hsl(240 5% 22%)',
-    ring: 'hsl(211 100% 55%)',
-    divider: 'hsl(240 5% 48% / 0.18)',  // translucent hairline — dissolves into the page
-    radius: '0.75rem',
-    // Modal scrim — lighter than base 0.7 so the dark page still reads behind.
-    overlay: 'hsl(0 0% 0% / 0.55)',
-    'sidebar-background': 'hsl(240 6% 8%)',
-    'sidebar-foreground': 'hsl(0 0% 96%)',
-    'sidebar-primary': 'hsl(211 100% 55%)',
-    'sidebar-primary-foreground': 'hsl(0 0% 100%)',
-    'sidebar-accent': 'hsl(240 5% 16%)',
-    'sidebar-accent-foreground': 'hsl(0 0% 96%)',
-    'sidebar-border': 'hsl(240 5% 22%)',
-    'sidebar-ring': 'hsl(211 100% 55%)',
-    'chart-1': 'hsl(211 100% 55%)',
-    'chart-2': 'hsl(145 65% 52%)',
-    'chart-3': 'hsl(262 83% 65%)',
-    'chart-4': 'hsl(35 100% 58%)',
-    'chart-5': 'hsl(346 77% 58%)',
-    // Status surfaces (dark)
-    warning: 'hsl(35 100% 58%)',
-    'warning-background': 'hsl(35 90% 10%)',
-    'warning-foreground': 'hsl(35 100% 72%)',
-    'warning-border': 'hsl(35 80% 28%)',
-    success: 'hsl(145 65% 52%)',
-    'success-background': 'hsl(145 60% 9%)',
-    'success-foreground': 'hsl(145 60% 70%)',
-    'success-border': 'hsl(145 50% 26%)',
-    'destructive-background': 'hsl(0 80% 11%)',
-    'destructive-border': 'hsl(0 70% 30%)',
-    info: 'hsl(211 100% 55%)',
-    'info-background': 'hsl(211 90% 11%)',
-    'info-foreground': 'hsl(211 100% 74%)',
-    'info-border': 'hsl(211 80% 30%)',
-  },
-};