/*
 * The dark-theme rules of site.css, for a page that FOLLOWS THE DEVICE (round 7, R7W-26 / R7L-30, 2026-11-07).
 *
 * With no theme cookie the layout writes <html data-theme="system"> and links this file with
 * media="(prefers-color-scheme: dark)", after site.css — so every rule here applies only on a device in dark
 * mode, and only while the visitor has made no choice of their own. The dark COLOUR RAMP for that case is
 * css/tokens-system.css (generated from tokens.css at build time); this file only re-states site.css's OWN
 * :root[data-theme='dark'] rules under the system selector. No colour is defined here.
 *
 * 🔴 Every :root[data-theme='dark'] rule in site.css needs its twin here, and the reverse. Change one, change
 *    both. RoundSevenPublicSiteTests.EveryDarkRuleInSiteCss_HasASystemTwin pins the pairing.
 */

:root[data-theme='system'] { color-scheme: dark; }

:root[data-theme='system'] .mk-footer { background: var(--c-surface-2); }

:root[data-theme='system'] .mk-hero {
    --mk-hero-a: color-mix(in srgb, var(--c-accent) 40%, #000);
    --mk-hero-b: color-mix(in srgb, var(--c-accent-active) 28%, #000);
    --mk-hero-c: color-mix(in srgb, var(--c-accent-active) 16%, #000);
}
@supports (color: oklch(from red l c h)) {
    :root[data-theme='system'] .mk-hero {
        --mk-hero-a: oklch(from var(--c-accent) 0.44 0.16 h);
        --mk-hero-b: oklch(from var(--c-accent) 0.33 0.13 h);
        --mk-hero-c: oklch(from var(--c-accent) 0.24 0.09 h);
    }
}

:root[data-theme='system'] {
    --fm-chrome: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface));
    --fm-chrome-ink: var(--c-text);
}