*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ THEMES — applied via ============================================================ */ /* --- Light (lavender, default) --- */ [data-theme="light"] { --bg: #c8b9ea; --surface: #b9aede; --surface-2: #d6cef2; --border: #9585c8; --text: #1c1533; --text-muted: #574f88; --accent: #7c3aed; --accent-dim: #ede9fe; --orange: #b45309; --orange-dim: #fef3c7; --blue: #1d5fa5; --blue-dim: #dbeafe; --user-bg: #ede8fb; --user-border: rgba(124,58,237,0.25); --red: #b91c1c; } /* --- Dark (charcoal + lime) --- */ [data-theme="dark"] { --bg: #0c0c0f; --surface: #16161a; --surface-2: #1e1e24; --border: #2a2a32; --text: #e8e6e3; --text-muted: #7f7d7a; --accent: #c4f06a; --accent-dim: #2a3a12; --orange: #f0a86a; --orange-dim: #3a2a12; --blue: #6ab0f0; --blue-dim: #12203a; --user-bg: #1c1c28; --user-border: rgba(196,240,106,0.2); --red: #f06a6a; } /* --- Forest (greens) --- */ [data-theme="forest"] { --bg: #d4e8d0; --surface: #c2dbbe; --surface-2: #dff0db; --border: #88b882; --text: #1a2e18; --text-muted: #4a6545; --accent: #2d7a2d; --accent-dim: #dff0dc; --orange: #8a5200; --orange-dim: #f5e8d0; --blue: #1a5a8a; --blue-dim: #d0e8f5; --user-bg: #e5f2e2; --user-border: rgba(45,122,45,0.25); --red: #a01c1c; } /* --- Minimal (white / gray) --- */ [data-theme="minimal"] { --bg: #f2f2f2; --surface: #ffffff; --surface-2: #ebebeb; --border: #cccccc; --text: #111111; --text-muted: #666666; --accent: #1a1a1a; --accent-dim: #e8e8e8; --orange: #a05000; --orange-dim: #fff3e0; --blue: #1155aa; --blue-dim: #e8f0ff; --user-bg: #e8e8e8; --user-border: rgba(0,0,0,0.12); --red: #cc1111; }