@luxfi/ui 7.4.5 → 7.4.7

package/tokens.css

@@ -1,438 +1,949 @@
 /*
- * 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);
+  --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: rgba(255, 255, 255, 0.04);
-  --color-skeleton-end: rgba(255, 255, 255, 0.06);
+  --color-skeleton-start: var(--lux-n-800);
+  --color-skeleton-end: var(--lux-n-700);
 
-  /* --- Progress --- */
-  --color-progress-track: rgba(255, 255, 255, 0.06);
+  /* --- Scrollbar --- */
+  --color-scrollbar-thumb: var(--lux-paper-16);
 
-  /* --- Stats / Topbar --- */
-  --color-stats-bg: rgba(255, 255, 255, 0.04);
-  --color-topbar-bg: rgba(255, 255, 255, 0.04);
+  /* --- Selection --- */
+  --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);
+}
 
-  /* --- Graph --- */
-  --color-graph-line: rgba(255, 255, 255, 0.48);
-  --color-graph-gradient-start: rgba(255, 255, 255, 0.15);
-  --color-graph-gradient-stop: rgba(255, 255, 255, 0);
+/* ================================================================
+   6 — MOTION. One system: five durations, four curves, six moves.
+
+   Two rules make "smooth" measurable. Both were established by
+   benchmark, not by taste, and the second one is the one that bites.
+
+   1. WHAT you animate. A decorative animation may touch `transform`
+      and `opacity` and nothing else. Those two are the only properties
+      the compositor can run off the main thread, so they survive a
+      busy CPU. Animating width / height / top / left / margin /
+      background-position forces layout or paint every frame. Worse,
+      the layout ones also register as layout shift: the explorer's
+      mobile drawer animated `left` and scored CLS 0.726 every time it
+      opened — Google calls anything over 0.25 "poor". The same drawer
+      on `transform` scores 0.
+
+   2. HOW MANY things animate. Keep it O(1) in the size of the page.
+      Every independently animated element is a compositor layer to
+      allocate, rasterise and composite. Past a few hundred, that count
+      — not the property — is the bottleneck, and rule 1 alone will
+      happily walk you off a cliff. The measurements are in 6c.
+
+   The one deliberate exception is a disclosure widget (accordion,
+   collapsible). There the box change IS the content the user asked
+   for, not decoration, so animating its height is correct. Decoration
+   animates transform; disclosure animates the box it discloses.
+
+   Durations are named for their ROLE so a caller cannot pick "300ms
+   because it felt right". Exits are shorter than entrances — by the
+   time a thing leaves the user has already decided, and waiting on it
+   reads as lag.
+   ================================================================ */
+:root {
+  /* --- Durations -------------------------------------------------- */
+  --lux-dur-press: 80ms;   /* tap acknowledgement                      */
+  --lux-dur-hover: 120ms;  /* pointer feedback                         */
+  --lux-dur-exit:  140ms;  /* something leaves                         */
+  --lux-dur-enter: 200ms;  /* something appears                        */
+  --lux-dur-move:  280ms;  /* a panel travels across the viewport      */
+
+  /* --- Curves ----------------------------------------------------- */
+  --lux-ease:        cubic-bezier(0.4, 0, 0.2, 1);      /* A -> B      */
+  --lux-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* entering    */
+  --lux-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);     /* leaving     */
+  --lux-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* press       */
+
+  /* --- Distances. Enter offsets are one value, not a per-component
+         guess. Both collapse to 0 under reduced motion. -------------- */
+  --lux-lift: 2px;         /* hover raise                              */
+  --lux-rise: 8px;         /* enter offset                             */
+}
 
-  /* --- Scrollbar --- */
-  --color-scrollbar-thumb: rgba(255, 255, 255, 0.16);
+/* --- The six moves. transform + opacity only. --------------------- */
+@keyframes lux-fade-in  { from { opacity: 0 } to { opacity: 1 } }
+@keyframes lux-fade-out { from { opacity: 1 } to { opacity: 0 } }
 
-  /* --- Selection --- */
-  --color-selection-bg: #754B7D;
+@keyframes lux-rise-in {
+  from { opacity: 0; transform: translate3d(0, var(--lux-rise), 0) }
+  to   { opacity: 1; transform: translate3d(0, 0, 0) }
+}
 
