/* ============================================================================= * theme.css — shared light/dark design tokens, loaded before every other * stylesheet. The active theme is set server-side as * (ThemeService — session → user profile → visitor cookie → admin default), * so there is no flash-of-wrong-theme: the correct token set is already * active on first paint. * * --gold / --ink / --bg are intentionally NOT defined here — those stay * admin-brand-configurable and are emitted per-layout by * _partials/theme_head.php, which writes BOTH the dark and the light values * (--gold is shared across both themes) so they survive a [data-theme] flip * made in the browser under the 'auto' default. * ========================================================================== */ :root { color-scheme: dark; /* Card / raised-surface backgrounds */ --surface-1: #0b1220; --surface-2: rgba(255, 255, 255, .05); --surface-3: rgba(255, 255, 255, .08); /* Borders */ --border-1: rgba(255, 255, 255, .1); --border-2: #1e293b; --border-3: #334155; /* Text */ --text-1: #f1f5f9; --text-1b: #cbd5e1; --text-2: #94a3b8; /* Muted text still has to be readable. Measured against the two surfaces these are actually drawn on — the page (#04060A) and cards (#0d1524) — the previous values failed WCAG AA for body text: --text-3 was 4.26/3.84:1 and --text-4 only 2.68/2.41:1, yet both carry real content (Sign out, table sub-labels, pager totals, stat captions, field hints). Lightened to the least amount that clears 4.5:1 on the worse surface while keeping a visible step between the four levels: the ladder is now 18.51 / 13.66 / 7.91 / 6.49 / 5.43 on the page and 16.67 / 12.30 / 7.12 / 5.85 / 4.89 on cards — monotonic, and every level clears AA. The light theme already passed and is unchanged. */ --text-3: #8593a6; /* #78859a cleared AA against the page (5.0) but not against the raised surfaces painted on top of it: 4.47 on surface-2 and 4.11 on surface-3. #808da2 clears all three (5.6 / 4.97 / 4.57) and stays the faintest tier. */ --text-4: #808da2; /* Form inputs */ --input-bg: rgba(255, 255, 255, .05); --input-border: rgba(255, 255, 255, .1); /* Status/accent hues — used as TEXT colour inside low-alpha tinted chips (badges, alerts, action buttons). The chip backgrounds themselves stay literal rgba(...) since a low-alpha tint reads fine over either base; only the foreground pastel needs to darken in light mode for contrast. */ --c-green: #86efac; --c-red: #fca5a5; /* Solid red for use AS A BACKGROUND behind white text (the --c-* reds above are foreground colours). White on this is 6.47:1 — AA for normal text. */ --c-danger-bg: #b91c1c; --c-amber: #fde047; --c-orange: #fdba74; --c-purple: #c4b5fd; --c-indigo: #a5b4fc; --c-cyan: #7dd3fc; --c-blue: #93c5fd; /* Text-role variant of the brand gold: identical to --gold on dark backgrounds (kept byte-identical here), but --gold itself (#C9A24B) only measures ~2.2:1 as TEXT on the light page bg — see the light override below for the AA-passing value. Use --gold-text for `color:` on gold, keep --gold for borders/backgrounds/accents (those don't need this). */ --gold-text: var(--gold, #C9A24B); } :root[data-theme="light"] { color-scheme: light; --surface-1: #ffffff; --surface-2: rgba(15, 23, 42, .04); --surface-3: rgba(15, 23, 42, .07); --border-1: rgba(15, 23, 42, .12); --border-2: #e2e8f0; --border-3: #cbd5e1; --text-1: #0f172a; --text-1b: #334155; --text-2: #475569; /* NOTE: on the light page bg (#F4F6F9), the dark-theme value #64748b only clears ~4.4:1 — fails WCAG AA (needs 4.5:1) on headers and .stat-label captions. #57647a clears ~5.5:1 with margin. */ --text-3: #57647a; /* NOTE: the faintest tier can't go as light as the dark theme's does — on the light page bg (#F4F6F9), #94a3b8 gives only ~2.4:1 and even #64748b lands at ~4.4:1, both failing WCAG AA for the hint text (`.form-group small`) that uses it. #5e6d80 cleared 4.5:1 against the page background, but the hosted cards sit on a tinted surface (~#eaecef) where the same colour lands at 4.46:1 — just under. #5c6b7e clears 4.5:1 on the card too (4.60) and is still the faintest tier by eye. */ --text-4: #5c6b7e; --input-bg: #ffffff; --input-border: rgba(15, 23, 42, .16); /* --gold (#C9A24B, or the admin's custom brand gold) is a light/mid tone picked to sit on a DARK background — as TEXT on the light page bg it measures only ~2.2:1. Darkened here to ~5.3:1 while staying a recognizably gold/amber hue. Borders/backgrounds/accents keep --gold itself (unaffected — text contrast rules don't apply there). */ --gold-text: #7d621b; /* Darker/more-saturated so text stays legible on a light chip background. --c-green further darkened from #15803d (only ~4.2:1) to clear AA. */ --c-green: #0e6b32; --c-red: #b91c1c; --c-danger-bg: #b91c1c; /* white on this is 6.47:1 — AA */ --c-amber: #8a5406; --c-orange: #c2410c; --c-purple: #6d28d9; --c-indigo: #4338ca; --c-cyan: #0e7490; --c-blue: #1d4ed8; } /* Native makes Chromium composite the open option list over its default white menu backdrop (washed-white list in dark mode); giving the options a SOLID token background fixes it everywhere. Tokens flip under [data-theme="light"], so this is automatically light/dark correct. Comboboxes hide their native