/* ======================================================================== SONOLINK — themes.css Each role gets its own palette via [data-theme] on Base ink: deep cyber-black. Surfaces are tinted by the role accent. ======================================================================== */ /* ---------- Neutral (boot / mode select) ---------- */ body[data-theme="neutral"] { --bg: #07090d; --bg-deep: #04060a; --surface: rgba(20, 26, 36, 0.55); --surface-2: rgba(28, 36, 48, 0.7); --border: rgba(120, 140, 170, 0.18); --border-strong: rgba(140, 160, 190, 0.35); --text: #d8e1ec; --text-dim: #7a8696; --text-faint: #4a5360; --accent: #5be3c6; --accent-2: #7c9eff; --accent-soft: rgba(91, 227, 198, 0.18); --accent-glow: rgba(91, 227, 198, 0.35); --success: #5be3c6; --warning: #ffd166; --danger: #ff6b6b; --info: #7c9eff; } /* ---------- Civilian (green/cyan) ---------- */ body[data-theme="civilian"] { --bg: #04100c; --bg-deep: #020806; --surface: rgba(10, 36, 28, 0.55); --surface-2: rgba(16, 50, 40, 0.7); --border: rgba(80, 220, 180, 0.18); --border-strong: rgba(80, 220, 180, 0.4); --text: #d4f5e8; --text-dim: #6fb39a; --text-faint: #3a6a5a; --accent: #00ffaa; --accent-2: #00d4ff; --accent-soft: rgba(0, 255, 170, 0.16); --accent-glow: rgba(0, 255, 170, 0.4); --success: #00ffaa; --warning: #ffd166; --danger: #ff6b6b; --info: #00d4ff; } /* ---------- Hacker (red/black) ---------- */ body[data-theme="hacker"] { --bg: #0a0204; --bg-deep: #060102; --surface: rgba(40, 8, 14, 0.55); --surface-2: rgba(60, 12, 20, 0.7); --border: rgba(255, 60, 80, 0.2); --border-strong: rgba(255, 60, 80, 0.45); --text: #ffe0e4; --text-dim: #c47a82; --text-faint: #7a3a42; --accent: #ff2e4a; --accent-2: #ff6b1a; --accent-soft: rgba(255, 46, 74, 0.18); --accent-glow: rgba(255, 46, 74, 0.5); --success: #5be3c6; --warning: #ffd166; --danger: #ff2e4a; --info: #ff6b1a; } /* ---------- Security (blue/white) ---------- */ body[data-theme="security"] { --bg: #040a14; --bg-deep: #020610; --surface: rgba(14, 28, 56, 0.55); --surface-2: rgba(20, 40, 76, 0.7); --border: rgba(110, 170, 255, 0.2); --border-strong: rgba(110, 170, 255, 0.4); --text: #e4ecf8; --text-dim: #7a96bc; --text-faint: #3a5478; --accent: #4d8cff; --accent-2: #ffffff; --accent-soft: rgba(77, 140, 255, 0.18); --accent-glow: rgba(77, 140, 255, 0.4); --success: #5be3c6; --warning: #ffd166; --danger: #ff6b6b; --info: #4d8cff; } /* ---------- AI Core (purple/gold) ---------- */ body[data-theme="ai"] { --bg: #0a0418; --bg-deep: #050210; --surface: rgba(36, 16, 60, 0.55); --surface-2: rgba(50, 22, 80, 0.7); --border: rgba(190, 130, 255, 0.22); --border-strong: rgba(190, 130, 255, 0.45); --text: #ebe0ff; --text-dim: #a78fc4; --text-faint: #6a548a; --accent: #b87cff; --accent-2: #ffd45b; --accent-soft: rgba(184, 124, 255, 0.18); --accent-glow: rgba(184, 124, 255, 0.45); --success: #5be3c6; --warning: #ffd45b; --danger: #ff6b6b; --info: #b87cff; } /* ---------- Mesh (teal/electric) ---------- */ body[data-theme="mesh"] { --bg: #04101a; --bg-deep: #020810; --surface: rgba(10, 40, 56, 0.55); --surface-2: rgba(14, 56, 76, 0.7); --border: rgba(80, 220, 220, 0.2); --border-strong: rgba(80, 220, 220, 0.4); --text: #d8f0f4; --text-dim: #6fa8b3; --text-faint: #3a6470; --accent: #2cd4d4; --accent-2: #5be3c6; --accent-soft: rgba(44, 212, 212, 0.18); --accent-glow: rgba(44, 212, 212, 0.4); --success: #5be3c6; --warning: #ffd166; --danger: #ff6b6b; --info: #2cd4d4; } /* ---------- Body background hook ---------- */ body { background: radial-gradient(ellipse at 70% 0%, var(--accent-soft) 0%, transparent 60%), radial-gradient(ellipse at 0% 100%, var(--accent-soft) 0%, transparent 50%), var(--bg); background-attachment: fixed; transition: background 600ms ease; } /* Selection */ ::selection { background: var(--accent); color: var(--bg-deep); }