/* AYITI INTEL V2.5 — Theme Variables Applied via data-theme attribute on . [data-theme="dark"] is the default. Toggle is user-persisted in DB + localStorage. */ [data-theme="dark"] { --bg: #0a0a0a; --panel: #111111; --surface: #141414; --surface2: #1a1a1a; --text: #eeeeee; --text2: #cccccc; --accent: #ffb000; --muted: #666666; --border: #222222; --green: #22c55e; --red: #f87171; --blue: #60a5fa; --line: #222222; --line2: #333333; color-scheme: dark; } [data-theme="light"] { --bg: #f5f4f0; --panel: #ffffff; --surface: #eceae5; --surface2: #e4e2dd; --text: #1a1a1a; --text2: #444444; --accent: #b87800; --muted: #888888; --border: #d4d2cc; --green: #16a34a; --red: #dc2626; --blue: #2563eb; --line: #d4d2cc; --line2: #c4c2bc; color-scheme: light; } /* Smooth transition on theme switch — but NOT on page load */ .theme-ready * { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* Theme toggle button — consistent across all templates */ .theme-toggle { background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 7px; border-radius: 4px; line-height: 1.4; font-family: inherit; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }