refactor: govern CSS tokens and cascade

static/theme.css

@@ -1,22 +1,4 @@
-/* Runtime theme layer. Existing page geometry stays untouched; only semantic color tokens change. */
-:root {
-  --chart-background: #fbfcfd;
-  --chart-grid: #e2e8ec;
-  --chart-axis: #6c7983;
-  --chart-zero: #aeb7c1;
-  --chart-line: #1d65c1;
-  --chart-average: #b7791f;
-  --chart-up: #c93f45;
-  --chart-down: #087a55;
-  --chart-up-volume: rgba(201, 63, 69, .58);
-  --chart-down-volume: rgba(8, 122, 85, .58);
-  --chart-area: rgba(37, 99, 235, .07);
-  --chart-alert-area: rgba(224, 69, 54, .05);
-  --chart-moving-average: #d1d5db;
-  --chart-repair: #f59e0b;
-  --chart-ma-10: #a76500;
-  --chart-ma-20: #626c78;
-}
+/* Runtime theme rules. Canonical light and dark variables live in shared/tokens.css. */
 
 /* Theme changes are captured as one page-level transition. Descendant effects are
    suppressed briefly so tables and cards cannot repaint on separate timelines. */
@@ -43,142 +25,6 @@
   from { opacity: 0; }
 }
 
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  --canvas: #121416;
-  --surface: #1b1e21;
-  --surface-muted: #202428;
-  --surface-subtle: #24282d;
-  --border: #343a40;
-  --border-strong: #474f57;
-  --text-primary: #e8eaed;
-  --text-secondary: #adb5bd;
-  --text-tertiary: #7f8993;
-  --action: #6ca8e8;
-  --action-hover: #8bbcf0;
-  --action-soft: #23364a;
-  --market-up: #f06d73;
-  --market-up-soft: #40262a;
-  --market-down: #43bc8a;
-  --market-down-soft: #1d382f;
-  --warning-color: #e2ad58;
-  --warning-soft: #3d3220;
-  /* Bridge every historical design-token layer to the same dark palette. */
-  --xb-gray-25: var(--surface);
-  --xb-gray-50: var(--surface-muted);
-  --xb-gray-100: var(--canvas);
-  --xb-gray-200: var(--border);
-  --xb-gray-300: var(--border-strong);
-  --xb-gray-500: var(--text-secondary);
-  --xb-gray-700: #cbd1d7;
-  --xb-gray-900: var(--text-primary);
-  --xb-blue-50: var(--action-soft);
-  --xb-blue-100: #294866;
-  --xb-blue-500: var(--action);
-  --xb-blue-600: var(--action-hover);
-  --xb-red-50: var(--market-up-soft);
-  --xb-red-500: var(--market-up);
-  --xb-green-50: var(--market-down-soft);
-  --xb-green-500: var(--market-down);
-  --xb-amber-50: var(--warning-soft);
-  --xb-amber-500: var(--warning-color);
-  --surface-canvas: var(--canvas);
-  --surface-raised: var(--surface);
-  --surface-selected: var(--action-soft);
-  --card-bg: var(--surface);
-  --card-border: var(--border);
-  --primary: var(--action);
-  --primary-hover: var(--action-hover);
-  --danger: var(--market-up);
-  --success: var(--market-down);
-  --warning: var(--warning-color);
-  --r2-blue: var(--action);
-  --r2-blue-dark: var(--action-hover);
-  --r2-blue-soft: var(--action-soft);
-  --r2-blue-line: #42698e;
-  --r2-up: var(--market-up);
-  --r2-up-soft: var(--market-up-soft);
-  --r2-down: var(--market-down);
-  --r2-down-soft: var(--market-down-soft);
-  --r2-amber: var(--warning-color);
-  --r2-amber-soft: var(--warning-soft);
-  --r2-ink: var(--text-primary);
-  --r2-sub: var(--text-secondary);
-  --r2-faint: var(--text-tertiary);
-  --r2-line: var(--border);
-  --r2-line-soft: #2a2f34;
-  --r2-bg: var(--canvas);
-  --r2-card: var(--surface);
-  --r2-shadow: var(--shadow-soft);
-  --bg: var(--canvas);
-  --card: var(--surface);
-  --ink: var(--text-primary);
-  --sub: var(--text-secondary);
-  --faint: var(--text-tertiary);
-  --line: var(--border);
-  --line-soft: #2a2f34;
-  --line-strong: var(--border-strong);
-  --text: var(--text-primary);
-  --text-muted: var(--text-secondary);
-  --blue: var(--action);
-  --blue-d: var(--action-hover);
-  --blue-dark: var(--action-hover);
-  --blue-soft: var(--action-soft);
-  --blue-line: #42698e;
-  --up: var(--market-up);
-  --up-soft: var(--market-up-soft);
-  --down: var(--market-down);
-  --down-soft: var(--market-down-soft);
-  --coral: var(--market-up);
-  --coral-soft: var(--market-up-soft);
-  --green: var(--market-down);
-  --green-soft: var(--market-down-soft);
-  --amber: var(--warning-color);
-  --amber-soft: var(--warning-soft);
-  --dialog-ink: var(--text-primary);
-  --dialog-line: var(--border);
-  --heaven-paper: #191a18;
-  --heaven-paper-soft: #20211e;
-  --heaven-ink: #e5e0d4;
-  --heaven-muted: #aaa497;
-  --heaven-rule: #3d3a34;
-  --chart-background: #181b1e;
-  --chart-grid: #30363c;
-  --chart-axis: #a3adb6;
-  --chart-zero: #68737d;
-  --chart-line: #6ca8e8;
-  --chart-average: #e2ad58;
-  --chart-up: #f06d73;
-  --chart-down: #43bc8a;
-  --chart-up-volume: rgba(240, 109, 115, .52);
-  --chart-down-volume: rgba(67, 188, 138, .52);
-  --chart-area: rgba(108, 168, 232, .12);
-  --chart-alert-area: rgba(240, 109, 115, .09);
-  --chart-moving-average: #69737d;
-  --chart-repair: #e2ad58;
-  --chart-ma-10: #d39a45;
-  --chart-ma-20: #9aa5af;
-  --on-action: #101418;
-  --warning-line: #6d5a38;
-  --warning-line-strong: #66502d;
-  --control-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-  --dialog-backdrop: rgba(0, 0, 0, .62);
-  --ladder-level-1: #2d2426;
-  --ladder-level-2: #2b2822;
-  --ladder-level-3: #252a2d;
-  --ladder-level-4: #20282b;
-  --ladder-level-5: #202428;
-  --heat-strong-bg: #304f7a;
-  --heat-strong-ink: #f2f6fb;
-  --heat-warm-bg: #2b405f;
-  --heat-warm-ink: #dfeaf7;
-  --heat-mild-bg: #293440;
-  --heat-mild-ink: #c7d2dc;
-  --heaven-field-bg: #23241f;
-  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .16);
-  --shadow: 0 18px 50px rgba(0, 0, 0, .46);
-}
-
 :root[data-theme="dark"] :is(html, body, .main, .app-main) {
   background: var(--canvas);
   color: var(--text-primary);