/* * LineScout.net — Theme System * CSS custom properties for dark and light modes. * Toggled via: */ /* ────────────────────────────────────────────────── DARK THEME (default) ────────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* Backgrounds */ --bg: #07080e; --s1: #0c0d16; --s2: #10121e; --s3: #161928; --s4: #1c2033; --s5: #222740; /* Borders */ --bd: rgba(255,255,255,0.055); --bd2: rgba(255,255,255,0.10); --bd3: rgba(255,255,255,0.17); /* Text */ --txt: #d8dbe8; --txt-2: #a0a8c4; --mut: #545878; --hint: #2b2f44; /* Brand accents */ --green: #2de0a0; --green-bg: rgba(45,224,160,0.09); --green-bd: rgba(45,224,160,0.20); --blue: #7b8ff5; --blue-bg: rgba(123,143,245,0.10); --blue-bd: rgba(123,143,245,0.25); --amber: #f5b731; --amber-bg: rgba(245,183,49,0.09); --amber-bd: rgba(245,183,49,0.25); --red: #f16b72; --red-bg: rgba(241,107,114,0.08); --red-bd: rgba(241,107,114,0.22); --purple: #c47ef5; --purple-bg: rgba(196,126,245,0.09); --purple-bd: rgba(196,126,245,0.22); /* Nav */ --nav-bg: rgba(12,13,22,0.90); --nav-border: rgba(255,255,255,0.06); /* Cards */ --card-bg: var(--s1); --card-border: var(--bd); /* Inputs */ --input-bg: var(--s3); --input-border: var(--bd2); --input-text: var(--txt); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); /* Theme toggle visibility */ --icon-dark-display: inline; --icon-light-display: none; } /* ────────────────────────────────────────────────── LIGHT THEME ────────────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg: #f4f5f7; --s1: #ffffff; --s2: #f8f9fb; --s3: #eef0f4; --s4: #e4e7ed; --s5: #d8dce6; /* Borders */ --bd: rgba(0,0,0,0.07); --bd2: rgba(0,0,0,0.12); --bd3: rgba(0,0,0,0.20); /* Text */ --txt: #111827; --txt-2: #374151; --mut: #6b7280; --hint: #9ca3af; /* Brand accents — same hues, slightly adjusted for light bg */ --green: #0d9e6e; --green-bg: rgba(13,158,110,0.08); --green-bd: rgba(13,158,110,0.20); --blue: #4f63e0; --blue-bg: rgba(79,99,224,0.08); --blue-bd: rgba(79,99,224,0.22); --amber: #c27d0e; --amber-bg: rgba(194,125,14,0.08); --amber-bd: rgba(194,125,14,0.22); --red: #dc2626; --red-bg: rgba(220,38,38,0.07); --red-bd: rgba(220,38,38,0.18); --purple: #7c3aed; --purple-bg: rgba(124,58,237,0.07); --purple-bd: rgba(124,58,237,0.18); /* Nav */ --nav-bg: rgba(255,255,255,0.92); --nav-border: rgba(0,0,0,0.08); /* Cards */ --card-bg: var(--s1); --card-border: var(--bd); /* Inputs */ --input-bg: var(--s2); --input-border: var(--bd2); --input-text: var(--txt); /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); /* Theme toggle visibility */ --icon-dark-display: none; --icon-light-display: inline; } /* ────────────────────────────────────────────────── TRANSITION (smooth theme switch) ────────────────────────────────────────────────── */ *, *::before, *::after { transition: background-color 0.20s ease, border-color 0.20s ease, color 0.15s ease; } /* Disable transition on media queries (system preference) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }