/* ============================================================================ themes.css — colour tokens only. Each theme is a set of CSS custom properties selected via . Load this BEFORE main.css. ============================================================================ */ /* ========================================================================== Email Header Analyzer — theme tokens Variable-driven theming. All colours come from CSS custom properties so a theme is just a set of variables selected via . ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* -------------------------------------------------------------------------- Themes -------------------------------------------------------------------------- */ /* Light · Slate (default) */ :root, [data-theme="light"] { --bg-gradient-start: #f1f5f9; --bg-gradient-end: #ffffff; --card-bg: #ffffff; --text-primary: #1e293b; --text-secondary: #475569; --text-header: #0f172a; --header-text: #0f172a; --border-color: #cbd5e1; --input-bg: #f8fafc; --accent: #3b82f6; --accent-strong: #2563eb; --button-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --button-text: #ffffff; --toggle-bg: #f8fafc; --toggle-border: #cbd5e1; --shadow-color: rgba(15, 23, 42, 0.12); --pass-bg: #ecfdf5; --pass-border: #10b981; --fail-bg: #fef2f2; --fail-border: #ef4444; --warn-bg: #fffbeb; --warn-border: #f59e0b; --neutral-bg: #f8fafc; --neutral-border: #94a3b8; --important-bg: #eff6ff; --important-border: #3b82f6; --suspicious-bg: #fef2f2; --suspicious-border: #ef4444; --code-font: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; } /* Dark · Graphite */ [data-theme="dark"] { --bg-gradient-start: #1e293b; --bg-gradient-end: #0f172a; --card-bg: #1e293b; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-header: #f1f5f9; --header-text: #f8fafc; --border-color: #334155; --input-bg: #0f172a; --accent: #60a5fa; --accent-strong: #3b82f6; --button-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --button-text: #ffffff; --toggle-bg: #0f172a; --toggle-border: #334155; --shadow-color: rgba(0, 0, 0, 0.5); --pass-bg: #052e2a; --pass-border: #10b981; --fail-bg: #3a0d0d; --fail-border: #f87171; --warn-bg: #3a2c07; --warn-border: #fbbf24; --neutral-bg: #0f172a; --neutral-border: #64748b; --important-bg: #0c223f; --important-border: #60a5fa; --suspicious-bg: #3a0d0d; --suspicious-border: #f87171; --code-font: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; } /* Midnight · Indigo */ [data-theme="midnight"] { --bg-gradient-start: #1e1b4b; --bg-gradient-end: #0f0a2e; --card-bg: #241f52; --text-primary: #e0e7ff; --text-secondary: #a5b4fc; --text-header: #ede9fe; --header-text: #f5f3ff; --border-color: #4338ca; --input-bg: #1a1642; --accent: #818cf8; --accent-strong: #6366f1; --button-bg: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); --button-text: #ffffff; --toggle-bg: #1a1642; --toggle-border: #4338ca; --shadow-color: rgba(0, 0, 0, 0.55); --pass-bg: #0d2f2c; --pass-border: #34d399; --fail-bg: #3a1030; --fail-border: #fb7185; --warn-bg: #3a2b12; --warn-border: #fbbf24; --neutral-bg: #1a1642; --neutral-border: #6d68b8; --important-bg: #241f6a; --important-border: #818cf8; --suspicious-bg: #3a1030; --suspicious-border: #fb7185; --code-font: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; } /* Nord · Arctic */ [data-theme="nord"] { --bg-gradient-start: #3b4252; --bg-gradient-end: #2e3440; --card-bg: #3b4252; --text-primary: #eceff4; --text-secondary: #d8dee9; --text-header: #eceff4; --header-text: #eceff4; --border-color: #4c566a; --input-bg: #2e3440; --accent: #88c0d0; --accent-strong: #5e81ac; --button-bg: linear-gradient(135deg, #88c0d0 0%, #5e81ac 100%); --button-text: #2e3440; --toggle-bg: #2e3440; --toggle-border: #4c566a; --shadow-color: rgba(0, 0, 0, 0.4); --pass-bg: #34443a; --pass-border: #a3be8c; --fail-bg: #4a373b; --fail-border: #bf616a; --warn-bg: #4a4436; --warn-border: #ebcb8b; --neutral-bg: #2e3440; --neutral-border: #616e88; --important-bg: #364656; --important-border: #88c0d0; --suspicious-bg: #4a373b; --suspicious-border: #bf616a; --code-font: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; } /* Solarized (Light) */ [data-theme="solarized"] { --bg-gradient-start: #eee8d5; --bg-gradient-end: #fdf6e3; --card-bg: #fdf6e3; --text-primary: #586e75; --text-secondary: #657b83; --text-header: #073642; --header-text: #073642; --border-color: #93a1a1; --input-bg: #eee8d5; --accent: #268bd2; --accent-strong: #2076b8; --button-bg: linear-gradient(135deg, #268bd2 0%, #2076b8 100%); --button-text: #fdf6e3; --toggle-bg: #eee8d5; --toggle-border: #93a1a1; --shadow-color: rgba(88, 110, 117, 0.18); --pass-bg: #e7ecd0; --pass-border: #859900; --fail-bg: #f6e0da; --fail-border: #dc322f; --warn-bg: #f5e9cf; --warn-border: #b58900; --neutral-bg: #eee8d5; --neutral-border: #93a1a1; --important-bg: #e2e9df; --important-border: #268bd2; --suspicious-bg: #f6e0da; --suspicious-border: #dc322f; --code-font: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; } /* Matrix · Terminal */ [data-theme="matrix"] { --bg-gradient-start: #000000; --bg-gradient-end: #0a0a0a; --card-bg: #0d0d0d; --text-primary: #00ff00; --text-secondary: #33ff33; --text-header: #00ff00; --header-text: #00ff00; --border-color: #00ff00; --input-bg: #060606; --accent: #00ff00; --accent-strong: #00cc00; --button-bg: linear-gradient(135deg, #00cc00 0%, #00ff00 100%); --button-text: #000000; --toggle-bg: #0d0d0d; --toggle-border: #00ff00; --shadow-color: rgba(0, 255, 0, 0.3); --pass-bg: #052f05; --pass-border: #00ff00; --fail-bg: #300000; --fail-border: #ff3333; --warn-bg: #302400; --warn-border: #ffaa00; --neutral-bg: #060606; --neutral-border: #00aa00; --important-bg: #002a2a; --important-border: #00ffff; --suspicious-bg: #300000; --suspicious-border: #ff3333; --code-font: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; }