/* ══════════════════════════════════════════════════════════════ Theme system — each theme overrides the design tokens declared in site.css :root. Switching = data-theme attribute on , persisted in localStorage ('ithcc-theme'). Amethyst = default. Status colors (success/warn/danger) never change per theme. ══════════════════════════════════════════════════════════════ */ [data-theme="ocean"] { --bg-1: #051220; --bg-2: #0a1f33; --accent: #38bdf8; --accent2: #2dd4bf; --glow: rgba(56,189,248,.25); --border-hi: rgba(56,189,248,.4); --acc-soft: rgba(56,189,248,.14); --acc-soft2: rgba(45,212,191,.08); --acc-border: rgba(56,189,248,.28); --muted: #8aa3b8; --panel-solid: rgba(8,25,42,.95); } [data-theme="emerald"] { --bg-1: #06140d; --bg-2: #0a241a; --accent: #34d399; --accent2: #a3e635; --glow: rgba(52,211,153,.25); --border-hi: rgba(52,211,153,.4); --acc-soft: rgba(52,211,153,.13); --acc-soft2: rgba(163,230,53,.07); --acc-border: rgba(52,211,153,.28); --muted: #8fb3a3; --panel-solid: rgba(8,29,20,.95); } [data-theme="sunset"] { --bg-1: #190a06; --bg-2: #2b120c; --accent: #fb923c; --accent2: #f472b6; --glow: rgba(251,146,60,.25); --border-hi: rgba(251,146,60,.4); --acc-soft: rgba(251,146,60,.14); --acc-soft2: rgba(244,114,182,.08); --acc-border: rgba(251,146,60,.28); --muted: #bd9b8d; --panel-solid: rgba(38,16,10,.95); } [data-theme="crimson"] { --bg-1: #16060d; --bg-2: #270b18; --accent: #fb7185; --accent2: #c084fc; --glow: rgba(251,113,133,.25); --border-hi: rgba(251,113,133,.4); --acc-soft: rgba(251,113,133,.14); --acc-soft2: rgba(192,132,252,.08); --acc-border: rgba(251,113,133,.28); --muted: #b898a5; --panel-solid: rgba(34,9,20,.95); } [data-theme="dawn"] { --bg-1: #eef2fb; --bg-2: #e3e8f7; --glass: rgba(255,255,255,.65); --glass-hover: rgba(255,255,255,.9); --border: rgba(30,30,70,.12); --border-hi: rgba(124,92,240,.4); --accent: #7c5cf0; --accent2: #5b7cfa; --glow: rgba(124,92,240,.22); --acc-soft: rgba(124,92,240,.1); --acc-soft2: rgba(91,124,250,.06); --acc-border: rgba(124,92,240,.3); --text: #1c1c3a; --muted: #6a6a90; --panel-solid: rgba(255,255,255,.97); --input-solid: #ffffff; --sidebar-bg: rgba(255,255,255,.75); --bg: #ffffff; } /* ── Theme switcher (sidebar footer) ───────────────────────── */ .theme-dots { display: flex; gap: .45rem; margin-bottom: .75rem; flex-wrap: wrap; } .theme-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(255,255,255,.3); transition: transform .15s, box-shadow .15s; } .theme-dot:hover { transform: scale(1.18); } .theme-dot.active { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); } .theme-dot-amethyst { background: linear-gradient(135deg,#a78bfa,#818cf8); } .theme-dot-ocean { background: linear-gradient(135deg,#38bdf8,#2dd4bf); } .theme-dot-emerald { background: linear-gradient(135deg,#34d399,#a3e635); } .theme-dot-sunset { background: linear-gradient(135deg,#fb923c,#f472b6); } .theme-dot-crimson { background: linear-gradient(135deg,#fb7185,#c084fc); } .theme-dot-dawn { background: linear-gradient(135deg,#eef2fb 40%,#7c5cf0); }