/* =========================================================================
* DealsSpy — the DARK re-mapping. ONE COPY, TWO WAYS IN.
* =========================================================================
*
* This file is the second half of `tokens.css` and nothing else. It defines
* NO token: every custom property below already has a light value in
* `tokens.css`'s `:root`, and every line here is a re-map of that same name.
* If a component needs a value that exists only here, that is a bug in the
* component (the rule this file was split out of said exactly that, and it
* still holds).
*
* =========================================================================
* WHY IT IS A SEPARATE FILE, AND WHY THAT IS THE WHOLE NO-FLASH MECHANISM
* =========================================================================
*
* The site now has THREE theme states — light, dark, and follow-the-system —
* and only two of them can be expressed in CSS. `prefers-color-scheme` can
* say "the OS asked for dark"; it cannot say "this reader asked for dark on
* an OS that asked for light". Plain CSS therefore needs the dark palette
* under TWO selectors:
*
* @media (prefers-color-scheme: dark) { :root { … } } ← the OS
* :root[data-ds-theme="dark"] { … } ← the choice
*
* …which is ninety declarations written twice, in a file whose own header
* warns that a value repeated in two places is a value that drifts.
*
* So the palette is written ONCE, here, under a selector that is true in both
* situations — "dark unless this reader asked for light" — and WHETHER THIS
* FILE APPLIES AT ALL is decided by the `media` attribute on the ``
* that loads it (`partials/head.php`):
*
* no choice stored media="(prefers-color-scheme: dark)" the OS decides
* chose dark media="all" always on
* chose light media="not all" always off
*
* The head script flips that one attribute BEFORE the first paint, which is
* the difference between a theme and a theme that flashes. With JavaScript
* off the attribute stays as the markup wrote it and the OS preference is
* honoured exactly as it was before the toggle existed — which is the
* behaviour this split exists to preserve.
*
* THE SELECTOR READS `data-ds-theme-CHOICE` AND NOT `data-ds-theme`, AND THAT
* DISTINCTION IS LOAD-BEARING. `data-ds-theme` is the RESOLVED scheme, which
* goes stale the moment the OS changes underneath a page that is already open;
* `data-ds-theme-choice` is what the reader asked for, which only changes when
* they change it. Keyed to the resolved value, a machine that switched to dark
* at sunset would match this file's `media` and be excluded by its selector,
* and the page would sit in light with dark form controls until a reload.
* Keyed to the choice, following the OS live is pure CSS and needs no
* JavaScript at all — which is the property the rest of this site is built on.
*
* THE SELECTOR IS (0,2,0) AND `tokens.css`'s IS (0,1,0). That is deliberate
* and it is what makes source order irrelevant: `partials/head.php` is
* included before each layout's own ``, so this file is parsed BEFORE
* the light values it overrides. Specificity, not order, decides.
*
* =========================================================================
* THREE THINGS BELOW ARE NOT MECHANICAL INVERSIONS
* =========================================================================
* (`DESIGN-SYSTEM.md` §2.3 lists them and the reasoning is unchanged.)
*
* - The CTA ramp runs the OTHER WAY: the step that is illegal on white is
* the correct one on navy, and `text-on-cta` goes dark to match.
* - `--ds-color-primary` is `powder-50`, BRIGHTER than the heading beside
* it, because on a navy page `powder-300` read as a disabled chip.
* - The heat ramp re-maps AS A SET: a low-alpha wash of the band's own hue
* with the bright end of that hue as the text.
*
* NOT AUDITED: the contrast figures quoted in the comments below are the
* author's, carried over from `tokens.css` unchanged. §2.3 says to treat the
* dark scheme as shipped-and-plausible rather than shipped-and-audited, and
* splitting the file changed no value in it.
* ========================================================================= */
:root:not([data-ds-theme-choice="light"]) {
color-scheme: dark;
--ds-color-bg: var(--ds-navy-950);
--ds-color-surface: var(--ds-navy-900);
--ds-color-surface-sunken: var(--ds-navy-950);
--ds-color-surface-raised: var(--ds-navy-800);
--ds-color-surface-quiet: var(--ds-navy-800);
--ds-color-surface-inverse: var(--ds-neutral-0);
--ds-color-border: rgba(168, 200, 232, 0.16);
--ds-color-border-strong: rgba(168, 200, 232, 0.30);
--ds-color-border-inverse: var(--ds-neutral-300);
--ds-color-heading: var(--ds-powder-100);
--ds-color-text: var(--ds-powder-200);
--ds-color-text-muted: var(--ds-powder-300);
--ds-color-text-faint: var(--ds-powder-400);
--ds-color-text-inverse: var(--ds-navy-900);
--ds-color-text-on-primary: var(--ds-navy-950);
--ds-color-text-on-accent: var(--ds-navy-950);
--ds-color-text-on-cta: var(--ds-navy-950);
/* THE PRIMARY FILL HAD TO GET BRIGHTER THAN THE TEXT BESIDE IT.
* `powder-300` filled with `navy-950` type is a perfectly legible
* BUTTON, and it was still wrong: on a navy page the heading above it
* is `powder-100`, so the one control that is supposed to be the
* loudest thing in its block was DARKER than the words around it and
* read as a disabled chip. `powder-50` is the brightest step in the
* ramp; a solid slab of it is unambiguously the first thing the eye
* lands on. */
--ds-color-primary: var(--ds-powder-50);
--ds-color-primary-hover: var(--ds-neutral-0);
--ds-color-primary-soft: var(--ds-navy-800);
--ds-color-primary-soft-text: var(--ds-powder-200);
--ds-color-secondary: var(--ds-navy-600);
--ds-color-secondary-hover: var(--ds-navy-500);
/* THE CTA INVERTS ON DARK. `#C74A08` is chosen for 4.76:1 against
* WHITE; on a navy-950 canvas the same value is 2.1:1 and disappears.
* The bright step that is illegal on white is the correct one here —
* `--ds-cta-400` under `navy-950` type measures 7.1:1 — so the ramp
* runs the other way and `text-on-cta` goes dark to match. */
--ds-color-cta: var(--ds-cta-400);
--ds-color-cta-hover: var(--ds-cta-200);
--ds-color-cta-active: var(--ds-cta-100);
--ds-color-cta-soft: rgba(232, 93, 18, 0.16);
--ds-color-cta-soft-border: rgba(232, 93, 18, 0.42);
--ds-color-cta-text: #f5945a;
--ds-color-accent: var(--ds-gold-300);
--ds-color-accent-hover: var(--ds-gold-200);
--ds-color-accent-soft: rgba(224, 169, 46, 0.16);
--ds-color-accent-text: var(--ds-gold-200);
/* The was-price is struck-through and quiet-loud rather than loud, so
* on dark it lifts to a tint of the same hue instead of the deep one,
* which on navy is unreadable. */
--ds-color-price-was: #f0876a;
/* THE HEAT RAMP RE-MAPS AS A SET. Every band's `-text` step is chosen
* against WHITE and none of the four clears 3:1 on navy-950; the
* `-bg` tints are near-white and would be four bright slabs. So on
* dark the tint becomes a low-alpha wash of the band's own hue and the
* text becomes the BRIGHT end of it. */
--ds-heat-cold: #8ea4c4;
--ds-heat-cold-bg: rgba(142, 164, 196, 0.14);
--ds-heat-cold-text: #a9bcd6;
--ds-heat-warm: #f0a94e;
--ds-heat-warm-bg: rgba(240, 169, 78, 0.16);
--ds-heat-warm-text: #f3ba71;
--ds-heat-hot: #f0674e;
--ds-heat-hot-bg: rgba(240, 103, 78, 0.16);
--ds-heat-hot-text: #f58a76;
--ds-heat-blazing: #f0503c;
--ds-heat-blazing-bg: rgba(240, 80, 60, 0.20);
--ds-heat-blazing-text: #f77d6c;
--ds-color-link: var(--ds-powder-300);
--ds-color-link-hover: var(--ds-powder-200);
--ds-color-link-visited: var(--ds-powder-400);
--ds-color-focus: var(--ds-powder-300);
--ds-focus-ring: 0 0 0 3px rgba(168, 200, 232, 0.50);
--ds-color-success: #6dd39a;
--ds-color-success-bg: rgba(31, 122, 67, 0.22);
--ds-color-success-border: rgba(109, 211, 154, 0.42);
--ds-color-warning: var(--ds-gold-300);
--ds-color-warning-bg: rgba(224, 169, 46, 0.18);
--ds-color-warning-border: rgba(240, 201, 92, 0.40);
--ds-color-danger: #f09a94;
--ds-color-danger-bg: rgba(179, 39, 31, 0.24);
--ds-color-danger-border: rgba(240, 154, 148, 0.42);
--ds-color-info: var(--ds-powder-300);
--ds-color-info-bg: rgba(168, 200, 232, 0.14);
--ds-color-info-border: rgba(168, 200, 232, 0.34);
/* FIVE REGIONS, IN ORDER. The ladder reads canvas (`navy-950`) → rail
* (`navy-900`) → bar, nav and footer (`navy-800`): the deepest surface
* is the one you read on, and the chrome that floats over it is
* lighter. The bar and the footer share a value on purpose — they are
* the same band at the two ends of the document, and they never
* touch. */
--ds-color-rail-bg: var(--ds-navy-900);
--ds-color-header-bg: var(--ds-navy-800);
--ds-color-header-text: var(--ds-powder-200);
--ds-color-header-text-strong: var(--ds-neutral-0);
--ds-color-nav-bg: var(--ds-navy-900);
--ds-color-nav-text: var(--ds-powder-300);
--ds-color-footer-bg: var(--ds-navy-800);
--ds-color-footer-text: var(--ds-powder-300);
--ds-color-footer-heading: var(--ds-powder-100);
--ds-color-admin-sidebar-bg: #050d19;
--ds-color-admin-sidebar-text: var(--ds-powder-300);
--ds-color-admin-sidebar-active-bg: var(--ds-navy-800);
--ds-color-admin-topbar-bg: var(--ds-navy-900);
--ds-color-admin-canvas: var(--ds-navy-950);
--ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
--ds-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.34);
--ds-shadow-3: 0 6px 16px rgba(0, 0, 0, 0.48), 0 2px 6px rgba(0, 0, 0, 0.34);
--ds-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.58), 0 4px 12px rgba(0, 0, 0, 0.40);
}