/* ============================================================ SILENT SIGNAL - THEME SYSTEM (Dark / Light Mode) ============================================================ Apply [data-theme="dark"] to to activate dark mode. All other CSS files reference these variables. ============================================================ */ /* ─── LIGHT MODE (default) ─── */ :root { /* Brand */ --brand-primary: #1A4D7F; --brand-primary-light: #2361a0; --brand-accent: #73C2E8; /* Page surface */ --bg-page: #f5f7fa; --bg-card: #ffffff; --bg-card-alt: #f8f9fa; --bg-input: #ffffff; --bg-section-alt: #f0f4f8; /* Text */ --text-black: #000000; --text-primary: #1a1a2e; --text-secondary: #444444; --text-muted: #666666; --text-placeholder: #999999; --text-inverse: #ffffff; /* Borders */ --border-light: #eeeeee; --border-medium: #dddddd; --border-input: #dde2e8; /* Shadows */ --shadow-sm: 0 2px 10px rgba(0,0,0,0.05); --shadow-md: 0 4px 20px rgba(0,0,0,0.08); --shadow-lg: 0 10px 40px rgba(0,0,0,0.15); /* Header / Nav */ --header-bg: #1A4D7F; --header-text: #ffffff; --header-text-muted: rgba(255,255,255,0.8); --header-hover-bg: rgba(255,255,255,0.1); --header-active-bg: rgba(255,255,255,0.15); /* Dropdown */ --dropdown-bg: #ffffff; --dropdown-item-hover: #f5f5f5; --dropdown-text: #444444; --dropdown-icon: #666666; /* Mobile nav */ --mobile-nav-bg: #1A4D7F; /* Footer */ --footer-bg: #1A4D7F; --footer-text: rgba(255,255,255,0.7); /* Status / badges */ --badge-active-bg: #e8f5e9; --badge-active-text: #2e7d32; --badge-inactive-bg: #ffebee; --badge-inactive-text: #c62828; /* Card icon tints */ --icon-blue-bg: #e3f2fd; --icon-blue-text: #1976d2; --icon-green-bg: #e8f5e9; --icon-green-text: #388e3c; --icon-yellow-bg: #fff8e1; --icon-yellow-text: #f9a825; --icon-orange-bg: #fff3e0; --icon-orange-text: #ef6c00; --icon-red-bg: #ffebee; --icon-red-text: #c62828; --icon-purple-bg: #f3e5f5; --icon-purple-text: #7b1fa2; /* Toggle button */ --theme-toggle-bg: rgba(255,255,255,0.15); --theme-toggle-hover-bg: rgba(255,255,255,0.25); --theme-toggle-color: #ffffff; /* Transitions */ --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ─── DARK MODE ─── */ [data-theme="dark"] { /* Page surface */ --bg-page: #0f1117; --bg-card: #1a1d27; --bg-card-alt: #22263a; --bg-input: #22263a; --bg-section-alt: #161924; /* Text */ --text-primary: #e8eaf0; --text-secondary: #c0c4d0; --text-muted: #8890a8; --text-placeholder: #606880; --text-inverse: #0f1117; /* Borders */ --border-light: #2a2e3e; --border-medium: #33384e; --border-input: #33384e; /* Shadows */ --shadow-sm: 0 2px 10px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 10px 40px rgba(0,0,0,0.5); /* Header / Nav (slightly darker than brand) */ --header-bg: #0e2d4d; --header-text: #e8eaf0; --header-text-muted: rgba(232,234,240,0.75); --header-hover-bg: rgba(255,255,255,0.08); --header-active-bg: rgba(255,255,255,0.12); /* Dropdown */ --dropdown-bg: #1a1d27; --dropdown-item-hover: #22263a; --dropdown-text: #c0c4d0; --dropdown-icon: #8890a8; /* Mobile nav */ --mobile-nav-bg: #0e2d4d; /* Footer */ --footer-bg: #0e2d4d; --footer-text: rgba(200,210,220,0.7); /* Status / badges */ --badge-active-bg: rgba(46,125,50,0.2); --badge-active-text: #81c784; --badge-inactive-bg: rgba(198,40,40,0.2); --badge-inactive-text: #ef9a9a; /* Card icon tints */ --icon-blue-bg: rgba(25,118,210,0.15); --icon-blue-text: #64b5f6; --icon-green-bg: rgba(56,142,60,0.15); --icon-green-text: #81c784; --icon-yellow-bg: rgba(249,168,37,0.15); --icon-yellow-text: #ffd54f; --icon-orange-bg: rgba(239,108,0,0.15); --icon-orange-text: #ffb74d; --icon-red-bg: rgba(198,40,40,0.15); --icon-red-text: #ef9a9a; --icon-purple-bg: rgba(123,31,162,0.15); --icon-purple-text: #ce93d8; /* Toggle button */ --theme-toggle-bg: rgba(255,255,255,0.1); --theme-toggle-hover-bg: rgba(255,255,255,0.18); --theme-toggle-color: #e8eaf0; } /* ─── GLOBAL THEME TRANSITIONS ─── */ *, *::before, *::after { transition: var(--transition-theme); } /* Exclude transitions on elements where they'd be distracting */ button, a, input, select, textarea, .btn, .toggle-slider, .toggle-slider::before, .nav-item, .mobile-nav-item, .dropdown-item, .flash-message { /* Override to keep original component transitions */ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } /* ─── THEME TOGGLE BUTTON (shared style) ─── */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--theme-toggle-bg); border: none; border-radius: 10px; color: var(--theme-toggle-color); font-size: 18px; cursor: pointer; flex-shrink: 0; transition: background 0.3s ease, transform 0.2s ease; } .theme-toggle-btn:hover { background: var(--theme-toggle-hover-bg); transform: scale(1.08); } .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: block; } [data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; } [data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }