/* * Shared light/dark theme tokens for the IMMG 2259-SD web app. * * Templates reference these custom properties instead of hard-coded colours. * The active theme is selected by the `data-theme` attribute on , set by * the inline boot snippet (see theme.js) before first paint to avoid a flash. * `:root` is the light palette; `html[data-theme="dark"]` overrides it. */ :root { --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8f9fa; --surface-3: #eef1f5; --text: #1f2d3d; --text-muted: #6c757d; --border: #dee2e6; --border-strong: #ced4da; --primary: #275073; --primary-strong: #1a3a5c; --primary-contrast: #ffffff; --primary-soft: rgba(39, 80, 115, 0.15); --brand-gradient: linear-gradient(135deg, #1a3a5c 0%, #275073 60%, #1a4a6a 100%); --input-bg: #ffffff; --input-border: #dee2e6; --link: #275073; --warn-bg: #fff3cd; --warn-border: #ffc107; --warn-text: #856404; --danger-bg: #f8d7da; --danger-border: #f5c2c7; --danger-text: #842029; --success-bg: #d1e7dd; --success-border: #badbcc; --success-text: #0f5132; --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08); } html[data-theme="dark"] { --bg: #0f1722; --surface: #16202e; --surface-2: #1c2735; --surface-3: #233141; --text: #e6edf3; --text-muted: #9aa7b4; --border: #2a3949; --border-strong: #34465a; --primary: #4a86c5; --primary-strong: #3b6ea5; --primary-contrast: #ffffff; --primary-soft: rgba(74, 134, 197, 0.22); --brand-gradient: linear-gradient(135deg, #0c1420 0%, #15212f 60%, #11202c 100%); --input-bg: #1c2735; --input-border: #34465a; --link: #6fb0e8; --warn-bg: #3a2f10; --warn-border: #b8860b; --warn-text: #ffd97a; --danger-bg: #3a1f23; --danger-border: #6b2b33; --danger-text: #f1a9b0; --success-bg: #142a20; --success-border: #2e6b4f; --success-text: #8fd6b3; --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.6); --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4); } /* Smooth the switch without animating layout. */ html.theme-ready body, html.theme-ready .card, html.theme-ready input, html.theme-ready textarea, html.theme-ready select { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Floating theme toggle injected by theme.js. */ .theme-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 9999; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; } .theme-toggle:hover { background: var(--surface-2); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Responsive baseline shared by every page: never scroll sideways, and let the centered auth/setup cards breathe on small screens. Page-specific layouts add their own breakpoints in their template