/* ════════════════════════════════════════════════════════════════════════════ theme-vivid.css — Vivid light/dark theme variables for the entire site Applied via [data-theme="light"] or [data-theme="dark"] on ════════════════════════════════════════════════════════════════════════════ */ /* ─── LIGHT THEME (default) ─── */ :root, [data-theme="light"] { /* Override styles.css variables */ --bg-0: #e8eaf2; --bg-1: #f0f2f8; --bg-2: #ffffff; --card: #ffffff; --card-hover: #f8f9ff; --card-border: rgba(23,23,119,0.12); --card-border-strong: rgba(23,23,119,0.20); /* Surfaces */ --theme-bg: #f0f2f8; --theme-bg-grad-1: radial-gradient(ellipse 800px 600px at 10% 5%, rgba(99,102,241,0.10), transparent 60%); --theme-bg-grad-2: radial-gradient(ellipse 700px 500px at 90% 0%, rgba(236,72,153,0.06), transparent 60%); --theme-bg-grad-3: radial-gradient(ellipse 900px 700px at 50% 100%, rgba(6,182,212,0.08), transparent 60%); --theme-panel: #ffffff; --theme-panel-hover: #f8f9ff; --theme-border: rgba(23,23,119,0.12); --theme-border-strong: rgba(23,23,119,0.20); /* Text */ --theme-ink: #171777; --theme-text: #1e293b; --theme-text-soft: #475569; --theme-muted: #64748b; --theme-muted-dim: #94a3b8; /* Override styles.css text vars */ --ink: #171777; --text: #1e293b; --text-soft: #475569; --muted: #64748b; --primary: #6366f1; --primary-deep: #4338ca; --accent: #06b6d4; --hot: #ec4899; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; /* Accents — vivid */ --theme-primary: #6366f1; --theme-primary-deep: #4338ca; --theme-accent: #06b6d4; --theme-hot: #ec4899; --theme-success: #10b981; --theme-warning: #f59e0b; --theme-danger: #ef4444; /* Glow */ --theme-glow-primary: 0 0 32px rgba(99,102,241,0.35); --theme-glow-accent: 0 0 28px rgba(6,182,212,0.35); --glow-primary: 0 0 32px rgba(99,102,241,0.35); --glow-accent: 0 0 28px rgba(6,182,212,0.35); --glow-hot: 0 0 24px rgba(236,72,153,0.40); /* Shadows */ --theme-shadow-card: 0 8px 32px rgba(23,23,119,0.08), 0 2px 8px rgba(0,0,0,0.06); --theme-shadow-hover: 0 16px 48px rgba(23,23,119,0.16), 0 4px 16px rgba(0,0,0,0.08); --theme-shadow-pop: 0 24px 64px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.12); --shadow-card: 0 8px 32px rgba(23,23,119,0.08), 0 2px 8px rgba(0,0,0,0.06); --shadow-pop: 0 24px 64px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.12); /* ECharts */ --theme-chart-bg: #ffffff; --theme-chart-text: #1e293b; /* Toggle */ --toggle-bg: rgba(99,102,241,0.15); --toggle-border: rgba(99,102,241,0.25); --toggle-color: #6366f1; } /* ─── DARK THEME ─── */ [data-theme="dark"] { /* Override styles.css variables */ --bg-0: #060818; --bg-1: #0a0e27; --bg-2: #0f172a; --card: rgba(255, 255, 255, 0.04); --card-hover: rgba(255, 255, 255, 0.07); --card-border: rgba(255, 255, 255, 0.08); --card-border-strong: rgba(255, 255, 255, 0.16); /* Surfaces */ --theme-bg: #0a0e27; --theme-bg-grad-1: radial-gradient(ellipse 800px 600px at 10% 5%, rgba(99,102,241,0.18), transparent 60%); --theme-bg-grad-2: radial-gradient(ellipse 700px 500px at 90% 0%, rgba(236,72,153,0.12), transparent 60%); --theme-bg-grad-3: radial-gradient(ellipse 900px 700px at 50% 100%, rgba(6,182,212,0.14), transparent 60%); --theme-panel: rgba(255,255,255,0.04); --theme-panel-hover: rgba(255,255,255,0.07); --theme-border: rgba(255,255,255,0.08); --theme-border-strong: rgba(255,255,255,0.16); /* Text */ --theme-ink: #818cf8; --theme-text: #f1f5f9; --theme-text-soft: #cbd5e1; --theme-muted: #94a3b8; --theme-muted-dim: #64748b; /* Override styles.css text vars */ --ink: #818cf8; --text: #f1f5f9; --text-soft: #cbd5e1; --muted: #94a3b8; --primary: #818cf8; --primary-deep: #6366f1; --accent: #22d3ee; --hot: #f472b6; --success: #34d399; --warning: #fbbf24; --danger: #f87171; /* Accents */ --theme-primary: #818cf8; --theme-primary-deep: #6366f1; --theme-accent: #22d3ee; --theme-hot: #f472b6; --theme-success: #34d399; --theme-warning: #fbbf24; --theme-danger: #f87171; /* Glow */ --theme-glow-primary: 0 0 32px rgba(129,140,248,0.45); --theme-glow-accent: 0 0 28px rgba(34,211,238,0.40); --glow-primary: 0 0 32px rgba(129,140,248,0.45); --glow-accent: 0 0 28px rgba(34,211,238,0.40); --glow-hot: 0 0 24px rgba(244,114,182,0.40); /* Shadows */ --theme-shadow-card: 0 8px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.20); --theme-shadow-hover: 0 16px 48px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.25); --theme-shadow-pop: 0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.35); --shadow-card: 0 8px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.20); --shadow-pop: 0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.35); /* ECharts */ --theme-chart-bg: transparent; --theme-chart-text: #f1f5f9; /* Toggle */ --toggle-bg: rgba(255,255,255,0.08); --toggle-border: rgba(255,255,255,0.15); --toggle-color: #fbbf24; } /* ════════════════════════════════════════════════════════════════════════════ APPLY THEME VARIABLES TO BASE ELEMENTS ════════════════════════════════════════════════════════════════════════════ */ html, body { background: var(--theme-bg) !important; background-image: var(--theme-bg-grad-1), var(--theme-bg-grad-2), var(--theme-bg-grad-3) !important; background-attachment: fixed !important; color: var(--theme-text) !important; transition: background-color 280ms ease, color 280ms ease; } [data-theme="dark"] body { color: var(--theme-text) !important; } /* Cards / panels */ .card, .canvas-tile, .chart-card, .mini-card, .chunk, .source-card, .answer-box, .gallery-tile, .tile { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; box-shadow: var(--theme-shadow-card) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: background 280ms ease, border-color 280ms ease, color 280ms ease, box-shadow 280ms ease; } /* Card hover */ .card:hover, .canvas-tile:hover, .tile:hover, .chart-card:hover { border-color: var(--theme-primary) !important; box-shadow: var(--theme-shadow-hover) !important; } /* Text elements */ h1, h2, h3, .canvas-title, .section-title, .card-title, .tile-title, .exec-title, .exec-metric-label, .chart-title { color: var(--theme-text) !important; } p, .lead, .tile-desc, .canvas-asof, .chart-value, .exec-metric-period, .exec-asof, .canvas-notes, .canvas-tile-head, .footer, footer { color: var(--theme-text-soft) !important; } .exec-metric-value, .kpi-big, .hero-stat .value { color: var(--theme-text) !important; } /* Topbar */ .topbar, .gallery-topbar { background: transparent !important; border-bottom: none !important; } /* Brand */ .brand-name, .gallery-brand { color: #fff !important; } /* Links */ a, .navlink { color: var(--theme-accent) !important; } a:hover, .navlink:hover { color: var(--theme-hot) !important; } /* Buttons */ .btn--primary { background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-deep)) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(99,102,241,0.35) !important; } .btn--accent { background: linear-gradient(135deg, var(--theme-accent), #0e7490) !important; } .btn--ghost, .canvas-back, .canvas-reset-btn { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; color: var(--theme-text-soft) !important; } [data-theme="dark"] .btn--ghost, [data-theme="dark"] .canvas-back, [data-theme="dark"] .canvas-reset-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--theme-text) !important; } /* Pills / badges */ .pill, .tile-badge { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; color: var(--theme-text-soft) !important; } [data-theme="dark"] .pill, [data-theme="dark"] .tile-badge { background: rgba(255,255,255,0.06) !important; } /* Inputs */ .chat-input, .form-input, .form-select { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } .chat-input::placeholder, .form-input::placeholder { color: var(--theme-muted-dim) !important; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(129,140,248,0.35) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(129,140,248,0.55) !important; } /* Selection */ [data-theme="dark"] ::selection { background: rgba(129,140,248,0.40) !important; color: #fff !important; } /* Executive dashboard tiles */ .exec-page { background: var(--theme-bg) !important; } .exec-panel { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; } .exec-visual { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; } /* Executive tables */ .exec-table th { background: var(--theme-primary-deep) !important; color: #fff !important; } .exec-table td { color: var(--theme-text) !important; border-color: var(--theme-border) !important; } [data-theme="dark"] .exec-table tr:nth-child(even) td { background: rgba(255,255,255,0.02) !important; } /* Executive deltas */ .exec-delta.good { color: var(--theme-success) !important; } .exec-delta.bad { color: var(--theme-danger) !important; } /* Canvas host */ .canvas-grid { background: transparent !important; } .canvas-tile-head { background: var(--theme-panel) !important; border-bottom-color: var(--theme-border) !important; color: var(--theme-text) !important; } /* Drag/resize handles */ .canvas-layout-move { background: var(--toggle-bg) !important; color: var(--toggle-color) !important; } /* Modal */ .modal { background: var(--theme-panel) !important; border-color: var(--theme-border-strong) !important; } .modal-head, .modal-foot { border-color: var(--theme-border) !important; } /* Hero gradient text */ .hero h1 { background: linear-gradient(120deg, var(--theme-text) 0%, var(--theme-primary) 50%, var(--theme-accent) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Code */ code, .codebox { background: rgba(0,0,0,0.08) !important; color: var(--theme-primary) !important; } [data-theme="dark"] code, [data-theme="dark"] .codebox { background: rgba(255,255,255,0.06) !important; color: var(--theme-accent) !important; } /* Footer */ .footer, footer { color: var(--theme-muted) !important; border-top-color: var(--theme-border) !important; } /* Gallery */ .gallery-hero { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; } /* Filter pills */ .gallery-filter, .filter { background: var(--theme-panel) !important; border-color: var(--theme-border) !important; color: var(--theme-muted) !important; } .filter.is-active { background: var(--theme-primary-deep) !important; color: #fff !important; border-color: var(--theme-primary-deep) !important; } /* Canvas iframes: set background to match theme */ .canvas-tile-body iframe { background: var(--theme-chart-bg) !important; } /* ════════════════════════════════════════════════════════════════════════════ TRANSITION — smooth theme switch ════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow, fill; transition-duration: 280ms; transition-timing-function: ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ── Executive text contrast overrides ── */ .exec-title { color: var(--exec-primary) !important; } .exec-metric-label { color: var(--exec-ink) !important; font-weight: 700 !important; } .exec-metric-value { color: var(--exec-ink) !important; } .exec-metric-period { color: var(--exec-muted) !important; } .exec-asof { color: var(--exec-muted) !important; } .exec-panel-title { color: var(--exec-ink) !important; } .exec-notes { color: var(--exec-muted) !important; } .exec-delta.good { color: #059669 !important; } .exec-delta.bad { color: #dc2626 !important; } /* ── ECharts axis/label contrast ── */ [data-theme="light"] .exec-chart .ec-text, [data-theme="light"] .exec-chart text { fill: #1e293b !important; color: #1e293b !important; } [data-theme="dark"] .exec-chart .ec-text, [data-theme="dark"] .exec-chart text { fill: #e2e8f0 !important; color: #e2e8f0 !important; } /* ── Canvas tile text (CSR/ITS pages) ── */ .canvas-tile-title { color: var(--exec-ink) !important; } .canvas-tile-head { color: var(--exec-ink) !important; } [data-theme="dark"] .canvas-tile-title { color: #f1f5f9 !important; } [data-theme="dark"] .canvas-tile-head { color: #f1f5f9 !important; } /* ════════════════════════════════════════════════════════════════════════════ EXECUTIVE DASHBOARD VARIABLE OVERRIDES — fix contrast in both themes ════════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --exec-bg: #f0f2f8; --exec-panel: #ffffff; --exec-ink: #171777; --exec-muted: #3b4a6b; --exec-border: rgba(23,23,119,0.15); --exec-grid: #e2e6f0; --exec-primary: #0808ee; --exec-secondary: #09c698; --exec-accent: #bbff05; --exec-highlight: #38bdf8; --exec-shadow: 0 8px 22px rgba(23,23,119,0.10); } [data-theme="dark"] { --exec-bg: #0a0e27; --exec-panel: rgba(255,255,255,0.04); --exec-ink: #818cf8; --exec-muted: #b0bcd4; --exec-border: rgba(255,255,255,0.10); --exec-grid: rgba(255,255,255,0.06); --exec-primary: #818cf8; --exec-secondary: #22d3ee; --exec-accent: #fbbf24; --exec-highlight: #38bdf8; --exec-shadow: 0 8px 22px rgba(0,0,0,0.40); }