@luxfi/ui 7.4.5 → 7.4.6

package/tokens.css

@@ -1,438 +1,732 @@
 /*
- * Design tokens — CSS custom properties
+ * @luxfi/ui — THE canonical token set.
  *
- * These mirror the Chakra semantic tokens defined in
- * toolkit/theme/foundations/semanticTokens.ts and
- * toolkit/theme/foundations/colors.ts (DEFAULT_THEME_COLORS).
+ * Lux is monochrome. One achromatic ladder, plus exactly two hues reserved for
+ * state (error, success). Nothing else carries colour: no orange, no amber, no
+ * gold, no tan. Every value below either IS a ladder rung or is `var()`-derived
+ * from one — so a hostname can retheme the fleet by overriding a handful of
+ * custom properties, with no rebuild.
  *
- * Light mode is the default (:root). Dark mode activates via .dark class
- * (applied by next-themes with the "class" strategy).
+ * Layers, in resolution order:
+ *   1. ladder      --lux-n-*     achromatic, hue-free (Tailwind `neutral`)
+ *   2. brand hooks --lux-accent  white-label-by-hostname overrides ONLY these
+ *   3. state       --lux-state-* the only permitted hues (error / success)
+ *   4. semantic    --color-*     what components actually name
+ *   5. aliases     shadcn (--background … --chart-*) so a Tailwind surface can
+ *                  drop its hand-rolled palette and import this instead
  *
- * Palette reference (true neutral grays):
- *   gray.50  = #FAFAFA    gray.500 = #737373
- *   gray.100 = #F5F5F5    gray.600 = #525252
- *   gray.200 = #E5E5E5    gray.700 = #404040
- *   gray.300 = #D4D4D4    gray.800 = #262626
- *   gray.400 = #A3A3A3    gray.900 = #171717
+ * Light mode is :root. Dark mode activates via `.dark` (next-themes class
+ * strategy) or [data-theme='dark'].
  *
- *   blackAlpha.50  = rgba(16,17,18,0.04)   whiteAlpha.50  = rgba(255,255,255,0.04)
- *   blackAlpha.100 = rgba(16,17,18,0.06)   whiteAlpha.100 = rgba(255,255,255,0.06)
- *   blackAlpha.200 = rgba(16,17,18,0.08)   whiteAlpha.200 = rgba(255,255,255,0.08)
- *   blackAlpha.300 = rgba(16,17,18,0.16)   whiteAlpha.300 = rgba(255,255,255,0.16)
- *   blackAlpha.400 = rgba(16,17,18,0.24)   whiteAlpha.400 = rgba(255,255,255,0.24)
- *   blackAlpha.500 = rgba(16,17,18,0.36)   whiteAlpha.500 = rgba(255,255,255,0.36)
- *   blackAlpha.600 = rgba(16,17,18,0.48)   whiteAlpha.600 = rgba(255,255,255,0.48)
- *   blackAlpha.700 = rgba(16,17,18,0.64)   whiteAlpha.700 = rgba(255,255,255,0.64)
- *   blackAlpha.800 = rgba(16,17,18,0.80)   whiteAlpha.800 = rgba(255,255,255,0.80)
- *   blackAlpha.900 = rgba(16,17,18,0.92)   whiteAlpha.900 = rgba(255,255,255,0.92)
+ * Rule: a component may not contain a colour literal. If a value is missing
+ * here, add it here.
  */
 
 /* ================================================================
-   LIGHT MODE (default)
+   1 — THE LADDER. Achromatic: R = G = B at every rung.
+   ================================================================ */
+:root {
+  --lux-n-0:    #FFFFFF;
+  --lux-n-50:   #FAFAFA;
+  --lux-n-100:  #F5F5F5;
+  --lux-n-200:  #E5E5E5;
+  --lux-n-300:  #D4D4D4;
+  --lux-n-400:  #A3A3A3;
+  --lux-n-500:  #737373;
+  --lux-n-600:  #525252;
+  --lux-n-700:  #404040;
+  --lux-n-800:  #262626;
+  --lux-n-900:  #171717;
+  --lux-n-950:  #0A0A0A;
+  --lux-n-1000: #000000;
+
+  /* The opacity ladder — the real palette for overlays and hairlines. */
+  --lux-ink-04:  rgba(16, 17, 18, 0.04);
+  --lux-ink-06:  rgba(16, 17, 18, 0.06);
+  --lux-ink-08:  rgba(16, 17, 18, 0.08);
+  --lux-ink-10:  rgba(16, 17, 18, 0.10);
+  --lux-ink-16:  rgba(16, 17, 18, 0.16);
+  --lux-ink-24:  rgba(16, 17, 18, 0.24);
+  --lux-ink-36:  rgba(16, 17, 18, 0.36);
+  --lux-ink-48:  rgba(16, 17, 18, 0.48);
+  --lux-ink-64:  rgba(16, 17, 18, 0.64);
+  --lux-ink-80:  rgba(16, 17, 18, 0.80);
+  --lux-ink-92:  rgba(16, 17, 18, 0.92);
+  --lux-paper-04: rgba(255, 255, 255, 0.04);
+  --lux-paper-06: rgba(255, 255, 255, 0.06);
+  --lux-paper-08: rgba(255, 255, 255, 0.08);
+  --lux-paper-10: rgba(255, 255, 255, 0.10);
+  --lux-paper-12: rgba(255, 255, 255, 0.12);
+  --lux-paper-16: rgba(255, 255, 255, 0.16);
+  --lux-paper-24: rgba(255, 255, 255, 0.24);
+  --lux-paper-36: rgba(255, 255, 255, 0.36);
+  --lux-paper-48: rgba(255, 255, 255, 0.48);
+  --lux-paper-64: rgba(255, 255, 255, 0.64);
+  --lux-paper-80: rgba(255, 255, 255, 0.80);
+  --lux-paper-92: rgba(255, 255, 255, 0.92);
+
+  /* ------------------------------------------------------------
+     2 — BRAND HOOKS. resolveWhiteLabel(host) writes these two and
+     nothing else. Default is monochrome: the accent is the ink.
+     ------------------------------------------------------------ */
+  --lux-accent:    var(--lux-n-900);
+  --lux-accent-fg: var(--lux-n-0);
+
+  /* ------------------------------------------------------------
+     3 — STATE. The ONLY permitted hues. Both meet WCAG AA (>=4.5:1)
+     as text on the --lux-n-50 card fill.
+     ------------------------------------------------------------ */
+  --lux-state-error:   #B91C1C;
+  --lux-state-success: #1A7A47;
+  /* Attention/pending is NOT a hue in Lux. It is the loudest neutral. */
+  --lux-state-notice:  var(--lux-n-600);
+}
+
+/* ================================================================
+   4 — SEMANTIC (light). Every value is a var() off the ladder.
    ================================================================ */
 :root {
   /* --- Backgrounds --- */
-  --color-bg-primary: #FFFFFF;
-  --color-bg-info: #FAFAFA;
-  --color-bg-body: #FFFFFF;
+  --color-bg-primary: var(--lux-n-0);
+  --color-bg-info: var(--lux-n-50);
+  --color-bg-body: var(--lux-n-0);
 
   /* --- Foregrounds --- */
-  --color-fg-info: #525252;
+  --color-fg-info: var(--lux-n-600);
 
   /* --- Text --- */
-  --color-text-primary: rgba(16, 17, 18, 0.80);
-  --color-text-secondary: #737373;
-  --color-text-error: #E53E3E;
-  --color-text-success: #38A169;
+  --color-text-primary: var(--lux-ink-80);
+  --color-text-secondary: var(--lux-n-500);
+  --color-text-error: var(--lux-state-error);
+  --color-text-success: var(--lux-state-success);
+
+  /* --- Status foreground (AA >=4.5:1 on the --lux-n-50 card bg) --- */
+  --color-status-good: var(--lux-state-success);
+  --color-status-warn: var(--lux-state-notice);
+  --color-status-bad: var(--lux-state-error);
 
   /* --- Headings --- */
-  --color-heading: rgba(16, 17, 18, 0.80);
+  --color-heading: var(--lux-ink-80);
 
   /* --- Icons --- */
-  --color-icon-primary: #737373;
-  --color-icon-secondary: #A3A3A3;
+  --color-icon-primary: var(--lux-n-500);
+  --color-icon-secondary: var(--lux-n-400);
 
   /* --- Borders --- */
-  --color-border-divider: rgba(16, 17, 18, 0.06);
-  --color-border-error: #E53E3E;
-  --color-border-info: #A3A3A3;
+  --color-border-divider: var(--lux-ink-06);
+  --color-border-error: var(--lux-state-error);
+  --color-border-info: var(--lux-n-400);
 
   /* --- Links --- */
-  --color-link-primary: #404040;
-  --color-link-primary-hover: #525252;
-  --color-link-secondary: #737373;
-  --color-link-subtle: rgba(16, 17, 18, 0.80);
-  --color-link-subtle-hover: rgba(16, 17, 18, 0.80);
-  --color-link-menu: rgba(16, 17, 18, 0.80);
-  --color-link-underlaid-bg: #F5F5F5;
-  --color-link-nav-fg: rgba(16, 17, 18, 0.80);
-  --color-link-nav-fg-hover: #525252;
-  --color-link-nav-fg-selected: #171717;
-  --color-link-nav-fg-active: #525252;
-  --color-link-nav-bg-selected: #F5F5F5;
+  --color-link-primary: var(--lux-n-700);
+  --color-link-primary-hover: var(--lux-n-600);
+  --color-link-secondary: var(--lux-n-500);
+  --color-link-subtle: var(--lux-ink-80);
+  --color-link-subtle-hover: var(--lux-ink-80);
+  --color-link-menu: var(--lux-ink-80);
+  --color-link-underlaid-bg: var(--lux-n-100);
+  --color-link-nav-fg: var(--lux-ink-80);
+  --color-link-nav-fg-hover: var(--lux-n-600);
+  --color-link-nav-fg-selected: var(--lux-n-900);
+  --color-link-nav-fg-active: var(--lux-n-600);
+  --color-link-nav-bg-selected: var(--lux-n-100);
 
   /* --- Buttons --- */
-  --color-button-solid-bg: #171717;
-  --color-button-solid-text: #FFFFFF;
-  --color-button-outline-fg: #171717;
-  --color-button-subtle-fg: rgba(16, 17, 18, 0.80);
-  --color-button-subtle-bg: rgba(16, 17, 18, 0.08);
-  --color-button-dropdown-fg: rgba(16, 17, 18, 0.80);
-  --color-button-dropdown-border: #F5F5F5;
-  --color-button-header-fg: rgba(16, 17, 18, 0.80);
-  --color-button-header-fg-selected: rgba(16, 17, 18, 0.80);
-  --color-button-header-fg-highlighted: rgba(16, 17, 18, 0.80);
-  --color-button-header-border: #F5F5F5;
-  --color-button-header-bg-selected: rgba(16, 17, 18, 0.04);
-  --color-button-header-bg-highlighted: #FEEBCB;
-  --color-button-pagination-fg: rgba(16, 17, 18, 0.80);
-  --color-button-pagination-border: #F5F5F5;
-  --color-button-icon-background-bg: #FAFAFA;
-  --color-button-hero-bg: #171717;
-  --color-button-hero-fg: #FFFFFF;
-  --color-button-hero-bg-hover: #525252;
-  --color-button-hero-fg-hover: #FFFFFF;
-  --color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
-  --color-button-segmented-fg: rgba(16, 17, 18, 0.80);
-  --color-button-icon-bg: rgba(16, 17, 18, 0.04);
+  --color-button-solid-bg: var(--lux-accent);
+  --color-button-solid-text: var(--lux-accent-fg);
+  --color-button-outline-fg: var(--lux-n-900);
+  --color-button-subtle-fg: var(--lux-ink-80);
+  --color-button-subtle-bg: var(--lux-ink-08);
+  --color-button-dropdown-fg: var(--lux-ink-80);
+  --color-button-dropdown-border: var(--lux-n-100);
+  --color-button-header-fg: var(--lux-ink-80);
+  --color-button-header-fg-selected: var(--lux-ink-80);
+  --color-button-header-fg-highlighted: var(--lux-ink-80);
+  --color-button-header-border: var(--lux-n-100);
+  --color-button-header-bg-selected: var(--lux-ink-04);
+  --color-button-header-bg-highlighted: var(--lux-n-200);
+  --color-button-pagination-fg: var(--lux-ink-80);
+  --color-button-pagination-border: var(--lux-n-100);
+  --color-button-icon-background-bg: var(--lux-n-50);
+  --color-button-hero-bg: var(--lux-accent);
+  --color-button-hero-fg: var(--lux-accent-fg);
+  --color-button-hero-bg-hover: var(--lux-n-600);
+  --color-button-hero-fg-hover: var(--lux-n-0);
+  --color-button-hero-bg-selected: var(--lux-paper-06);
+  --color-button-hero-fg-selected: var(--lux-ink-80);
+  --color-button-segmented-fg: var(--lux-ink-80);
+  --color-button-icon-bg: var(--lux-ink-04);
 
   /* --- Hover / Selected --- */
-  --color-hover: #525252;
-  --color-selected-control-bg: #F5F5F5;
-  --color-selected-control-text: #171717;
-  --color-selected-option-bg: #404040;
+  --color-hover: var(--lux-n-600);
+  --color-selected-control-bg: var(--lux-n-100);
+  --color-selected-control-text: var(--lux-n-900);
+  --color-selected-option-bg: var(--lux-n-700);
 
   /* --- Navigation --- */
-  --color-nav-bg-selected: #F5F5F5;
-  --color-nav-text-selected: #171717;
+  --color-nav-bg-selected: var(--lux-n-100);
+  --color-nav-text-selected: var(--lux-n-900);
 
   /* --- Inputs --- */
-  --color-input-fg: #262626;
-  --color-input-bg: #FFFFFF;
-  --color-input-bg-readonly: #E5E5E5;
-  --color-input-border: #F5F5F5;
-  --color-input-border-hover: #E5E5E5;
-  --color-input-border-focus: #525252;
-  --color-input-placeholder: #A3A3A3;
+  --color-input-fg: var(--lux-n-800);
+  --color-input-bg: var(--lux-n-0);
+  --color-input-bg-readonly: var(--lux-n-200);
+  --color-input-border: var(--lux-n-100);
+  --color-input-border-hover: var(--lux-n-200);
+  --color-input-border-focus: var(--lux-n-600);
+  /* n-400 on white is 2.5:1 — under the 3:1 non-text minimum. n-500 clears it. */
+  --color-input-placeholder: var(--lux-n-500);
 
   /* --- Tags --- */
-  --color-tag-subtle-bg: rgba(16, 17, 18, 0.04);
-  --color-tag-subtle-fg: rgba(16, 17, 18, 0.80);
-  --color-tag-clickable-bg: #F5F5F5;
-  --color-tag-clickable-fg: rgba(16, 17, 18, 0.80);
-  --color-tag-filter-bg: #F5F5F5;
-  --color-tag-select-bg: #F5F5F5;
-  --color-tag-select-fg: #737373;
-  --color-tag-select-selected-bg: #404040;
-  --color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
-
-  /* --- Badges --- */
-  --color-badge-gray-bg: rgba(16, 17, 18, 0.04);
-  --color-badge-gray-fg: rgba(16, 17, 18, 0.80);
+  --color-tag-subtle-bg: var(--lux-ink-04);
+  --color-tag-subtle-fg: var(--lux-ink-80);
+  --color-tag-clickable-bg: var(--lux-n-100);
+  --color-tag-clickable-fg: var(--lux-ink-80);
+  --color-tag-filter-bg: var(--lux-n-100);
+  --color-tag-select-bg: var(--lux-n-100);
+  --color-tag-select-fg: var(--lux-n-500);
+  --color-tag-select-selected-bg: var(--lux-n-700);
+  --color-tag-select-selected-fg: var(--lux-paper-80);
+
+  /* --- Badges ---
+     The colour NAMES are a legacy API (call sites say colorScheme="orange").
+     They are one monochrome ramp now; only green/red keep a hue, because they
+     carry state rather than decoration. */
+  --color-badge-gray-bg: var(--lux-ink-04);
+  --color-badge-gray-fg: var(--lux-ink-80);
   --color-badge-green-bg: #F0FFF4;
-  --color-badge-green-fg: #38A169;
+  --color-badge-green-fg: var(--lux-state-success);
   --color-badge-red-bg: #FFF5F5;
-  --color-badge-red-fg: #E53E3E;
-  --color-badge-purple-bg: #F5F5F5;
-  --color-badge-purple-fg: #525252;
-  --color-badge-orange-bg: #FFFAF0;
-  --color-badge-orange-fg: #DD6B20;
-  --color-badge-blue-bg: #F5F5F5;
-  --color-badge-blue-fg: #525252;
-  --color-badge-yellow-bg: #FFFFF0;
-  --color-badge-yellow-fg: #D69E2E;
-  --color-badge-teal-bg: #F5F5F5;
-  --color-badge-teal-fg: #525252;
-  --color-badge-cyan-bg: #F5F5F5;
-  --color-badge-cyan-fg: #525252;
-  --color-badge-pink-bg: #FFF5F7;
-  --color-badge-pink-fg: #D53F8C;
-  --color-badge-purple-alt-bg: #F5F5F5;
-  --color-badge-purple-alt-fg: rgba(16, 17, 18, 0.80);
-  --color-badge-blue-alt-bg: #F5F5F5;
-  --color-badge-blue-alt-fg: rgba(16, 17, 18, 0.80);
-  --color-badge-bright-gray-bg: #F5F5F5;
-  --color-badge-bright-gray-fg: #525252;
+  --color-badge-red-fg: var(--lux-state-error);
+  --color-badge-purple-bg: var(--lux-n-100);
+  --color-badge-purple-fg: var(--lux-n-600);
+  --color-badge-orange-bg: var(--lux-n-100);
+  --color-badge-orange-fg: var(--lux-n-600);
+  --color-badge-blue-bg: var(--lux-n-100);
+  --color-badge-blue-fg: var(--lux-n-600);
+  --color-badge-yellow-bg: var(--lux-n-100);
+  --color-badge-yellow-fg: var(--lux-n-600);
+  --color-badge-teal-bg: var(--lux-n-100);
+  --color-badge-teal-fg: var(--lux-n-600);
+  --color-badge-cyan-bg: var(--lux-n-100);
+  --color-badge-cyan-fg: var(--lux-n-600);
+  --color-badge-pink-bg: var(--lux-n-100);
+  --color-badge-pink-fg: var(--lux-n-600);
+  --color-badge-purple-alt-bg: var(--lux-n-100);
+  --color-badge-purple-alt-fg: var(--lux-ink-80);
+  --color-badge-blue-alt-bg: var(--lux-n-100);
+  --color-badge-blue-alt-fg: var(--lux-ink-80);
+  --color-badge-bright-gray-bg: var(--lux-n-100);
+  --color-badge-bright-gray-fg: var(--lux-n-600);
   --color-badge-bright-green-bg: #C6F6D5;
   --color-badge-bright-green-fg: #25855A;
   --color-badge-bright-red-bg: #FED7D7;
   --color-badge-bright-red-fg: #C53030;
-  --color-badge-bright-blue-bg: #E5E5E5;
-  --color-badge-bright-blue-fg: #404040;
-  --color-badge-bright-yellow-bg: #FEFCBF;
-  --color-badge-bright-yellow-fg: #B7791F;
-  --color-badge-bright-teal-bg: #E5E5E5;
-  --color-badge-bright-teal-fg: #404040;
-  --color-badge-bright-cyan-bg: #E5E5E5;
-  --color-badge-bright-cyan-fg: #404040;
-  --color-badge-bright-orange-bg: #FEEBCB;
-  --color-badge-bright-orange-fg: #C05621;
-  --color-badge-bright-purple-bg: #E5E5E5;
-  --color-badge-bright-purple-fg: #404040;
-  --color-badge-bright-pink-bg: #FFF5F7;
-  --color-badge-bright-pink-fg: #B83280;
+  --color-badge-bright-blue-bg: var(--lux-n-200);
+  --color-badge-bright-blue-fg: var(--lux-n-700);
+  --color-badge-bright-yellow-bg: var(--lux-n-200);
+  --color-badge-bright-yellow-fg: var(--lux-n-700);
+  --color-badge-bright-teal-bg: var(--lux-n-200);
+  --color-badge-bright-teal-fg: var(--lux-n-700);
+  --color-badge-bright-cyan-bg: var(--lux-n-200);
+  --color-badge-bright-cyan-fg: var(--lux-n-700);
+  --color-badge-bright-orange-bg: var(--lux-n-200);
+  --color-badge-bright-orange-fg: var(--lux-n-700);
+  --color-badge-bright-purple-bg: var(--lux-n-200);
+  --color-badge-bright-purple-fg: var(--lux-n-700);
+  --color-badge-bright-pink-bg: var(--lux-n-200);
+  --color-badge-bright-pink-fg: var(--lux-n-700);
 
   /* --- Alerts --- */
-  --color-alert-fg: rgba(16, 17, 18, 0.80);
-  --color-alert-bg-info: rgba(16, 17, 18, 0.04);
-  --color-alert-bg-warning: #FEEBCB;
-  --color-alert-bg-warning-table: #FFFAF0;
+  --color-alert-fg: var(--lux-ink-80);
+  --color-alert-bg-info: var(--lux-ink-04);
+  --color-alert-bg-warning: var(--lux-n-200);
+  --color-alert-bg-warning-table: var(--lux-n-50);
   --color-alert-bg-success: #C6F6D5;
   --color-alert-bg-error: #FED7D7;
 
   /* --- Dialogs / Popovers / Drawers --- */
-  --color-dialog-bg: #FFFFFF;
-  --color-dialog-fg: rgba(16, 17, 18, 0.80);
-  --color-popover-bg: #FFFFFF;
-  --color-popover-shadow: rgba(16, 17, 18, 0.08);
-  --color-drawer-bg: #FFFFFF;
+  --color-dialog-bg: var(--lux-n-0);
+  --color-dialog-fg: var(--lux-ink-80);
+  --color-popover-bg: var(--lux-n-0);
+  --color-popover-border: var(--lux-ink-10);
+  --color-popover-shadow: var(--lux-ink-08);
+  --color-drawer-bg: var(--lux-n-0);
 
   /* --- Tooltip --- */
-  --color-tooltip-bg: #171717;
-  --color-tooltip-fg: #FFFFFF;
+  --color-tooltip-bg: var(--lux-n-900);
+  --color-tooltip-fg: var(--lux-n-0);
 
   /* --- Table --- */
-  --color-table-header-bg: rgba(16, 17, 18, 0.06);
-  --color-table-header-fg: rgba(16, 17, 18, 0.64);
+  --color-table-header-bg: var(--lux-ink-06);
+  --color-table-header-fg: var(--lux-ink-64);
 
   /* --- Tabs --- */
-  --color-tabs-solid-fg: #171717;
-  --color-tabs-secondary-fg: rgba(16, 17, 18, 0.80);
-  --color-tabs-secondary-border: #D4D4D4;
-
-  /* --- Switch --- */
-  --color-switch-bg: #D4D4D4;
-
-  /* --- Skeleton --- */
-  --color-skeleton-start: rgba(16, 17, 18, 0.04);
-  --color-skeleton-end: rgba(16, 17, 18, 0.06);
-
-  /* --- Progress --- */
-  --color-progress-track: #F5F5F5;
-
-  /* --- Stats / Topbar --- */
-  --color-stats-bg: #FAFAFA;
-  --color-topbar-bg: #FAFAFA;
-
-  /* --- Graph --- */
-  --color-graph-line: #737373;
+  --color-tabs-solid-fg: var(--lux-n-900);
+  --color-tabs-solid-bg: var(--lux-n-0);
+  --color-tabs-solid-fg-selected: var(--lux-n-0);
+  --color-tabs-solid-bg-selected: var(--lux-n-900);
+  --color-tabs-secondary-fg: var(--lux-n-500);
+  --color-tabs-secondary-fg-selected: var(--lux-n-900);
+  --color-tabs-radio-fg: var(--lux-n-500);
+  --color-tabs-radio-bg-selected: var(--lux-n-0);
+  --color-tabs-radio-fg-selected: var(--lux-n-900);
+
+  --color-tabs-secondary-border: var(--lux-n-300);
+
+  /* --- Controls --- */
+  --color-switch-bg: var(--lux-n-300);
+  --color-progress-track: var(--lux-n-100);
+
+  /* --- Chrome / charts --- */
+  --color-stats-bg: var(--lux-n-50);
+  --color-topbar-bg: var(--lux-n-50);
+  --color-graph-line: var(--lux-n-500);
   --color-graph-gradient-start: rgba(163, 163, 163, 0.3);
   --color-graph-gradient-stop: rgba(163, 163, 163, 0);
 
+  /* --- Skeleton --- */
+  --color-skeleton-start: var(--lux-n-100);
+  --color-skeleton-end: var(--lux-n-200);
+
   /* --- Scrollbar --- */
-  --color-scrollbar-thumb: rgba(16, 17, 18, 0.16);
+  --color-scrollbar-thumb: var(--lux-ink-16);
 
   /* --- Selection --- */
-  --color-selection-bg: #E3CFE7;
+  --color-selection-bg: var(--lux-n-200);
+
+  /* --- Raw palette (an alias surface; the ladder is the source) --- */
+  --color-gray-50: var(--lux-n-50);
+  --color-gray-100: var(--lux-n-100);
+  --color-gray-200: var(--lux-n-200);
+  --color-gray-300: var(--lux-n-300);
+  --color-gray-400: var(--lux-n-400);
+  --color-gray-500: var(--lux-n-500);
+  --color-gray-600: var(--lux-n-600);
+  --color-gray-700: var(--lux-n-700);
+  --color-gray-800: var(--lux-n-800);
+  --color-gray-900: var(--lux-n-900);
+  --color-white: var(--lux-n-0);
+  --color-black: var(--lux-n-1000);
+  /* The two state ramps — the only rungs in this file that carry a hue.
+     Monotone, like the warm ramps, and likewise not flipped in `.dark`. */
+  --color-green-50:  #F0FFF4;
+  --color-green-100: #C6F6D5;
+  --color-green-200: #9AE6B4;
+  --color-green-500: var(--lux-state-success);
+  --color-green-800: #22543D;
+  --color-red-50:  #FFF5F5;
+  --color-red-100: #FED7D7;
+  --color-red-200: #FEB2B2;
+  --color-red-500: var(--lux-state-error);
+  --color-red-600: #C53030;
+  --color-red-800: #822727;
+  /* ------------------------------------------------------------
+     THE WARM RAMPS, DEFANGED.
+     Tailwind v4 compiles `bg-orange-100` to `background-color:
+     var(--color-orange-100)`, so redefining the rung here retints every
+     warm utility on every surface that imports this file — no component
+     edit, no rebuild. The ramps stay MONOTONE (low rung = light, high rung
+     = dark) in both modes, exactly like Tailwind's, so an author's
+     `bg-orange-50 dark:bg-yellow-900` still reads pale-on-light and
+     dark-on-dark. They are therefore NOT overridden in `.dark` below.
+     A rung is a rung; a warning is `--color-status-warn`.
+     ------------------------------------------------------------ */
+  --color-orange-50:  var(--lux-n-50);
+  --color-orange-100: var(--lux-n-100);
+  --color-orange-200: var(--lux-n-200);
+  --color-orange-300: var(--lux-n-300);
+  --color-orange-400: var(--lux-n-400);
+  --color-orange-500: var(--lux-n-500);
+  --color-orange-600: var(--lux-n-600);
+  --color-orange-700: var(--lux-n-700);
+  --color-orange-800: var(--lux-n-800);
+  --color-orange-900: var(--lux-n-900);
+  --color-orange-950: var(--lux-n-950);
+  --color-amber-50:  var(--color-orange-50);
+  --color-amber-100: var(--color-orange-100);
+  --color-amber-200: var(--color-orange-200);
+  --color-amber-300: var(--color-orange-300);
+  --color-amber-400: var(--color-orange-400);
+  --color-amber-500: var(--color-orange-500);
+  --color-amber-600: var(--color-orange-600);
+  --color-amber-700: var(--color-orange-700);
+  --color-amber-800: var(--color-orange-800);
+  --color-amber-900: var(--color-orange-900);
+  --color-amber-950: var(--color-orange-950);
+  --color-yellow-50:  var(--color-orange-50);
+  --color-yellow-100: var(--color-orange-100);
+  --color-yellow-200: var(--color-orange-200);
+  --color-yellow-300: var(--color-orange-300);
+  --color-yellow-400: var(--color-orange-400);
+  --color-yellow-500: var(--color-orange-500);
+  --color-yellow-600: var(--color-orange-600);
+  --color-yellow-700: var(--color-orange-700);
+  --color-yellow-800: var(--color-orange-800);
+  --color-yellow-900: var(--color-orange-900);
+  --color-yellow-950: var(--color-orange-950);
+  /* Tailwind's warm neutral. Lux has exactly one neutral, and it is not warm. */
+  --color-stone-50:  var(--lux-n-50);
+  --color-stone-100: var(--lux-n-100);
+  --color-stone-200: var(--lux-n-200);
+  --color-stone-300: var(--lux-n-300);
+  --color-stone-400: var(--lux-n-400);
+  --color-stone-500: var(--lux-n-500);
+  --color-stone-600: var(--lux-n-600);
+  --color-stone-700: var(--lux-n-700);
+  --color-stone-800: var(--lux-n-800);
+  --color-stone-900: var(--lux-n-900);
+  --color-stone-950: var(--lux-n-950);
+  --color-blackAlpha-50: var(--lux-ink-04);
+  --color-blackAlpha-100: var(--lux-ink-06);
+  --color-blackAlpha-200: var(--lux-ink-08);
+  --color-blackAlpha-300: var(--lux-ink-16);
+  --color-blackAlpha-400: var(--lux-ink-24);
+  --color-blackAlpha-500: var(--lux-ink-36);
+  --color-blackAlpha-600: var(--lux-ink-48);
+  --color-blackAlpha-700: var(--lux-ink-64);
+  --color-blackAlpha-800: var(--lux-ink-80);
+  --color-blackAlpha-900: var(--lux-ink-92);
+  --color-whiteAlpha-50: var(--lux-paper-04);
+  --color-whiteAlpha-100: var(--lux-paper-06);
+  --color-whiteAlpha-200: var(--lux-paper-08);
+  --color-whiteAlpha-300: var(--lux-paper-16);
+  --color-whiteAlpha-400: var(--lux-paper-24);
+  --color-whiteAlpha-500: var(--lux-paper-36);
+  --color-whiteAlpha-600: var(--lux-paper-48);
+  --color-whiteAlpha-700: var(--lux-paper-64);
+  --color-whiteAlpha-800: var(--lux-paper-80);
+  --color-whiteAlpha-900: var(--lux-paper-92);
+
+  /* --- Chakra legacy aliases (used by migrated components) --- */
+  --chakra-colors-bg-primary: var(--color-bg-primary);
+  --chakra-colors-text-primary: var(--color-text-primary);
+  --chakra-colors-text-secondary: var(--color-text-secondary);
+  --chakra-colors-icon-secondary: var(--color-icon-secondary);
+  --chakra-colors-border-divider: var(--color-border-divider);
+  --chakra-colors-link-primary: var(--color-link-primary);
+  --chakra-colors-link-primary-hover: var(--color-link-primary-hover);
+  --chakra-colors-hover: var(--color-hover);
+  --chakra-colors-gray-100: var(--color-gray-100);
+  --chakra-colors-whiteAlpha-50: var(--color-whiteAlpha-50);
+  --chakra-colors-whiteAlpha-100: var(--color-whiteAlpha-100);
 
   /* --- Shadows --- */
   --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
   --shadow-popover: 0px 15px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-drawer: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* ------------------------------------------------------------
+     5 — SHADCN / TAILWIND ALIASES (light).
+     A surface imports this file and deletes its own palette block.
+     ------------------------------------------------------------ */
+  --background: var(--lux-n-0);
+  --foreground: var(--lux-n-900);
+  --card: var(--lux-n-0);
+  --card-foreground: var(--lux-n-900);
+  --popover: var(--lux-n-0);
+  --popover-foreground: var(--lux-n-900);
+  --primary: var(--lux-accent);
+  --primary-foreground: var(--lux-accent-fg);
+  --secondary: var(--lux-n-100);
+  --secondary-foreground: var(--lux-n-900);
+  --muted: var(--lux-n-100);
+  --muted-foreground: var(--lux-n-500);
+  --accent: var(--lux-n-100);
+  --accent-foreground: var(--lux-n-900);
+  --destructive: var(--lux-state-error);
+  --destructive-foreground: var(--lux-n-0);
+  /* success / warning / info as shadcn-style pairs. `warning` is achromatic —
+     it used to be hsl(38 96% 57%), which is where lux.market got its tan. */
+  --success: var(--lux-state-success);
+  --success-foreground: var(--lux-n-0);
+  --warning: var(--lux-state-notice);
+  --warning-foreground: var(--lux-n-0);
+  --info: var(--lux-n-700);
+  --info-foreground: var(--lux-n-0);
+  --border: var(--lux-n-200);
+  --input: var(--lux-n-200);
+  --ring: var(--lux-n-400);
+  /* Charts: five achromatic steps, ordered by contrast, not by hue. */
+  --chart-1: var(--lux-n-900);
+  --chart-2: var(--lux-n-600);
+  --chart-3: var(--lux-n-400);
+  --chart-4: var(--lux-n-700);
+  --chart-5: var(--lux-n-300);
+  --sidebar: var(--lux-n-50);
+  --sidebar-foreground: var(--lux-n-900);
+  --sidebar-primary: var(--lux-accent);
+  --sidebar-primary-foreground: var(--lux-accent-fg);
+  --sidebar-accent: var(--lux-n-100);
+  --sidebar-accent-foreground: var(--lux-n-900);
+  --sidebar-border: var(--lux-n-200);
+  --sidebar-ring: var(--lux-n-400);
 }
 
 /* ================================================================
    DARK MODE
    ================================================================ */
