/*
* Dark mode — applied whenever has data-theme="dark". Toggled by
* the sun/moon button in header.php (see assets/js/theme-toggle.js),
* persisted in localStorage, defaulting to the visitor's OS preference
* on their first visit.
*
* Only the neutral tokens are overridden here — --accent/--accent-2
* deliberately aren't touched, so whatever brand colour the client has
* picked in the Customizer keeps being used in both modes instead of
* this file silently overriding their choice.
*
* Selector is `html[data-theme="dark"]`, not the simpler
* `[data-theme="dark"]` or `:root[data-theme="dark"]` — this needs to
* outrank the Customizer's own inline `:root{ --accent: ... }` override
* (see thinkbridge_customizer_css() in inc/setup.php) on shared
* specificity, in case load order ever changes; adding the `html` type
* selector gives it one extra specificity point so it always wins
* regardless of source order.
*/
html[data-theme="dark"] {
--bg: #111116;
--surface: #1c1c22;
--ink: #f3f2ee;
--ink-soft: #a09eac;
--line: rgba(255, 255, 255, 0.12);
--band-bg: #000000;
--band-ink: #ffffff;
}
/*
* The header's "Start a project" pill is the one spot that intentionally
* changes look rather than just following the token flip: in light mode
* it's the dark "band" pill (matches the original design), but on a dark
* page that same near-black pill barely reads against the page — so in
* dark mode it switches to the primary accent colour instead, matching
* every other primary button on the site.
*/
html[data-theme="dark"] .nav-cta {
background: var(--accent);
color: var(--accent-ink);
box-shadow: 0 6px 16px var(--accent-shadow);
}