/* Dark-mode overrides. * Strategy: every existing CSS file declares its tokens in :root. We override those tokens * at [data-theme="dark"] scope so the entire design system shifts in one go without rewriting * each component. The toggle is in the header chrome (mobile-nav.css friendly). * * Activate by setting data-theme="dark" on (the JS toggle does this and persists in localStorage). */ [data-theme="dark"] { --eu-blue: #4d7cff; --eu-blue-deep: #6b91ff; --eu-blue-bright: #8ba8ff; --eu-blue-soft: #1a2540; --eu-blue-soft-2: #243456; --eu-yellow: #ffd633; --ink: #e2e8f0; --ink-2: #cbd5e1; --ink-3: #94a3b8; --muted: #94a3b8; --muted-2: #64748b; --line: #1e293b; --line-2: #334155; --line-3: #475569; --bg: #0b1226; --bg-2: #0f172a; --bg-3: #1a2438; --green: #4ade80; --green-soft: #1a3d28; --green-line: #2d5a3f; --red: #f87171; --red-soft: #3d1a1a; --red-line: #5a2d2d; --amber: #fbbf24; --amber-soft: #3d2f0f; --amber-line: #5a4519; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 14px rgba(0, 0, 0, .4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5); --shadow-blue: 0 6px 20px rgba(77, 124, 255, .25); } /* Header / chrome */ [data-theme="dark"] body { background: var(--bg); color: var(--ink); } [data-theme="dark"] header.site, [data-theme="dark"] .admin-bar { background: rgba(11, 18, 38, .92); border-bottom-color: var(--line); } [data-theme="dark"] .brand { color: var(--ink); } [data-theme="dark"] .brand .tld { color: var(--muted); } [data-theme="dark"] .status-pill { background: var(--bg-2); border-color: var(--line-2); color: var(--ink-2); } /* Cards / surfaces */ [data-theme="dark"] .tile, [data-theme="dark"] .listing, [data-theme="dark"] .cat-card, [data-theme="dark"] .cat-block, [data-theme="dark"] .country-tile, [data-theme="dark"] .alt-list, [data-theme="dark"] .alt-row, [data-theme="dark"] .stat, [data-theme="dark"] .progress-block, [data-theme="dark"] .criteria, [data-theme="dark"] .side-card, [data-theme="dark"] .admin-table, [data-theme="dark"] .admin-form, [data-theme="dark"] .detail-card, [data-theme="dark"] .empty-state, [data-theme="dark"] .login-card, [data-theme="dark"] .admin-toolbar { background: var(--bg-2); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .listing-foot, [data-theme="dark"] .country-tile-head, [data-theme="dark"] .admin-table thead { background: var(--bg-3); border-color: var(--line); } /* Inputs */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-2); color: var(--ink); border-color: var(--line-2); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--muted-2); } /* Search dropdown */ [data-theme="dark"] .search-suggest { background: var(--bg-2); border-color: var(--line-2); } [data-theme="dark"] .search-suggest .ss-item:hover { background: var(--bg-3); } /* Footer (already dark-on-dark, but tighten the line) */ [data-theme="dark"] footer.site { background: #050a18; } [data-theme="dark"] .foot-bar { border-top-color: #1a2438; } /* Hero gradients */ [data-theme="dark"] .hero { background: var(--bg) !important; } [data-theme="dark"] .hero::after { opacity: 0.15; } /* Mobile menu drawer */ [data-theme="dark"] body[data-mobile-menu="open"] header.site nav.primary { background: var(--bg-2); } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; margin-right: 8px; transition: background .15s, border-color .15s; } .theme-toggle:hover { background: var(--bg-3); border-color: var(--line-3); color: var(--eu-blue); } .theme-toggle .moon { display: none; } [data-theme="dark"] .theme-toggle .sun { display: none; } [data-theme="dark"] .theme-toggle .moon { display: inline; } /* Footer variant — borderless, sits inside the dark foot-bar */ .theme-toggle-foot { width: auto; height: auto; padding: 4px 8px; margin: 0; border: 0; border-radius: 6px; color: #94a3b8; font: 0.84rem var(--mono); gap: 6px; } .theme-toggle-foot:hover { background: rgba(255,255,255,.06); color: #fff; } .theme-toggle-foot .theme-toggle-label[data-theme-label-dark] { display: none; } [data-theme="dark"] .theme-toggle-foot .theme-toggle-label[data-theme-label-light] { display: none; } [data-theme="dark"] .theme-toggle-foot .theme-toggle-label[data-theme-label-dark] { display: inline; } .foot-bar .legal { display: inline-flex; align-items: center; gap: 10px; } .foot-bar .foot-sep { color: #475569; }