-  /* --- 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);
+@keyframes lux-scale-in {
+  from { opacity: 0; transform: scale(0.96) }
+  to   { opacity: 1; transform: scale(1) }
+}
+
+@keyframes lux-scale-out {
+  from { opacity: 1; transform: scale(1) }
+  to   { opacity: 0; transform: scale(0.96) }
+}
+
+/* The loading sweep — ONE per page, never one per skeleton. See 6c. */
+@keyframes lux-sweep {
+  from { transform: translate3d(-100%, 0, 0) }
+  to   { transform: translate3d(350%, 0, 0) }
+}
+
+@keyframes lux-spin { to { transform: rotate(360deg) } }
+
+/* ================================================================
+   6b — The primitives. Every surface reaches for these, never for a
+   hand-rolled keyframe.
+   ================================================================ */
+
+.lux-enter { animation: lux-rise-in  var(--lux-dur-enter) var(--lux-ease-out) both }
+.lux-exit  { animation: lux-fade-out var(--lux-dur-exit)  var(--lux-ease-in)  both }
+
+/* Floating surfaces — menu, popover, tooltip, dialog. They grow from
+   where they were summoned rather than sliding in from nowhere. */
+.lux-pop      { animation: lux-scale-in  var(--lux-dur-enter) var(--lux-ease-out) both }
+.lux-pop-exit { animation: lux-scale-out var(--lux-dur-exit)  var(--lux-ease-in)  both }
+
+/* A list cascades by setting --lux-i on each row; one property, no JS. */
+.lux-stagger { animation-delay: calc(var(--lux-i, 0) * 40ms) }
+
+/* Hover / press feedback. `transform` and `opacity` are the only
+   transitioned properties, so this is safe on any element. */
+.lux-interactive {
+  transition:
+    transform var(--lux-dur-hover) var(--lux-ease-out),
+    opacity   var(--lux-dur-hover) var(--lux-ease-out);
+}
+.lux-interactive:hover        { transform: translate3d(0, calc(-1 * var(--lux-lift)), 0) }
+.lux-interactive:active       { transform: scale(0.98); transition-duration: var(--lux-dur-press) }
+.lux-interactive:disabled,
+.lux-interactive[aria-disabled='true'] { transform: none }
+
+/* ================================================================
+   6c — The loading state. Two primitives, one job each.
+
+   `.lux-skeleton` RESERVES SPACE. `.lux-loading` SAYS WORK IS IN
+   FLIGHT. Keeping those apart is what makes the whole thing cheap,
+   because only the second one moves — once for the page, not once per
+   skeleton.
+
+   This is the part that is counter-intuitive, so here are the numbers
+   that settled it. Chromium, 390x844 @3x, 4x CPU throttle, 5s samples,
+   n = concurrently-mounted skeletons:
+
+     n=600   bgpos 79.6fps   sheen 57.2fps   pulse 115.4fps   bar 120fps
+     n=1460  bgpos 33.6fps   sheen 23.0fps   pulse  39.0fps   bar 120fps
+     n=3000  bgpos 13.8fps   sheen  5.4fps   pulse  18.2fps   bar 120fps
+
+     bgpos = per-element background-position gradient (what we shipped)
+     sheen = per-element transform on a ::after   (the "obvious" fix)
+     pulse = per-element opacity keyframe
+     bar   = flat skeletons + ONE page-level sweep  (what we ship now)
+
+   Read the middle column twice. Rewriting the shimmer as a per-element
+   `transform` — obeying "animate transform and opacity only" to the
+   letter — made it 32% SLOWER than the background-position version it
+   replaced, and at n=3000 it produced a single 2.5-SECOND frame.
+
+   The property rule is necessary and not sufficient. Past a few
+   hundred elements the dominant cost is the NUMBER of independently
+   animated elements: each one is a compositor layer to allocate,
+   rasterise and composite, and `overflow:hidden` on each adds a
+   render surface on top. Only the O(1) design is flat in n — 120fps
+   at 600, at 1460 and at 3000, identical to animating nothing.
+
+   So: a skeleton is a promise about layout and nothing else. It
+   occupies exactly the space the real content will (zero CLS) and it
+   holds still.
+   ================================================================ */
+.lux-skeleton {
+  background: var(--color-skeleton-start);
+  /* Nothing inside a skeleton is readable yet; say so once, here. */
+  color: transparent;
+  user-select: none;
+}
+
+/* The one moving part. Fixed, 2px, above everything, out of flow — so it
+   cannot shift layout and cannot tint content. Mount it while any request
+   is in flight; unmount it when they land. One per page. */
+.lux-loading {
+  position: fixed;
+  inset: 0 0 auto;
+  height: 2px;
+  z-index: 60;
+  overflow: hidden;
+  background: var(--color-skeleton-start);
+  pointer-events: none;
+}
+
+.lux-loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: 40%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-skeleton-end) 50%,
+    transparent 100%
+  );
+  animation: lux-sweep 1.1s var(--lux-ease) infinite;
+}
+
+/* ================================================================
+   6d — Reduced motion.
+
+   Belt AND braces, because either alone leaks:
+     - zeroing the TOKENS catches anything that reads them, including
+       inline styles and the Web Animations API, which !important
+       cannot reach;
+     - the global override catches every hand-rolled transition that
+       never adopted a token.
+   Unscoped on purpose. A reduced-motion rule that only applies inside
+   one component is a rule the rest of the app ignores.
+
+   Motion goes; FEEDBACK stays. State changes still land, instantly.
+   ================================================================ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lux-dur-press: 1ms;
+    --lux-dur-hover: 1ms;
+    --lux-dur-exit:  1ms;
+    --lux-dur-enter: 1ms;
+    --lux-dur-move:  1ms;
+    --lux-lift: 0px;
+    --lux-rise: 0px;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* A sweep that runs once and freezes mid-track is a smear. Drop the
+     motion; the bar itself stays, so "work in flight" is still visible. */
+  .lux-loading::after { animation: none; width: 100%; opacity: 0.5 }
 }