:root, [data-theme='night'] { /* Primitive tokens — GHS-014 five-lakes v1.3, night lake. */ --primitive-bg-a: #0a1020; --primitive-bg-b: #0b1220; --primitive-bg-c: #070c16; --primitive-bg-d: #04070d; --primitive-star-core: #f7ebc8; --primitive-star-bright: #ffefc2; --primitive-text-primary: rgba(234, 238, 248, 0.96); --primitive-text-body: rgba(222, 228, 242, 0.88); --primitive-text-aux: rgba(196, 206, 228, 0.62); --primitive-text-faint: rgba(180, 192, 220, 0.4); --primitive-nebula-a: rgba(91, 111, 196, 0.13); --primitive-nebula-b: rgba(138, 111, 201, 0.05); --primitive-glass: rgba(178, 198, 255, 0.045); --primitive-glass-hover: rgba(178, 198, 255, 0.075); --primitive-glass-edge: rgba(202, 216, 255, 0.13); --primitive-glass-top: rgba(255, 255, 255, 0.06); --primitive-mist-a: rgba(157, 180, 255, 0.1); --primitive-mist-b: rgba(247, 235, 200, 0.04); --primitive-cool-glow: rgba(157, 180, 255, 0.42); --primitive-warm-glow: rgba(247, 235, 200, 0.5); --primitive-shadow: rgba(0, 0, 0, 0.34); --primitive-scene-opacity: 0.76; /* Semantic tokens. */ --surface-sky: var(--primitive-bg-a); --surface-horizon: var(--primitive-bg-b); --surface-lake: var(--primitive-bg-c); --surface-depth: var(--primitive-bg-d); --content-primary: var(--primitive-text-primary); --content-secondary: var(--primitive-text-body); --content-muted: var(--primitive-text-aux); --content-faint: var(--primitive-text-faint); --accent-light: var(--primitive-star-core); --accent-light-strong: var(--primitive-star-bright); --state-ready: #b8d7c4; --state-waiting: #cfbddf; --state-quiet: var(--primitive-text-aux); --focus-ring: rgba(247, 235, 200, 0.7); /* Component tokens. */ --button-primary-bg: rgba(247, 235, 200, 0.92); --button-primary-text: #15181f; --button-primary-shadow: 0 12px 42px rgba(247, 235, 200, 0.14); --button-secondary-bg: var(--primitive-glass); --button-secondary-text: var(--content-secondary); --button-secondary-edge: var(--primitive-glass-edge); --panel-bg: rgba(8, 13, 25, 0.72); --panel-edge: var(--primitive-glass-edge); --status-dot: var(--accent-light); } [data-theme='dawn'] { --primitive-bg-a: #f5f7fc; --primitive-bg-b: #eaeff8; --primitive-bg-c: #dfe8f4; --primitive-bg-d: #d3e0ef; --primitive-star-core: #c9a24b; --primitive-star-bright: #a96f2c; --primitive-text-primary: rgba(22, 33, 58, 0.94); --primitive-text-body: rgba(36, 49, 76, 0.86); --primitive-text-aux: rgba(72, 88, 120, 0.62); --primitive-text-faint: rgba(98, 112, 142, 0.48); --primitive-nebula-a: rgba(122, 144, 220, 0.12); --primitive-nebula-b: rgba(240, 196, 150, 0.12); --primitive-glass: rgba(255, 255, 255, 0.34); --primitive-glass-hover: rgba(255, 255, 255, 0.52); --primitive-glass-edge: rgba(30, 50, 90, 0.12); --primitive-glass-top: rgba(255, 255, 255, 0.65); --primitive-mist-a: rgba(255, 255, 255, 0.55); --primitive-mist-b: rgba(250, 214, 150, 0.3); --primitive-cool-glow: rgba(96, 124, 205, 0.35); --primitive-warm-glow: rgba(201, 162, 75, 0.5); --primitive-shadow: rgba(42, 66, 105, 0.16); --primitive-scene-opacity: 0.11; --state-ready: #3f7058; --state-waiting: #725b82; --panel-bg: rgba(247, 250, 255, 0.76); --button-primary-bg: rgba(45, 59, 84, 0.92); --button-primary-text: #f8f4e9; --button-primary-shadow: 0 12px 36px rgba(45, 59, 84, 0.16); } [data-theme='nebula'] { --primitive-bg-a: #150e26; --primitive-bg-b: #160f28; --primitive-bg-c: #0e0919; --primitive-bg-d: #080510; --primitive-star-core: #ede4f6; --primitive-star-bright: #f8f1ff; --primitive-text-primary: rgba(238, 234, 248, 0.96); --primitive-text-body: rgba(226, 220, 240, 0.88); --primitive-text-aux: rgba(202, 194, 226, 0.62); --primitive-text-faint: rgba(186, 178, 214, 0.42); --primitive-nebula-a: rgba(138, 111, 201, 0.24); --primitive-nebula-b: rgba(91, 111, 196, 0.11); --primitive-glass: rgba(196, 178, 255, 0.05); --primitive-glass-hover: rgba(196, 178, 255, 0.09); --primitive-glass-edge: rgba(210, 198, 255, 0.14); --primitive-glass-top: rgba(255, 255, 255, 0.07); --primitive-mist-a: rgba(170, 150, 255, 0.12); --primitive-mist-b: rgba(239, 217, 168, 0.05); --primitive-cool-glow: rgba(170, 150, 255, 0.45); --primitive-warm-glow: rgba(239, 217, 168, 0.5); --primitive-shadow: rgba(0, 0, 0, 0.38); --primitive-scene-opacity: 0.44; --panel-bg: rgba(18, 12, 34, 0.76); } [data-theme='candle'] { --primitive-bg-a: #1b130b; --primitive-bg-b: #181108; --primitive-bg-c: #100b05; --primitive-bg-d: #0a0703; --primitive-star-core: #ffd9a0; --primitive-star-bright: #ffe7be; --primitive-text-primary: rgba(246, 238, 226, 0.96); --primitive-text-body: rgba(236, 226, 210, 0.88); --primitive-text-aux: rgba(214, 198, 176, 0.62); --primitive-text-faint: rgba(196, 180, 158, 0.42); --primitive-nebula-a: rgba(214, 150, 80, 0.13); --primitive-nebula-b: rgba(160, 110, 70, 0.07); --primitive-glass: rgba(255, 214, 160, 0.045); --primitive-glass-hover: rgba(255, 214, 160, 0.08); --primitive-glass-edge: rgba(255, 220, 170, 0.13); --primitive-glass-top: rgba(255, 255, 255, 0.06); --primitive-mist-a: rgba(255, 196, 110, 0.09); --primitive-mist-b: rgba(255, 214, 140, 0.04); --primitive-cool-glow: rgba(214, 178, 140, 0.4); --primitive-warm-glow: rgba(255, 196, 110, 0.55); --primitive-shadow: rgba(0, 0, 0, 0.38); --primitive-scene-opacity: 0.4; --panel-bg: rgba(24, 17, 9, 0.78); } [data-theme='clear'] { --primitive-bg-a: #f1f5f8; --primitive-bg-b: #e8eef3; --primitive-bg-c: #dee7ed; --primitive-bg-d: #d2dee7; --primitive-star-core: #5f7e9f; --primitive-star-bright: #41628a; --primitive-text-primary: rgba(20, 36, 52, 0.94); --primitive-text-body: rgba(34, 50, 68, 0.86); --primitive-text-aux: rgba(66, 86, 106, 0.62); --primitive-text-faint: rgba(92, 110, 128, 0.48); --primitive-nebula-a: rgba(100, 140, 180, 0.1); --primitive-nebula-b: rgba(140, 170, 200, 0.08); --primitive-glass: rgba(255, 255, 255, 0.32); --primitive-glass-hover: rgba(255, 255, 255, 0.5); --primitive-glass-edge: rgba(20, 50, 80, 0.12); --primitive-glass-top: rgba(255, 255, 255, 0.65); --primitive-mist-a: rgba(255, 255, 255, 0.55); --primitive-mist-b: rgba(190, 214, 234, 0.35); --primitive-cool-glow: rgba(78, 112, 150, 0.35); --primitive-warm-glow: rgba(170, 138, 70, 0.5); --primitive-shadow: rgba(37, 66, 90, 0.14); --primitive-scene-opacity: 0.08; --state-ready: #3f7058; --state-waiting: #6a5b7a; --panel-bg: rgba(246, 250, 253, 0.76); --button-primary-bg: rgba(45, 66, 85, 0.92); --button-primary-text: #f6f2e9; --button-primary-shadow: 0 12px 36px rgba(45, 66, 85, 0.15); }