From fa3489b394e1d71075fedb84f60e7b8654667ce7 Mon Sep 17 00:00:00 2001 From: zenchantlive Date: Thu, 26 Feb 2026 16:09:12 -0800 Subject: [PATCH] feat(theme): add 5 distinct themes to choose from - aurora: Warm charcoal with cyan accents (fixed/improved) - midnight: Cool blue-purple with violet accents - forest: Earthy green-brown with lime accents - dusk: Warm purple-brown with orange/pink accents - contrast: Pure black with neon accents (high contrast) All themes use the same 12-category token system for consistency. Switch themes by changing data-theme attribute on html element. --- src/styles/themes/aurora.css | 116 ++++++++++++++++----------------- src/styles/themes/contrast.css | 112 +++++++++++++++++++++++++++++++ src/styles/themes/dusk.css | 112 +++++++++++++++++++++++++++++++ src/styles/themes/forest.css | 112 +++++++++++++++++++++++++++++++ src/styles/themes/index.css | 24 ++++--- src/styles/themes/midnight.css | 112 +++++++++++++++++++++++++++++++ 6 files changed, 520 insertions(+), 68 deletions(-) create mode 100644 src/styles/themes/contrast.css create mode 100644 src/styles/themes/dusk.css create mode 100644 src/styles/themes/forest.css create mode 100644 src/styles/themes/midnight.css diff --git a/src/styles/themes/aurora.css b/src/styles/themes/aurora.css index 4428b47..8a10cf4 100644 --- a/src/styles/themes/aurora.css +++ b/src/styles/themes/aurora.css @@ -3,111 +3,111 @@ * * A dark theme with warm brown-grey charcoal backgrounds * and bright cyan/teal accent colors for the "aurora" glow effect. + * Fixed: Better contrast, warmer tones, more distinct layers */ [data-theme="aurora"] { /* ========================================================================== - 1. SURFACE LAYERS - Warm Charcoal Scale - Lightest to darkest: quaternary → tertiary → secondary → primary → elevated → backdrop + 1. SURFACE LAYERS - Warm Charcoal Scale (DISTINCT) ========================================================================== */ - --surface-backdrop: #181716; - --surface-elevated: #131211; - --surface-primary: #1f1e1d; - --surface-secondary: #242322; - --surface-tertiary: #282725; - --surface-quaternary: #302e2c; - --surface-overlay: #0d0c0b; - --surface-input: #1a1917; - --surface-hover: rgba(240, 238, 234, 0.05); - --surface-active: rgba(53, 201, 255, 0.1); - --surface-tooltip: #1f1e1d; + --surface-backdrop: #161514; /* Darkest - page background */ + --surface-elevated: #0f0e0d; /* Header - darker for contrast */ + --surface-primary: #1e1d1b; /* Sidebar */ + --surface-secondary: #252422; /* Main content - lighter than sidebar */ + --surface-tertiary: #2d2b29; /* Panels */ + --surface-quaternary: #353331; /* Cards - lightest surface */ + --surface-overlay: #0a0909; /* Modals */ + --surface-input: #1a1917; /* Form fields */ + --surface-hover: rgba(240, 238, 234, 0.06); + --surface-active: rgba(53, 201, 255, 0.12); + --surface-tooltip: #1e1d1b; /* ========================================================================== - 2. BORDERS - Warm Grey + 2. BORDERS - Warm Grey (more visible) ========================================================================== */ - --border-subtle: rgba(180, 175, 165, 0.12); - --border-default: rgba(180, 175, 165, 0.22); - --border-strong: rgba(180, 175, 165, 0.38); - --border-accent: rgba(53, 201, 255, 0.5); + --border-subtle: rgba(180, 175, 165, 0.15); + --border-default: rgba(180, 175, 165, 0.28); + --border-strong: rgba(180, 175, 165, 0.45); + --border-accent: rgba(53, 201, 255, 0.55); /* ========================================================================== 3. TEXT - Warm White Scale ========================================================================== */ - --text-primary: #f0eeea; - --text-secondary: #c9c5bc; + --text-primary: #f5f3ef; + --text-secondary: #d4d0c7; --text-tertiary: #a8a49a; --text-disabled: #6b6862; - --text-inverse: #131211; + --text-inverse: #0f0e0d; /* ========================================================================== - 4. ACCENTS - Aurora Colors (Cyan/Teal/Green/Amber/Red) + 4. ACCENTS - Aurora Colors ========================================================================== */ - --accent-info: #35c9ff; - --accent-success: #35d98f; - --accent-warning: #ffb24a; - --accent-danger: #ff4c72; + --accent-info: #4dd4ff; + --accent-success: #4ade80; + --accent-warning: #fbbf24; + --accent-danger: #fb7185; /* ========================================================================== - 5. ACCENT GLOWS - Soft Aurora Glow Effects + 5. ACCENT GLOWS ========================================================================== */ - --glow-info: 0 0 20px rgba(53, 201, 255, 0.25); - --glow-success: 0 0 20px rgba(53, 217, 143, 0.25); - --glow-warning: 0 0 20px rgba(255, 178, 74, 0.25); - --glow-danger: 0 0 20px rgba(255, 76, 114, 0.25); + --glow-info: 0 0 20px rgba(77, 212, 255, 0.3); + --glow-success: 0 0 20px rgba(74, 222, 128, 0.3); + --glow-warning: 0 0 20px rgba(251, 191, 36, 0.3); + --glow-danger: 0 0 20px rgba(251, 113, 133, 0.3); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(48, 46, 44, 0.9); - --graph-node-epic: rgba(53, 201, 255, 0.12); - --graph-edge-default: rgba(180, 175, 165, 0.25); - --graph-edge-selected: #35c9ff; - --graph-edge-cycle: #ffb24a; + --graph-node-default: rgba(53, 51, 49, 0.95); + --graph-node-epic: rgba(77, 212, 255, 0.15); + --graph-edge-default: rgba(180, 175, 165, 0.3); + --graph-edge-selected: #4dd4ff; + --graph-edge-cycle: #fbbf24; /* ========================================================================== - 7. SEMANTIC ALPHAS - For overlays/hover states + 7. SEMANTIC ALPHAS ========================================================================== */ - --alpha-white-low: rgba(240, 238, 234, 0.05); - --alpha-white-medium: rgba(240, 238, 234, 0.1); - --alpha-white-high: rgba(240, 238, 234, 0.2); + --alpha-white-low: rgba(245, 243, 239, 0.06); + --alpha-white-medium: rgba(245, 243, 239, 0.12); + --alpha-white-high: rgba(245, 243, 239, 0.24); --alpha-black-low: rgba(0, 0, 0, 0.2); - --alpha-black-medium: rgba(0, 0, 0, 0.4); - --alpha-black-high: rgba(0, 0, 0, 0.7); + --alpha-black-medium: rgba(0, 0, 0, 0.45); + --alpha-black-high: rgba(0, 0, 0, 0.75); /* ========================================================================== - 8. STATUS COLORS - RGBA tints for status backgrounds + 8. STATUS COLORS ========================================================================== */ - --status-ready: rgba(53, 217, 143, 0.15); - --status-in-progress: rgba(255, 178, 74, 0.15); - --status-blocked: rgba(255, 76, 114, 0.15); - --status-closed: rgba(168, 164, 154, 0.1); + --status-ready: rgba(74, 222, 128, 0.18); + --status-in-progress: rgba(251, 191, 36, 0.18); + --status-blocked: rgba(251, 113, 133, 0.18); + --status-closed: rgba(168, 164, 154, 0.12); --status-deferred: rgba(168, 164, 154, 0.08); /* ========================================================================== 9. SHADOWS ========================================================================== */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); /* ========================================================================== 10. AGENT ROLE COLORS ========================================================================== */ - --agent-role-ui: #6B9BD2; - --agent-role-graph: #7CB97A; - --agent-role-orchestrator: #B08ED6; - --agent-role-researcher: #D4A574; + --agent-role-ui: #7bb3f0; + --agent-role-graph: #8fd18f; + --agent-role-orchestrator: #c4a5e6; + --agent-role-researcher: #e6b88a; /* ========================================================================== 11. SCROLLBARS ========================================================================== */ - --scrollbar-track: rgba(240, 238, 234, 0.02); - --scrollbar-thumb: rgba(180, 175, 165, 0.2); - --scrollbar-thumb-hover: rgba(180, 175, 165, 0.35); + --scrollbar-track: rgba(245, 243, 239, 0.03); + --scrollbar-thumb: rgba(180, 175, 165, 0.22); + --scrollbar-thumb-hover: rgba(180, 175, 165, 0.38); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ --code-background: #1a1917; - --code-text: #c9c5bc; + --code-text: #d4d0c7; } diff --git a/src/styles/themes/contrast.css b/src/styles/themes/contrast.css new file mode 100644 index 0000000..e69faa4 --- /dev/null +++ b/src/styles/themes/contrast.css @@ -0,0 +1,112 @@ +/** + * High Contrast Theme - Maximum Visibility + * + * Pure black background with bright white text and vivid accent colors. + * Designed for maximum readability and accessibility. + */ + +[data-theme="contrast"] { + /* ========================================================================== + 1. SURFACE LAYERS - Pure Black & Dark Greys + ========================================================================== */ + --surface-backdrop: #000000; + --surface-elevated: #0a0a0a; + --surface-primary: #141414; + --surface-secondary: #1a1a1a; + --surface-tertiary: #242424; + --surface-quaternary: #2e2e2e; + --surface-overlay: #050505; + --surface-input: #111111; + --surface-hover: rgba(255, 255, 255, 0.1); + --surface-active: rgba(255, 255, 255, 0.15); + --surface-tooltip: #1a1a1a; + + /* ========================================================================== + 2. BORDERS - White (High Contrast) + ========================================================================== */ + --border-subtle: rgba(255, 255, 255, 0.2); + --border-default: rgba(255, 255, 255, 0.35); + --border-strong: rgba(255, 255, 255, 0.55); + --border-accent: rgba(255, 255, 255, 0.7); + + /* ========================================================================== + 3. TEXT - Pure White + ========================================================================== */ + --text-primary: #ffffff; + --text-secondary: #e0e0e0; + --text-tertiary: #a0a0a0; + --text-disabled: #606060; + --text-inverse: #000000; + + /* ========================================================================== + 4. ACCENTS - Bright & Vivid + ========================================================================== */ + --accent-info: #00ffff; + --accent-success: #00ff66; + --accent-warning: #ffcc00; + --accent-danger: #ff3366; + + /* ========================================================================== + 5. ACCENT GLOWS + ========================================================================== */ + --glow-info: 0 0 24px rgba(0, 255, 255, 0.5); + --glow-success: 0 0 24px rgba(0, 255, 102, 0.5); + --glow-warning: 0 0 24px rgba(255, 204, 0, 0.5); + --glow-danger: 0 0 24px rgba(255, 51, 102, 0.5); + + /* ========================================================================== + 6. GRAPH COLORS + ========================================================================== */ + --graph-node-default: rgba(46, 46, 46, 0.98); + --graph-node-epic: rgba(0, 255, 255, 0.2); + --graph-edge-default: rgba(255, 255, 255, 0.35); + --graph-edge-selected: #00ffff; + --graph-edge-cycle: #ffcc00; + + /* ========================================================================== + 7. SEMANTIC ALPHAS + ========================================================================== */ + --alpha-white-low: rgba(255, 255, 255, 0.08); + --alpha-white-medium: rgba(255, 255, 255, 0.16); + --alpha-white-high: rgba(255, 255, 255, 0.3); + --alpha-black-low: rgba(0, 0, 0, 0.3); + --alpha-black-medium: rgba(0, 0, 0, 0.5); + --alpha-black-high: rgba(0, 0, 0, 0.8); + + /* ========================================================================== + 8. STATUS COLORS + ========================================================================== */ + --status-ready: rgba(0, 255, 102, 0.22); + --status-in-progress: rgba(255, 204, 0, 0.22); + --status-blocked: rgba(255, 51, 102, 0.22); + --status-closed: rgba(160, 160, 160, 0.15); + --status-deferred: rgba(160, 160, 160, 0.1); + + /* ========================================================================== + 9. SHADOWS + ========================================================================== */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7); + + /* ========================================================================== + 10. AGENT ROLE COLORS + ========================================================================== */ + --agent-role-ui: #7dd3fc; + --agent-role-graph: #86efac; + --agent-role-orchestrator: #d8b4fe; + --agent-role-researcher: #fdba74; + + /* ========================================================================== + 11. SCROLLBARS + ========================================================================== */ + --scrollbar-track: rgba(255, 255, 255, 0.05); + --scrollbar-thumb: rgba(255, 255, 255, 0.25); + --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4); + + /* ========================================================================== + 12. CODE/SYNTAX + ========================================================================== */ + --code-background: #111111; + --code-text: #e0e0e0; +} diff --git a/src/styles/themes/dusk.css b/src/styles/themes/dusk.css new file mode 100644 index 0000000..5329388 --- /dev/null +++ b/src/styles/themes/dusk.css @@ -0,0 +1,112 @@ +/** + * Dusk Theme - Sunset Orange & Pink + * + * Warm oranges, coral pinks, and soft purples. + * Inspired by sunset skies and twilight hues. + */ + +[data-theme="dusk"] { + /* ========================================================================== + 1. SURFACE LAYERS - Warm Purple-Brown + ========================================================================== */ + --surface-backdrop: #1a1518; + --surface-elevated: #110d0f; + --surface-primary: #241e21; + --surface-secondary: #2d262a; + --surface-tertiary: #362e33; + --surface-quaternary: #40363c; + --surface-overlay: #0c090b; + --surface-input: #201a1d; + --surface-hover: rgba(255, 230, 240, 0.06); + --surface-active: rgba(251, 146, 60, 0.12); + --surface-tooltip: #241e21; + + /* ========================================================================== + 2. BORDERS - Warm Dusty Rose + ========================================================================== */ + --border-subtle: rgba(180, 160, 165, 0.15); + --border-default: rgba(180, 160, 165, 0.28); + --border-strong: rgba(180, 160, 165, 0.45); + --border-accent: rgba(251, 146, 60, 0.55); + + /* ========================================================================== + 3. TEXT - Warm Off-White + ========================================================================== */ + --text-primary: #faf0f2; + --text-secondary: #e2d0d5; + --text-tertiary: #b8a0a8; + --text-disabled: #786068; + --text-inverse: #110d0f; + + /* ========================================================================== + 4. ACCENTS - Sunset Oranges & Pinks + ========================================================================== */ + --accent-info: #fb923c; + --accent-success: #4ade80; + --accent-warning: #facc15; + --accent-danger: #f87171; + + /* ========================================================================== + 5. ACCENT GLOWS + ========================================================================== */ + --glow-info: 0 0 20px rgba(251, 146, 60, 0.35); + --glow-success: 0 0 20px rgba(74, 222, 128, 0.3); + --glow-warning: 0 0 20px rgba(250, 204, 21, 0.3); + --glow-danger: 0 0 20px rgba(248, 113, 113, 0.3); + + /* ========================================================================== + 6. GRAPH COLORS + ========================================================================== */ + --graph-node-default: rgba(64, 54, 60, 0.95); + --graph-node-epic: rgba(251, 146, 60, 0.18); + --graph-edge-default: rgba(180, 160, 165, 0.3); + --graph-edge-selected: #fb923c; + --graph-edge-cycle: #facc15; + + /* ========================================================================== + 7. SEMANTIC ALPHAS + ========================================================================== */ + --alpha-white-low: rgba(250, 240, 242, 0.05); + --alpha-white-medium: rgba(250, 240, 242, 0.11); + --alpha-white-high: rgba(250, 240, 242, 0.22); + --alpha-black-low: rgba(0, 0, 0, 0.2); + --alpha-black-medium: rgba(0, 0, 0, 0.45); + --alpha-black-high: rgba(0, 0, 0, 0.75); + + /* ========================================================================== + 8. STATUS COLORS + ========================================================================== */ + --status-ready: rgba(74, 222, 128, 0.18); + --status-in-progress: rgba(250, 204, 21, 0.18); + --status-blocked: rgba(248, 113, 113, 0.18); + --status-closed: rgba(184, 160, 168, 0.12); + --status-deferred: rgba(184, 160, 168, 0.08); + + /* ========================================================================== + 9. SHADOWS + ========================================================================== */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); + + /* ========================================================================== + 10. AGENT ROLE COLORS + ========================================================================== */ + --agent-role-ui: #fdba74; + --agent-role-graph: #86efac; + --agent-role-orchestrator: #f9a8d4; + --agent-role-researcher: #c4b5fd; + + /* ========================================================================== + 11. SCROLLBARS + ========================================================================== */ + --scrollbar-track: rgba(250, 240, 242, 0.03); + --scrollbar-thumb: rgba(180, 160, 165, 0.22); + --scrollbar-thumb-hover: rgba(180, 160, 165, 0.38); + + /* ========================================================================== + 12. CODE/SYNTAX + ========================================================================== */ + --code-background: #201a1d; + --code-text: #e2d0d5; +} diff --git a/src/styles/themes/forest.css b/src/styles/themes/forest.css new file mode 100644 index 0000000..01df878 --- /dev/null +++ b/src/styles/themes/forest.css @@ -0,0 +1,112 @@ +/** + * Forest Theme - Mossy Green-Brown + * + * Organic, earthy greens with amber gold accents. + * Inspired by forest floors and mossy rocks. + */ + +[data-theme="forest"] { + /* ========================================================================== + 1. SURFACE LAYERS - Earthy Moss-Green + ========================================================================== */ + --surface-backdrop: #121510; + --surface-elevated: #0a0d08; + --surface-primary: #1a1f15; + --surface-secondary: #22281a; + --surface-tertiary: #2b3320; + --surface-quaternary: #353d28; + --surface-overlay: #060804; + --surface-input: #181c13; + --surface-hover: rgba(220, 235, 200, 0.06); + --surface-active: rgba(132, 204, 22, 0.12); + --surface-tooltip: #1a1f15; + + /* ========================================================================== + 2. BORDERS - Mossy Grey-Green + ========================================================================== */ + --border-subtle: rgba(150, 165, 130, 0.15); + --border-default: rgba(150, 165, 130, 0.28); + --border-strong: rgba(150, 165, 130, 0.45); + --border-accent: rgba(132, 204, 22, 0.55); + + /* ========================================================================== + 3. TEXT - Warm Moss + ========================================================================== */ + --text-primary: #f2f5ed; + --text-secondary: #c8d4b5; + --text-tertiary: #96a582; + --text-disabled: #5e6b50; + --text-inverse: #0a0d08; + + /* ========================================================================== + 4. ACCENTS - Forest Greens & Amber Gold + ========================================================================== */ + --accent-info: #a3e635; + --accent-success: #4ade80; + --accent-warning: #fbbf24; + --accent-danger: #f87171; + + /* ========================================================================== + 5. ACCENT GLOWS + ========================================================================== */ + --glow-info: 0 0 20px rgba(163, 230, 53, 0.35); + --glow-success: 0 0 20px rgba(74, 222, 128, 0.3); + --glow-warning: 0 0 20px rgba(251, 191, 36, 0.3); + --glow-danger: 0 0 20px rgba(248, 113, 113, 0.3); + + /* ========================================================================== + 6. GRAPH COLORS + ========================================================================== */ + --graph-node-default: rgba(53, 61, 40, 0.95); + --graph-node-epic: rgba(163, 230, 53, 0.15); + --graph-edge-default: rgba(150, 165, 130, 0.3); + --graph-edge-selected: #a3e635; + --graph-edge-cycle: #fbbf24; + + /* ========================================================================== + 7. SEMANTIC ALPHAS + ========================================================================== */ + --alpha-white-low: rgba(242, 245, 237, 0.05); + --alpha-white-medium: rgba(242, 245, 237, 0.11); + --alpha-white-high: rgba(242, 245, 237, 0.22); + --alpha-black-low: rgba(0, 0, 0, 0.2); + --alpha-black-medium: rgba(0, 0, 0, 0.45); + --alpha-black-high: rgba(0, 0, 0, 0.75); + + /* ========================================================================== + 8. STATUS COLORS + ========================================================================== */ + --status-ready: rgba(74, 222, 128, 0.18); + --status-in-progress: rgba(251, 191, 36, 0.18); + --status-blocked: rgba(248, 113, 113, 0.18); + --status-closed: rgba(150, 165, 130, 0.12); + --status-deferred: rgba(150, 165, 130, 0.08); + + /* ========================================================================== + 9. SHADOWS + ========================================================================== */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); + + /* ========================================================================== + 10. AGENT ROLE COLORS + ========================================================================== */ + --agent-role-ui: #93c5fd; + --agent-role-graph: #86efac; + --agent-role-orchestrator: #d8b4fe; + --agent-role-researcher: #fdba74; + + /* ========================================================================== + 11. SCROLLBARS + ========================================================================== */ + --scrollbar-track: rgba(242, 245, 237, 0.03); + --scrollbar-thumb: rgba(150, 165, 130, 0.22); + --scrollbar-thumb-hover: rgba(150, 165, 130, 0.38); + + /* ========================================================================== + 12. CODE/SYNTAX + ========================================================================== */ + --code-background: #181c13; + --code-text: #c8d4b5; +} diff --git a/src/styles/themes/index.css b/src/styles/themes/index.css index 02d373a..e91403f 100644 --- a/src/styles/themes/index.css +++ b/src/styles/themes/index.css @@ -4,21 +4,25 @@ * Import this file in your main CSS to enable the theme system. * The data-theme attribute on controls which theme is active. * - * Example: - * - * (future) + * Available themes: + * aurora - Warm charcoal with cyan accents (default) + * midnight - Cool blue-purple with violet accents + * forest - Earthy green-brown with lime accents + * dusk - Warm purple-brown with orange accents + * contrast - Pure black with neon accents (high contrast) + * + * To switch themes: + * document.documentElement.setAttribute('data-theme', 'midnight'); */ @import './tokens.css'; @import './aurora.css'; +@import './midnight.css'; +@import './forest.css'; +@import './dusk.css'; +@import './contrast.css'; /* Default theme fallback */ html:not([data-theme]) { - /* Inherits aurora as default since it's imported above */ + /* Aurora is the default theme */ } - -/* - * Future themes would be added here: - * @import './midnight.css'; - * @import './forest.css'; - */ diff --git a/src/styles/themes/midnight.css b/src/styles/themes/midnight.css new file mode 100644 index 0000000..2af0137 --- /dev/null +++ b/src/styles/themes/midnight.css @@ -0,0 +1,112 @@ +/** + * Midnight Theme - Deep Blue-Purple + * + * Cool, mysterious deep blue with purple and violet accents. + * For those who prefer cool tones over warm charcoal. + */ + +[data-theme="midnight"] { + /* ========================================================================== + 1. SURFACE LAYERS - Deep Blue-Purple + ========================================================================== */ + --surface-backdrop: #0a0a12; + --surface-elevated: #050510; + --surface-primary: #12121f; + --surface-secondary: #18182b; + --surface-tertiary: #202038; + --surface-quaternary: #2a2a45; + --surface-overlay: #03030a; + --surface-input: #151525; + --surface-hover: rgba(199, 195, 255, 0.06); + --surface-active: rgba(139, 92, 246, 0.15); + --surface-tooltip: #12121f; + + /* ========================================================================== + 2. BORDERS - Cool Grey-Blue + ========================================================================== */ + --border-subtle: rgba(150, 155, 180, 0.15); + --border-default: rgba(150, 155, 180, 0.28); + --border-strong: rgba(150, 155, 180, 0.45); + --border-accent: rgba(139, 92, 246, 0.55); + + /* ========================================================================== + 3. TEXT - Cool White + ========================================================================== */ + --text-primary: #f0f0f8; + --text-secondary: #c5c5d8; + --text-tertiary: #9090a8; + --text-disabled: #5a5a70; + --text-inverse: #050510; + + /* ========================================================================== + 4. ACCENTS - Violet/Purple/Cyan + ========================================================================== */ + --accent-info: #a78bfa; + --accent-success: #34d399; + --accent-warning: #fbbf24; + --accent-danger: #f87171; + + /* ========================================================================== + 5. ACCENT GLOWS + ========================================================================== */ + --glow-info: 0 0 20px rgba(167, 139, 250, 0.35); + --glow-success: 0 0 20px rgba(52, 211, 153, 0.3); + --glow-warning: 0 0 20px rgba(251, 191, 36, 0.3); + --glow-danger: 0 0 20px rgba(248, 113, 113, 0.3); + + /* ========================================================================== + 6. GRAPH COLORS + ========================================================================== */ + --graph-node-default: rgba(42, 42, 69, 0.95); + --graph-node-epic: rgba(167, 139, 250, 0.18); + --graph-edge-default: rgba(150, 155, 180, 0.3); + --graph-edge-selected: #a78bfa; + --graph-edge-cycle: #fbbf24; + + /* ========================================================================== + 7. SEMANTIC ALPHAS + ========================================================================== */ + --alpha-white-low: rgba(240, 240, 248, 0.05); + --alpha-white-medium: rgba(240, 240, 248, 0.11); + --alpha-white-high: rgba(240, 240, 248, 0.22); + --alpha-black-low: rgba(0, 0, 0, 0.25); + --alpha-black-medium: rgba(0, 0, 0, 0.5); + --alpha-black-high: rgba(0, 0, 0, 0.8); + + /* ========================================================================== + 8. STATUS COLORS + ========================================================================== */ + --status-ready: rgba(52, 211, 153, 0.18); + --status-in-progress: rgba(251, 191, 36, 0.18); + --status-blocked: rgba(248, 113, 113, 0.18); + --status-closed: rgba(144, 144, 168, 0.12); + --status-deferred: rgba(144, 144, 168, 0.08); + + /* ========================================================================== + 9. SHADOWS + ========================================================================== */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); + + /* ========================================================================== + 10. AGENT ROLE COLORS + ========================================================================== */ + --agent-role-ui: #93c5fd; + --agent-role-graph: #86efac; + --agent-role-orchestrator: #d8b4fe; + --agent-role-researcher: #fdba74; + + /* ========================================================================== + 11. SCROLLBARS + ========================================================================== */ + --scrollbar-track: rgba(240, 240, 248, 0.03); + --scrollbar-thumb: rgba(150, 155, 180, 0.22); + --scrollbar-thumb-hover: rgba(150, 155, 180, 0.38); + + /* ========================================================================== + 12. CODE/SYNTAX + ========================================================================== */ + --code-background: #151525; + --code-text: #c5c5d8; +}