:root { --bg: #08080c; --bg-2: #0e0e14; --paper: rgba(20, 20, 28, 0.78); --paper-solid: rgba(16, 16, 22, 0.96); --card-border: rgba(255, 255, 255, 0.08); --ink: #f2eee7; --ink-muted: rgba(242, 238, 231, 0.65); --ink-subtle: rgba(242, 238, 231, 0.42); --ink-whisper: rgba(242, 238, 231, 0.14); --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.14); /* Accent is now WHITE — the "wow" comes from a soft glow, not hue. We keep --accent as a single token so the rest of the CSS doesn't need rewiring; --accent-glow is for box-shadow / text-shadow only. */ --accent: #ffffff; --accent-hover: #ffffff; --accent-dim: rgba(255, 255, 255, 0.10); --accent-glow: rgba(255, 255, 255, 0.55); --accent-ink: #0a0a10; /* text on top of white buttons */ --success: #6cc69d; --error: #e04632; --error-dim: rgba(224, 70, 50, 0.15); /* Theme-specific surfaces consumed by hand-rolled views (header glass, home aurora, atom-bg canvas). Components should prefer these over re-inventing rgba() literals so the light theme can override in one place. */ --header-bg: rgba(11, 11, 15, 0.72); --landing-bg: #06060a; --landing-grid-line: rgba(255, 255, 255, 0.045); --landing-vignette: rgba(6, 6, 10, 0.55); --landing-vignette-edge: #06060a; --tag-bg: rgba(10, 8, 14, 0.72); --eyebrow-bg: rgba(10, 10, 16, 0.6); /* Primary CTA: dark theme keeps the white-gradient pill. */ --btn-primary-bg: linear-gradient(180deg, #ffffff 0%, #ece7dc 100%); --btn-primary-bg-hover: linear-gradient(180deg, #ffffff 0%, #f4efe4 100%); --btn-primary-shadow: 0 8px 28px rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); --btn-primary-shadow-hover: 0 14px 40px rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.65); --btn-primary-sheen: linear-gradient(120deg, transparent 30%, rgba(0, 0, 0, 0.06) 50%, transparent 70%); /* Voice button "recording" pulse — overrideable per theme. */ --voice-recording-bg: linear-gradient(135deg, #ffffff, #e8e3d8); --voice-recording-shadow: 0 0 0 6px rgba(255, 255, 255, 0.10), 0 0 28px rgba(255, 255, 255, 0.45); --voice-recording-ring: rgba(255, 255, 255, 0.5); } /* ─── LIGHT THEME ──────────────────────────────────────────────── Activated by (set by the toggle in _PublicHeader / dashboard header before first paint to avoid flash). Keeps the same accent treatment philosophy (a single, almost monochrome accent paired with a soft glow), just inverted. */ [data-theme="light"] { --bg: #f6f3ec; --bg-2: #ece8de; --paper: rgba(255, 253, 248, 0.78); --paper-solid: rgba(255, 253, 248, 0.96); --card-border: rgba(20, 20, 28, 0.08); --ink: #15151c; --ink-muted: rgba(21, 21, 28, 0.66); --ink-subtle: rgba(21, 21, 28, 0.45); --ink-whisper: rgba(21, 21, 28, 0.07); --line: rgba(21, 21, 28, 0.08); --line-strong: rgba(21, 21, 28, 0.16); /* On a light background a pure-white accent would disappear, so we invert: accent becomes deep ink and its glow becomes a soft dark halo. --accent-ink (text *on* an accent surface) becomes white. */ --accent: #15151c; --accent-hover: #000000; --accent-dim: rgba(21, 21, 28, 0.08); --accent-glow: rgba(21, 21, 28, 0.22); --accent-ink: #ffffff; --success: #2c8a60; --error: #c4321e; --error-dim: rgba(196, 50, 30, 0.14); --header-bg: rgba(255, 253, 248, 0.78); --landing-bg: #f6f3ec; --landing-grid-line: rgba(21, 21, 28, 0.06); --landing-vignette: rgba(246, 243, 236, 0.55); --landing-vignette-edge: #f6f3ec; --tag-bg: rgba(255, 253, 248, 0.82); --eyebrow-bg: rgba(255, 253, 248, 0.7); /* Dark pill on light bg — same "wow" as the white pill on dark bg. */ --btn-primary-bg: linear-gradient(180deg, #2a2a36 0%, #0d0d14 100%); --btn-primary-bg-hover: linear-gradient(180deg, #36364a 0%, #14141e 100%); --btn-primary-shadow: 0 8px 24px rgba(20, 20, 30, 0.22), 0 0 0 1px rgba(20, 20, 30, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08); --btn-primary-shadow-hover: 0 14px 38px rgba(20, 20, 30, 0.30), 0 0 0 1px rgba(20, 20, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12); --btn-primary-sheen: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%); --voice-recording-bg: linear-gradient(135deg, #2a2a36, #0d0d14); --voice-recording-shadow: 0 0 0 6px rgba(20, 20, 30, 0.10), 0 0 22px rgba(20, 20, 30, 0.30); --voice-recording-ring: rgba(20, 20, 30, 0.5); }