/* ============================================================================ * E365 Dashboard theme tokens — 6 palettes inspired by the Orange concepts. * * Each [data-theme=X] block overrides the base variables defined in * ../edgent/prototype/styles.css. The dashboard's own widgets read from these * variables, so a single attribute flip on retints the whole console. * * Body background (radial gradients) is themed too — palette-aware so dark * cosmic themes get warm purple bloom while festival themes get marigold haze. * Orbs auto-hide on light themes (they look wrong over cream paper). * ============================================================================ */ :root { --body-font: 'Plus Jakarta Sans', system-ui, sans-serif; --display-font: 'Plus Jakarta Sans', system-ui, sans-serif; --mono-font: 'Space Grotesk', ui-monospace, monospace; } /* ----- v1 · MIDNIGHT (original dark purple, gold accent) -------------------- */ [data-theme="midnight"] { --bg-0: #0a0613; --bg-1: #150a26; --surface: rgba(255,255,255,0.06); --surface-2: rgba(255,255,255,0.09); --stroke: rgba(255,255,255,0.12); --text: #f6f3ff; --text-soft: #b8aed6; --text-mute: #8a82a6; --brand-a: #ff5d8f; --brand-b: #b066ff; --brand-c: #5ae0ff; --accent-gold: #ffd166; --accent-green: #6ff7c1; --danger: #ff7a7a; --body-font: 'Plus Jakarta Sans', system-ui, sans-serif; --display-font: 'Plus Jakarta Sans', system-ui, sans-serif; --mono-font: 'Space Grotesk', ui-monospace, monospace; --bg-gradient: radial-gradient(1200px 700px at 80% -10%, #2a0f47 0%, transparent 60%), radial-gradient(900px 600px at -10% 20%, #3a0f56 0%, transparent 55%), radial-gradient(800px 600px at 50% 110%, #1a0d3d 0%, transparent 60%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); } /* ----- v2 · TERMINAL (near-black, neon green/cyan/orange, mono feel) -------- */ [data-theme="terminal"] { --bg-0: #020203; --bg-1: #06060a; --surface: rgba(255,255,255,0.02); --surface-2: rgba(255,255,255,0.045); --stroke: rgba(255,255,255,0.09); --text: #dcdce2; --text-soft: #7a7a85; --text-mute: #4a4a55; --brand-a: #FF6A1A; --brand-b: #3CFF8E; --brand-c: #3FD8E6; --accent-gold: #FFB561; --accent-green: #3CFF8E; --danger: #FF3C5C; --body-font: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; --display-font: 'JetBrains Mono', ui-monospace, monospace; --mono-font: 'JetBrains Mono', ui-monospace, monospace; --bg-gradient: radial-gradient(1400px 800px at 100% -10%, rgba(255,106,26,0.10) 0%, transparent 50%), radial-gradient(1000px 700px at -10% 30%, rgba(60,255,142,0.06) 0%, transparent 50%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); } /* ----- v3 · EDITORIAL (cream paper, deep ink, serif headlines) -------------- */ [data-theme="editorial"][data-theme-mode="light"], [data-theme="editorial"] { --bg-0: #F0EBE0; --bg-1: #E8E2D3; --surface: rgba(10,10,10,0.04); --surface-2: rgba(10,10,10,0.06); --stroke: rgba(10,10,10,0.14); --text: #0a0a0a; --text-soft: #3a3a3a; --text-mute: #6a6a6a; --brand-a: #FF6A1A; --brand-b: #c2362d; --brand-c: #FF2EA6; --accent-gold: #b8830a; --accent-green: #2a8957; --danger: #c2362d; --body-font: 'Inter', system-ui, sans-serif; --display-font: 'Fraunces', 'Instrument Serif', Georgia, serif; --mono-font: 'JetBrains Mono', ui-monospace, monospace; --bg-gradient: var(--bg-0); } /* ----- v4 · COSMOS (deep space, soft pastel, glassy) ----------------------- */ [data-theme="cosmos"] { --bg-0: #03020a; --bg-1: #0a0617; --surface: rgba(180,160,255,0.05); --surface-2: rgba(180,160,255,0.09); --stroke: rgba(180,160,255,0.14); --text: #f4f2ff; --text-soft: #a8a4c5; --text-mute: #65607f; --brand-a: #ff5d8f; --brand-b: #b066ff; --brand-c: #5ae0ff; --accent-gold: #ffd166; --accent-green: #6ff7c1; --danger: #ff7a7a; --body-font: 'Space Grotesk', system-ui, sans-serif; --display-font: 'Instrument Serif', Georgia, serif; --mono-font: 'JetBrains Mono', ui-monospace, monospace; --bg-gradient: radial-gradient(1400px 900px at 80% -10%, rgba(120,80,200,0.22) 0%, transparent 60%), radial-gradient(900px 700px at -10% 20%, rgba(80,180,255,0.10) 0%, transparent 60%), radial-gradient(700px 700px at 50% 110%, rgba(255,140,210,0.12) 0%, transparent 60%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); } /* ----- v5 · FESTIVAL (marigold cream, magenta + teal, saturated) ----------- */ [data-theme="festival"][data-theme-mode="light"], [data-theme="festival"] { --bg-0: #FFF6E3; --bg-1: #FFE8C8; --surface: rgba(255,255,255,0.6); --surface-2: rgba(255,255,255,0.8); --stroke: rgba(255,46,166,0.20); --text: #14082a; --text-soft: #5e4a87; --text-mute: #8e7fb0; --brand-a: #FF2EA6; --brand-b: #FF6A1A; --brand-c: #00A89C; --accent-gold: #E89E00; --accent-green: #00A89C; --danger: #c63a3a; --body-font: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --display-font: 'Rozha One', 'Bricolage Grotesque', serif; --mono-font: 'JetBrains Mono', ui-monospace, monospace; --bg-gradient: radial-gradient(1400px 900px at 80% -10%, rgba(255,46,166,0.20) 0%, transparent 60%), radial-gradient(900px 700px at -10% 20%, rgba(0,168,156,0.15) 0%, transparent 60%), radial-gradient(700px 700px at 50% 110%, rgba(232,158,0,0.18) 0%, transparent 60%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); } /* ----- v6 · MINIMAL (cream paper, refined sans + serif) -------------------- */ [data-theme="minimal"][data-theme-mode="light"], [data-theme="minimal"] { --bg-0: #FAF8F3; --bg-1: #F0EBE0; --surface: rgba(0,0,0,0.025); --surface-2: rgba(0,0,0,0.045); --stroke: rgba(0,0,0,0.10); --text: #1a1a1a; --text-soft: #555; --text-mute: #888; --brand-a: #FF6A1A; --brand-b: #c2362d; --brand-c: #2a8957; --accent-gold: #b8830a; --accent-green: #2a8957; --danger: #c2362d; --body-font: 'Inter', system-ui, sans-serif; --display-font: 'Newsreader', 'Times New Roman', serif; --mono-font: 'JetBrains Mono', ui-monospace, monospace; --bg-gradient: var(--bg-0); } /* ============================================================================ * Cross-theme application * ============================================================================ */ html { background: var(--bg-gradient, var(--bg-0)) fixed; min-height: 100%; } body { background: transparent; font-family: var(--body-font, 'Plus Jakarta Sans', system-ui, sans-serif); } .app h1, .agent-name, .feed-line strong, .kpi-label { font-family: var(--display-font, inherit); letter-spacing: -0.01em; } .kpi-val { font-family: var(--mono-font, 'Space Grotesk', monospace); } /* The animated pink/purple orbs only feel native on midnight + cosmos — every other palette needs them gone so the themed --bg-gradient can read clean. */ .bg-orbs { display: none; } [data-theme="midnight"] .bg-orbs, [data-theme="cosmos"] .bg-orbs { display: block; } /* Theme selector in the header ------------------------------------------------ */ .theme-picker { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 12px; background: var(--surface, rgba(255,255,255,0.05)); border: 1px solid var(--stroke, rgba(255,255,255,0.12)); font-size: 12px; color: var(--text-soft, #b8aed6); } .theme-picker svg { width: 14px; height: 14px; opacity: 0.7; } .theme-picker label { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 10.5px; } .theme-picker select { background: transparent; color: var(--text, #f6f3ff); border: none; font: inherit; font-family: var(--body-font); padding: 4px 22px 4px 4px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .theme-picker select:focus { outline: 1px solid var(--brand-a, #ff5d8f); outline-offset: 1px; border-radius: 4px; } .theme-picker select option { background: var(--bg-1, #150a26); color: var(--text, #f6f3ff); }