-.dark {
+.dark,
+[data-theme='dark'] {
+  /* Brand hooks invert: on ink, the accent is the paper. */
+  --lux-accent: var(--lux-n-0);
+  --lux-accent-fg: var(--lux-n-900);
+
+  /* State, lightened for a dark ground (AA >=4.5:1 on --lux-n-900). */
+  --lux-state-error:   #FCA5A5;
+  --lux-state-success: #6EE7A8;
+  --lux-state-notice:  var(--lux-n-300);
+
   /* --- Backgrounds --- */
-  --color-bg-primary: #000000;
-  --color-bg-info: #171717;
-  --color-bg-body: #000000;
+  --color-bg-primary: var(--lux-n-900);
+  --color-bg-info: var(--lux-n-800);
+  --color-bg-body: var(--lux-n-1000);
 
   /* --- Foregrounds --- */
-  --color-fg-info: #D4D4D4;
+  --color-fg-info: var(--lux-n-300);
 
   /* --- Text --- */
-  --color-text-primary: rgba(255, 255, 255, 0.80);
-  --color-text-secondary: #A3A3A3;
-  --color-text-error: #E53E3E;
-  --color-text-success: #9AE6B4;
+  --color-text-primary: var(--lux-paper-80);
+  --color-text-secondary: var(--lux-n-400);
+  --color-text-error: var(--lux-state-error);
+  --color-text-success: var(--lux-state-success);
+
+  /* --- Status foreground --- */
+  --color-status-good: var(--lux-state-success);
+  --color-status-warn: var(--lux-state-notice);
+  --color-status-bad: var(--lux-state-error);
 
   /* --- Headings --- */
-  --color-heading: rgba(255, 255, 255, 0.80);
+  --color-heading: var(--lux-paper-80);
 
   /* --- Icons --- */
-  --color-icon-primary: #A3A3A3;
-  --color-icon-secondary: #737373;
+  --color-icon-primary: var(--lux-n-400);
+  --color-icon-secondary: var(--lux-n-500);
 
   /* --- Borders --- */
-  --color-border-divider: rgba(255, 255, 255, 0.06);
-  --color-border-error: #E53E3E;
-  --color-border-info: #737373;
+  --color-border-divider: var(--lux-paper-06);
+  --color-border-error: var(--lux-state-error);
+  --color-border-info: var(--lux-n-500);
 
   /* --- Links --- */
-  --color-link-primary: rgba(255, 255, 255, 0.64);
-  --color-link-primary-hover: rgba(255, 255, 255, 0.64);
-  --color-link-secondary: #A3A3A3;
-  --color-link-subtle: #A3A3A3;
-  --color-link-subtle-hover: #A3A3A3;
-  --color-link-menu: rgba(255, 255, 255, 0.80);
-  --color-link-underlaid-bg: #262626;
-  --color-link-nav-fg: rgba(255, 255, 255, 0.80);
-  --color-link-nav-fg-hover: rgba(255, 255, 255, 0.64);
-  --color-link-nav-fg-selected: #FAFAFA;
-  --color-link-nav-fg-active: rgba(255, 255, 255, 0.64);
-  --color-link-nav-bg-selected: rgba(255, 255, 255, 0.06);
+  --color-link-primary: var(--lux-n-300);
+  --color-link-primary-hover: var(--lux-n-200);
+  --color-link-secondary: var(--lux-n-400);
+  --color-link-subtle: var(--lux-paper-80);
+  --color-link-subtle-hover: var(--lux-paper-80);
+  --color-link-menu: var(--lux-paper-80);
+  --color-link-underlaid-bg: var(--lux-n-800);
+  --color-link-nav-fg: var(--lux-paper-80);
+  --color-link-nav-fg-hover: var(--lux-n-200);
+  --color-link-nav-fg-selected: var(--lux-n-0);
+  --color-link-nav-fg-active: var(--lux-n-200);
+  --color-link-nav-bg-selected: var(--lux-n-800);
 
   /* --- Buttons --- */
-  --color-button-solid-bg: rgba(255, 255, 255, 0.92);
-  --color-button-solid-text: #000000;
-  --color-button-outline-fg: rgba(255, 255, 255, 0.92);
-  --color-button-subtle-fg: rgba(255, 255, 255, 0.80);
-  --color-button-subtle-bg: rgba(255, 255, 255, 0.08);
-  --color-button-dropdown-fg: rgba(255, 255, 255, 0.80);
-  --color-button-dropdown-border: #525252;
-  --color-button-header-fg: #A3A3A3;
-  --color-button-header-fg-selected: rgba(255, 255, 255, 0.80);
-  --color-button-header-fg-highlighted: rgba(255, 255, 255, 0.80);
-  --color-button-header-border: #525252;
-  --color-button-header-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-button-header-bg-highlighted: #7B341E;
-  --color-button-pagination-fg: #FAFAFA;
-  --color-button-pagination-border: rgba(255, 255, 255, 0.06);
-  --color-button-icon-background-bg: rgba(255, 255, 255, 0.04);
-  --color-button-hero-bg: rgba(255, 255, 255, 0.92);
-  --color-button-hero-fg: #FFFFFF;
-  --color-button-hero-bg-hover: rgba(255, 255, 255, 0.64);
-  --color-button-hero-fg-hover: #FFFFFF;
-  --color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
-  --color-button-segmented-fg: rgba(255, 255, 255, 0.80);
-  --color-button-icon-bg: rgba(255, 255, 255, 0.04);
+  --color-button-solid-bg: var(--lux-accent);
+  --color-button-solid-text: var(--lux-accent-fg);
+  --color-button-outline-fg: var(--lux-n-0);
+  --color-button-subtle-fg: var(--lux-paper-80);
+  --color-button-subtle-bg: var(--lux-paper-08);
+  --color-button-dropdown-fg: var(--lux-paper-80);
+  --color-button-dropdown-border: var(--lux-n-800);
+  --color-button-header-fg: var(--lux-paper-80);
+  --color-button-header-fg-selected: var(--lux-paper-80);
+  --color-button-header-fg-highlighted: var(--lux-paper-80);
+  --color-button-header-border: var(--lux-n-800);
+  --color-button-header-bg-selected: var(--lux-paper-04);
+  --color-button-header-bg-highlighted: var(--lux-n-700);
+  --color-button-pagination-fg: var(--lux-paper-80);
+  --color-button-pagination-border: var(--lux-n-800);
+  --color-button-icon-background-bg: var(--lux-n-800);
+  --color-button-hero-bg: var(--lux-accent);
+  --color-button-hero-fg: var(--lux-accent-fg);
+  --color-button-hero-bg-hover: var(--lux-n-200);
+  --color-button-hero-fg-hover: var(--lux-n-900);
+  --color-button-hero-bg-selected: var(--lux-paper-06);
+  --color-button-hero-fg-selected: var(--lux-paper-80);
+  --color-button-segmented-fg: var(--lux-paper-80);
+  --color-button-icon-bg: var(--lux-paper-04);
 
   /* --- Hover / Selected --- */
-  --color-hover: rgba(255, 255, 255, 0.64);
-  --color-selected-control-bg: rgba(255, 255, 255, 0.06);
-  --color-selected-control-text: #FAFAFA;
-  --color-selected-option-bg: rgba(255, 255, 255, 0.16);
+  --color-hover: var(--lux-n-200);
+  --color-selected-control-bg: var(--lux-n-800);
+  --color-selected-control-text: var(--lux-n-0);
+  --color-selected-option-bg: var(--lux-n-700);
 
   /* --- Navigation --- */
-  --color-nav-bg-selected: rgba(255, 255, 255, 0.06);
-  --color-nav-text-selected: #FAFAFA;
+  --color-nav-bg-selected: var(--lux-n-800);
+  --color-nav-text-selected: var(--lux-n-0);
 
   /* --- Inputs --- */
-  --color-input-fg: #FAFAFA;
-  --color-input-bg: #000000;
-  --color-input-bg-readonly: #262626;
-  --color-input-border: #525252;
-  --color-input-border-hover: #737373;
-  --color-input-border-focus: rgba(255, 255, 255, 0.64);
-  --color-input-placeholder: #737373;
+  --color-input-fg: var(--lux-n-200);
+  --color-input-bg: var(--lux-n-900);
+  --color-input-bg-readonly: var(--lux-n-800);
+  --color-input-border: var(--lux-n-800);
+  --color-input-border-hover: var(--lux-n-700);
+  --color-input-border-focus: var(--lux-n-400);
+  --color-input-placeholder: var(--lux-n-500);
 
   /* --- Tags --- */
-  --color-tag-subtle-bg: rgba(255, 255, 255, 0.06);
-  --color-tag-subtle-fg: rgba(255, 255, 255, 0.80);
-  --color-tag-clickable-bg: #262626;
-  --color-tag-clickable-fg: rgba(255, 255, 255, 0.80);
-  --color-tag-filter-bg: rgba(255, 255, 255, 0.08);
-  --color-tag-select-bg: #262626;
-  --color-tag-select-fg: rgba(255, 255, 255, 0.80);
-  --color-tag-select-selected-bg: rgba(255, 255, 255, 0.16);
-  --color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
+  --color-tag-subtle-bg: var(--lux-paper-06);
+  --color-tag-subtle-fg: var(--lux-paper-80);
+  --color-tag-clickable-bg: var(--lux-n-800);
+  --color-tag-clickable-fg: var(--lux-paper-80);
+  --color-tag-filter-bg: var(--lux-n-800);
+  --color-tag-select-bg: var(--lux-n-800);
+  --color-tag-select-fg: var(--lux-n-400);
+  --color-tag-select-selected-bg: var(--lux-n-700);
+  --color-tag-select-selected-fg: var(--lux-paper-80);
 
   /* --- Badges --- */
-  --color-badge-gray-bg: rgba(255, 255, 255, 0.06);
-  --color-badge-gray-fg: rgba(255, 255, 255, 0.80);
+  --color-badge-gray-bg: var(--lux-paper-06);
+  --color-badge-gray-fg: var(--lux-paper-80);
   --color-badge-green-bg: #22543D;
   --color-badge-green-fg: #9AE6B4;
   --color-badge-red-bg: #822727;
   --color-badge-red-fg: #FEB2B2;
-  --color-badge-purple-bg: #262626;
-  --color-badge-purple-fg: #D4D4D4;
-  --color-badge-orange-bg: #7B341E;
-  --color-badge-orange-fg: #FEEBCB;
-  --color-badge-blue-bg: #262626;
-  --color-badge-blue-fg: #D4D4D4;
-  --color-badge-yellow-bg: #744210;
-  --color-badge-yellow-fg: #FEFCBF;
-  --color-badge-teal-bg: #262626;
-  --color-badge-teal-fg: #D4D4D4;
-  --color-badge-cyan-bg: #262626;
-  --color-badge-cyan-fg: #D4D4D4;
-  --color-badge-pink-bg: #702459;
-  --color-badge-pink-fg: #FED7E2;
-  --color-badge-purple-alt-bg: #262626;
-  --color-badge-purple-alt-fg: rgba(255, 255, 255, 0.80);
-  --color-badge-blue-alt-bg: #262626;
-  --color-badge-blue-alt-fg: rgba(255, 255, 255, 0.80);
-  --color-badge-bright-gray-bg: #262626;
-  --color-badge-bright-gray-fg: #E5E5E5;
+  --color-badge-purple-bg: var(--lux-n-800);
+  --color-badge-purple-fg: var(--lux-n-300);
+  --color-badge-orange-bg: var(--lux-n-800);
+  --color-badge-orange-fg: var(--lux-n-300);
+  --color-badge-blue-bg: var(--lux-n-800);
+  --color-badge-blue-fg: var(--lux-n-300);
+  --color-badge-yellow-bg: var(--lux-n-800);
+  --color-badge-yellow-fg: var(--lux-n-300);
+  --color-badge-teal-bg: var(--lux-n-800);
+  --color-badge-teal-fg: var(--lux-n-300);
+  --color-badge-cyan-bg: var(--lux-n-800);
+  --color-badge-cyan-fg: var(--lux-n-300);
+  --color-badge-pink-bg: var(--lux-n-800);
+  --color-badge-pink-fg: var(--lux-n-300);
+  --color-badge-purple-alt-bg: var(--lux-n-800);
+  --color-badge-purple-alt-fg: var(--lux-paper-80);
+  --color-badge-blue-alt-bg: var(--lux-n-800);
+  --color-badge-blue-alt-fg: var(--lux-paper-80);
+  --color-badge-bright-gray-bg: var(--lux-n-800);
+  --color-badge-bright-gray-fg: var(--lux-n-200);
   --color-badge-bright-green-bg: #22543D;
   --color-badge-bright-green-fg: #9AE6B4;
   --color-badge-bright-red-bg: #822727;
   --color-badge-bright-red-fg: #FEB2B2;
-  --color-badge-bright-blue-bg: #404040;
-  --color-badge-bright-blue-fg: #E5E5E5;
-  --color-badge-bright-yellow-bg: #744210;
-  --color-badge-bright-yellow-fg: #FAF089;
-  --color-badge-bright-teal-bg: #404040;
-  --color-badge-bright-teal-fg: #E5E5E5;
-  --color-badge-bright-cyan-bg: #404040;
-  --color-badge-bright-cyan-fg: #E5E5E5;
-  --color-badge-bright-orange-bg: #C05621;
-  --color-badge-bright-orange-fg: #FEEBCB;
-  --color-badge-bright-purple-bg: #404040;
-  --color-badge-bright-purple-fg: #E5E5E5;
-  --color-badge-bright-pink-bg: #B83280;
-  --color-badge-bright-pink-fg: #FFF5F7;
+  --color-badge-bright-blue-bg: var(--lux-n-700);
+  --color-badge-bright-blue-fg: var(--lux-n-200);
+  --color-badge-bright-yellow-bg: var(--lux-n-700);
+  --color-badge-bright-yellow-fg: var(--lux-n-200);
+  --color-badge-bright-teal-bg: var(--lux-n-700);
+  --color-badge-bright-teal-fg: var(--lux-n-200);
+  --color-badge-bright-cyan-bg: var(--lux-n-700);
+  --color-badge-bright-cyan-fg: var(--lux-n-200);
+  --color-badge-bright-orange-bg: var(--lux-n-700);
+  --color-badge-bright-orange-fg: var(--lux-n-200);
+  --color-badge-bright-purple-bg: var(--lux-n-700);
+  --color-badge-bright-purple-fg: var(--lux-n-200);
+  --color-badge-bright-pink-bg: var(--lux-n-700);
+  --color-badge-bright-pink-fg: var(--lux-n-200);
 
   /* --- Alerts --- */
-  --color-alert-fg: rgba(255, 255, 255, 0.80);
-  --color-alert-bg-info: rgba(255, 255, 255, 0.06);
-  --color-alert-bg-warning: rgba(124, 67, 16, 0.44);
-  --color-alert-bg-warning-table: rgba(123, 52, 30, 0.44);
+  --color-alert-fg: var(--lux-paper-80);
+  --color-alert-bg-info: var(--lux-paper-06);
+  --color-alert-bg-warning: var(--lux-paper-08);
+  --color-alert-bg-warning-table: var(--lux-paper-06);
   --color-alert-bg-success: #1C4532;
   --color-alert-bg-error: #63171B;
 
   /* --- Dialogs / Popovers / Drawers --- */
-  --color-dialog-bg: #171717;
-  --color-dialog-fg: rgba(255, 255, 255, 0.80);
-  --color-popover-bg: #171717;
-  --color-popover-shadow: rgba(255, 255, 255, 0.16);
-  --color-drawer-bg: #171717;
+  --color-dialog-bg: var(--lux-n-900);
+  --color-dialog-fg: var(--lux-paper-80);
+  --color-popover-bg: var(--lux-n-900);
+  --color-popover-border: var(--lux-paper-12);
+  --color-popover-shadow: var(--lux-paper-16);
+  --color-drawer-bg: var(--lux-n-900);
 
   /* --- Tooltip --- */
-  --color-tooltip-bg: #171717;
-  --color-tooltip-fg: #FFFFFF;
+  --color-tooltip-bg: var(--lux-n-900);
+  --color-tooltip-fg: var(--lux-n-0);
 
   /* --- Table --- */
-  --color-table-header-bg: rgba(255, 255, 255, 0.08);
-  --color-table-header-fg: rgba(255, 255, 255, 0.64);
+  --color-table-header-bg: var(--lux-paper-06);
+  --color-table-header-fg: var(--lux-paper-64);
 
   /* --- Tabs --- */
-  --color-tabs-solid-fg: rgba(255, 255, 255, 0.80);
-  --color-tabs-secondary-fg: rgba(255, 255, 255, 0.80);
-  --color-tabs-secondary-border: #525252;
-
-  /* --- Switch --- */
-  --color-switch-bg: rgba(255, 255, 255, 0.24);
-
-  /* --- Skeleton --- */
-  --color-skeleton-start: rgba(255, 255, 255, 0.04);
-  --color-skeleton-end: rgba(255, 255, 255, 0.06);
-
-  /* --- Progress --- */
-  --color-progress-track: rgba(255, 255, 255, 0.06);
-
-  /* --- Stats / Topbar --- */
-  --color-stats-bg: rgba(255, 255, 255, 0.04);
-  --color-topbar-bg: rgba(255, 255, 255, 0.04);
-
-  /* --- Graph --- */
-  --color-graph-line: rgba(255, 255, 255, 0.48);
+  --color-tabs-solid-fg: var(--lux-n-0);
+  --color-tabs-solid-bg: var(--lux-n-900);
+  --color-tabs-solid-fg-selected: var(--lux-n-900);
+  --color-tabs-solid-bg-selected: var(--lux-n-0);
+  --color-tabs-secondary-fg: var(--lux-n-400);
+  --color-tabs-secondary-fg-selected: var(--lux-n-0);
+  --color-tabs-radio-fg: var(--lux-n-400);
+  --color-tabs-radio-bg-selected: var(--lux-n-800);
+  --color-tabs-radio-fg-selected: var(--lux-n-0);
+
+  --color-tabs-secondary-border: var(--lux-n-600);
+
+  /* --- Controls --- */
+  --color-switch-bg: var(--lux-paper-24);
+  --color-progress-track: var(--lux-paper-06);
+
+  /* --- Chrome / charts --- */
+  --color-stats-bg: var(--lux-paper-04);
+  --color-topbar-bg: var(--lux-paper-04);
+  --color-graph-line: var(--lux-paper-48);
   --color-graph-gradient-start: rgba(255, 255, 255, 0.15);
   --color-graph-gradient-stop: rgba(255, 255, 255, 0);
+  --shadow-drawer: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  /* --- Skeleton --- */
+  --color-skeleton-start: var(--lux-n-800);
+  --color-skeleton-end: var(--lux-n-700);
 
   /* --- Scrollbar --- */
-  --color-scrollbar-thumb: rgba(255, 255, 255, 0.16);
+  --color-scrollbar-thumb: var(--lux-paper-16);
 
   /* --- Selection --- */
-  --color-selection-bg: #754B7D;
-
-  /* --- Shadows --- */
-  --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
-  --shadow-popover: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  --shadow-drawer: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  --color-selection-bg: var(--lux-n-700);
+
+  /* The warm ramps are NOT redefined here on purpose — see the light block.
+     They are monotone in both modes so `dark:bg-yellow-900` still means
+     "dark". A call site that needs ink that FLIPS with the mode wants
+     --color-status-warn, which is a semantic token, not a palette rung. */
+
+  /* ------------------------------------------------------------
+     SHADCN / TAILWIND ALIASES (dark)
+     ------------------------------------------------------------ */
+  --background: var(--lux-n-1000);
+  --foreground: var(--lux-n-50);
+  --card: var(--lux-n-950);
+  --card-foreground: var(--lux-n-50);
+  --popover: var(--lux-n-950);
+  --popover-foreground: var(--lux-n-50);
+  --primary: var(--lux-accent);
+  --primary-foreground: var(--lux-accent-fg);
+  --secondary: var(--lux-n-900);
+  --secondary-foreground: var(--lux-n-50);
+  --muted: var(--lux-n-900);
+  --muted-foreground: var(--lux-n-400);
+  --accent: var(--lux-n-900);
+  --accent-foreground: var(--lux-n-50);
+  --destructive: var(--lux-state-error);
+  --destructive-foreground: var(--lux-n-950);
+  --success: var(--lux-state-success);
+  --success-foreground: var(--lux-n-950);
+  --warning: var(--lux-state-notice);
+  --warning-foreground: var(--lux-n-950);
+  --info: var(--lux-n-300);
+  --info-foreground: var(--lux-n-950);
+  --border: var(--lux-paper-10);
+  --input: var(--lux-paper-12);
+  --ring: var(--lux-n-500);
+  --chart-1: var(--lux-n-50);
+  --chart-2: var(--lux-n-400);
+  --chart-3: var(--lux-n-500);
+  --chart-4: var(--lux-n-300);
+  --chart-5: var(--lux-n-600);
+  --sidebar: var(--lux-n-950);
+  --sidebar-foreground: var(--lux-n-50);
+  --sidebar-primary: var(--lux-accent);
+  --sidebar-primary-foreground: var(--lux-accent-fg);
+  --sidebar-accent: var(--lux-n-900);
+  --sidebar-accent-foreground: var(--lux-n-50);
+  --sidebar-border: var(--lux-paper-10);
+  --sidebar-ring: var(--lux-n-500);
 }