/* src/shared/theme.css */ /* * Single source of truth for NeosChat design tokens. * Linked once in index.html ; because CSS custom properties are inherited, these * tokens cascade into every component's shadow root without needing a per-shadow . * * ACCENT CONVENTION (important): there are TWO accent tokens that must stay in sync — * --accent-color : a full hex color, for `color: var(--accent-color)` (the common case). * --accent-rgb : the same color as a bare "r, g, b" triplet, for `rgba(var(--accent-rgb), a)`. * Never write `rgba(var(--accent-color), a)` — that mixes the two and silently drops the rule. * * THEME vs ACCENT: `data-theme` (light/dark/cyberpunk) controls the whole surface; `data-accent` * (an optional preset) only overrides the accent color. They are orthogonal and set separately * by src/core/theme.js. `data-accent` rules come AFTER the theme rules so a chosen preset wins. */ :root { --bg-app: #f5f7fa; --bg-panel: #ffffff; --text-main: #333333; --text-muted: #555555; --border-color: #ddd; --shadow: rgba(0,0,0,0.1); --input-bg: #ffffff; --accent-color: #007BFF; --accent-rgb: 0, 123, 255; --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } [data-theme="dark"] { --bg-app: #121212; --bg-panel: #1e1e1e; --text-main: #e0e0e0; --text-muted: #aaaaaa; --border-color: #333; --shadow: rgba(0,0,0,0.5); --input-bg: #2d2d2d; --accent-color: #1c7ed6; --accent-rgb: 28, 126, 214; --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } [data-theme="cyberpunk"] { --bg-app: #050505; --bg-panel: #0d0d0d; --text-main: #00f3ff; --text-muted: #00ff9f; --border-color: #333; --shadow: 0 0 20px rgba(0, 243, 255, 0.15); --input-bg: #000000; --accent-color: #d600d6; --accent-rgb: 214, 0, 214; --font-main: 'JetBrains Mono', monospace; color-scheme: dark; } /* Accent presets — override only the accent, on top of any theme. Set via Theme.setAccent(). */ [data-accent="aurora"] { --accent-color: #14b8a6; --accent-rgb: 20, 184, 166; } [data-accent="cyberpunk"] { --accent-color: #d946ef; --accent-rgb: 217, 70, 239; } [data-accent="toxic"] { --accent-color: #22c55e; --accent-rgb: 34, 197, 94; } [data-accent="crimson"] { --accent-color: #ef4444; --accent-rgb: 239, 68, 68; } /* Theme-specific chrome tweaks (light-DOM only; moved verbatim from index.html). */ [data-theme="cyberpunk"] button { text-transform: uppercase; letter-spacing: 1px; } [data-theme="cyberpunk"] .card { border: 1px solid var(--border-color); box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); }