@charset "utf-8"; /* ========================================================================== css_cir2_theme.css DWH2 — Dark/light theme layer, loaded AFTER css_cir2_master.css. Dark mode = [data-theme="dark"] on (set pre-paint by the inline head snippet in base.html; persisted in localStorage key "dwh2-theme"). The master CSS is never edited by this file: dark mode is a token swap plus targeted overrides for selectors that use the green/red tokens as solid backgrounds with white text. ========================================================================== */ /* -------------------------------------------------------------------------- a. Native form controls / scrollbars -------------------------------------------------------------------------- */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* -------------------------------------------------------------------------- b. Dark token block (all pairs WCAG AA — see 2026-07-17 dark-mode memo) -------------------------------------------------------------------------- */ [data-theme="dark"] { --color-primary: #45B588; --color-primary-hover: #57C598; --color-accent: #4FB65F; --color-accent-light: #1B3325; --color-danger: #E06C5F; --color-danger-hover: #EB8074; --color-warning: #E3B341; --color-text: #E4E6E5; --color-text-muted: #A8AFAB; --color-text-light: #8A918D; --color-bg: #161A18; --color-surface: #1F2523; --color-border: #3A423E; --color-border-light: #313834; --color-row-hover: #262D2A; --color-row-alt: #232927; } /* -------------------------------------------------------------------------- c. Solid-surface re-overrides In dark mode --color-primary/--color-danger become light text colors, so every master selector that uses them as a solid background with white text gets an explicit darker solid here (specificity wins, no !important). -------------------------------------------------------------------------- */ [data-theme="dark"] .navbar-links { background-color: #0B6B4E; } [data-theme="dark"] .navbar-links a:hover, [data-theme="dark"] .navbar-links .nav-item.open > a.nav-parent { background-color: #0E7F5D; } [data-theme="dark"] .navbar-links .logout-btn:hover { background-color: #B03A2E; } [data-theme="dark"] .btn-block, [data-theme="dark"] .btn-primary { background-color: #0B6B4E; border-color: #0B6B4E; color: white; } [data-theme="dark"] .btn-block:hover, [data-theme="dark"] .btn-primary:hover { background-color: #0E7F5D; border-color: #0E7F5D; color: white; } [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-institution { background-color: #2E7D3C; border-color: #2E7D3C; color: white; } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-institution:hover { background-color: #0E7F5D; border-color: #0E7F5D; color: white; } [data-theme="dark"] .btn-danger { background-color: #B03A2E; border-color: #B03A2E; color: white; } [data-theme="dark"] .btn-danger:hover { background-color: #C24638; border-color: #C24638; color: white; } [data-theme="dark"] .auth-links a, [data-theme="dark"] .auth-links a:link, [data-theme="dark"] .auth-links a:visited, [data-theme="dark"] .auth-links a:active { background-color: #0B6B4E; color: white; } [data-theme="dark"] .auth-links a:hover { background-color: #0E7F5D; color: white; } [data-theme="dark"] .auth-links .logout-link, [data-theme="dark"] .auth-links .logout-link:link, [data-theme="dark"] .auth-links .logout-link:visited { background-color: #B03A2E; color: white; } [data-theme="dark"] .auth-links .logout-link:hover { background-color: #C24638; } [data-theme="dark"] .pagination .current { background-color: #0B6B4E; color: white; } [data-theme="dark"] .maintenance-banner--danger { background-color: #B03A2E; color: white; } /* -------------------------------------------------------------------------- d. Alert / badge / banner components (raw hex in master — re-keyed here; the custom properties below are the Phase-2 landing spot for tokenizing the master's stray hexes) -------------------------------------------------------------------------- */ [data-theme="dark"] { --alert-error-bg: #3B1D1F; --alert-error-fg: #F2B8B5; --alert-error-border: #5C2B2B; --alert-warn-bg: #3A2F14; --alert-warn-fg: #E9C46A; --alert-warn-border: #5C4A1E; --alert-ok-border: #2E5C43; --badge-ok-bg: #1B3325; --badge-ok-fg: #7BC89A; } [data-theme="dark"] .alert-error, [data-theme="dark"] .form-errors { background-color: var(--alert-error-bg); color: var(--alert-error-fg); border-color: var(--alert-error-border); } [data-theme="dark"] .alert-warning { background-color: var(--alert-warn-bg); color: var(--alert-warn-fg); border-color: var(--alert-warn-border); } [data-theme="dark"] .maintenance-banner--warning { background-color: var(--alert-warn-bg); color: var(--alert-warn-fg); border-bottom-color: var(--alert-warn-border); } [data-theme="dark"] .alert-success, [data-theme="dark"] .badge-staff { border-color: var(--alert-ok-border); } [data-theme="dark"] .badge-success { background-color: var(--badge-ok-bg); color: var(--badge-ok-fg); } [data-theme="dark"] .badge-danger { background-color: var(--alert-error-bg); color: var(--alert-error-fg); } /* -------------------------------------------------------------------------- e. Template