/* ========================================================================== Dark theme -------------------------------------------------------------------------- Every rule is scoped to [data-theme="dark"] on , so this file is inert until the theme is switched on and light mode is left byte-for-byte alone. Contrast (WCAG 2.1, measured against the surface each token is used on): text #CFD5DE 10.7:1 on surface (AAA) muted #9BA4B2 6.3:1 on surface (AA) subtle #8892A0 5.0:1 on surface (AA) primary #63C2CC 7.6:1 on surface (AAA) warning #E8AE45 7.9:1 on surface (AAA) danger #F08279 6.1:1 on surface (AA) success #5BC97F 7.6:1 on surface (AAA) control border #6E7887 3.2:1 on input fill (WCAG 1.4.11 non-text) Body text is deliberately held around 10-11:1 rather than pushed to the 15:1 the old near-black ground gave. Very high contrast on a dark screen makes light glyphs bloom into their background (halation) and is tiring to read for long; everything here still clears AA with room to spare. Brand colours a merchant sets themselves are lifted to >= 4.5:1 server-side by App\Support\ThemeColor, not here. ========================================================================== */ [data-theme="dark"] { --dm-bg: #181B21; --dm-surface: #1F232B; --dm-surface-2: #262B34; --dm-surface-3: #2F353F; /* Overlays (modals, offcanvas, toasts) — lighter than the page so they read as floating above it rather than relying on the backdrop to separate. */ --dm-elevated: #2A303A; --dm-border: #39404A; --dm-border-strong: #6E7887; --dm-text: #CFD5DE; --dm-text-muted: #9BA4B2; --dm-text-subtle: #8892A0; --dm-primary: #63C2CC; --dm-warning: #E8AE45; --dm-danger: #F08279; --dm-success: #5BC97F; --dm-focus: #63C2CC; --dm-shadow: rgba(0, 0, 0, 0.55); /* Tells the browser to render native widgets — scrollbars, date pickers, spinners, autofill — dark, which CSS alone cannot do. */ color-scheme: dark; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ [data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .main-title, [data-theme="dark"] h1.main-title { color: var(--dm-text); } [data-theme="dark"] hr { border-color: var(--dm-border); opacity: 1; } [data-theme="dark"] a { color: inherit; } [data-theme="dark"] a.link-details, [data-theme="dark"] .btn-link, [data-theme="dark"] .plink a { color: var(--dm-primary); } /* Focus must stay obvious on a dark ground for keyboard users. */ [data-theme="dark"] :focus-visible { outline: 2px solid var(--dm-focus); outline-offset: 2px; } [data-theme="dark"] ::selection { background: var(--dm-primary); color: #181B21; } [data-theme="dark"] ::placeholder { color: var(--dm-text-subtle); opacity: 1; } /* -------------------------------------------------------------------------- Surfaces: header, cards, panels -------------------------------------------------------------------------- */ [data-theme="dark"] header { background: var(--dm-surface); box-shadow: 0 3px 2px var(--dm-shadow); border-bottom: 1px solid var(--dm-border); } /* Genuine surfaces: each of these carries a fill in light mode too - from style.css (.box #fff, .qr-container #f0f0f0) or from the partial's own