/* ─── Dark mode (follows OS/browser colour-scheme preference) ───────
   wa-* components (wa-button, wa-card, wa-breadcrumb, wa-drawer, wa-input,
   wa-callout, ...) re-theme themselves automatically once these
   --wa-color-* custom properties flip to their dark values — this is
   exactly what WebAwesome's own `.wa-dark` class does (see
   wa/styles/themes/default.css), just gated by prefers-color-scheme
   instead of a class, so no toggle/JS is needed. master.css's own rules
   that read a --wa-color-* or --heading-color/--logo-filter token pick
   this up for free; only the values below need to exist.

   Deliberately its own file, linked only from the marketing site
   (index.php) — the /support portal shares master.css but has its own
   untested, hardcoded-light layout, so this block must not reach it. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        color: var(--wa-color-text-normal);

        --wa-color-surface-raised: var(--wa-color-neutral-10);
        --wa-color-surface-default: var(--wa-color-neutral-05);
        --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-neutral-05), black 20%);
        --wa-color-surface-border: var(--wa-color-neutral-20);

        --wa-color-text-normal: var(--wa-color-neutral-95);
        --wa-color-text-quiet: var(--wa-color-neutral-60);
        --wa-color-text-link: var(--wa-color-brand-70);

        --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
        --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

        --wa-color-mix-hover: black 8%;
        --wa-color-mix-active: black 16%;

        --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
        --wa-color-brand-fill-normal: var(--wa-color-brand-20);
        --wa-color-brand-fill-loud: var(--wa-color-brand-50);
        --wa-color-brand-border-quiet: var(--wa-color-brand-20);
        --wa-color-brand-border-normal: var(--wa-color-brand-30);
        --wa-color-brand-border-loud: var(--wa-color-brand-40);
        --wa-color-brand-on-quiet: var(--wa-color-brand-60);
        --wa-color-brand-on-normal: var(--wa-color-brand-70);
        --wa-color-brand-on-loud: white;

        --wa-color-success-fill-quiet: var(--wa-color-success-10);
        --wa-color-success-fill-normal: var(--wa-color-success-20);
        --wa-color-success-fill-loud: var(--wa-color-success-50);
        --wa-color-success-border-quiet: var(--wa-color-success-20);
        --wa-color-success-border-normal: var(--wa-color-success-30);
        --wa-color-success-border-loud: var(--wa-color-success-40);
        --wa-color-success-on-quiet: var(--wa-color-success-60);
        --wa-color-success-on-normal: var(--wa-color-success-70);
        --wa-color-success-on-loud: white;

        --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
        --wa-color-warning-fill-normal: var(--wa-color-warning-20);
        --wa-color-warning-fill-loud: var(--wa-color-warning-50);
        --wa-color-warning-border-quiet: var(--wa-color-warning-20);
        --wa-color-warning-border-normal: var(--wa-color-warning-30);
        --wa-color-warning-border-loud: var(--wa-color-warning-40);
        --wa-color-warning-on-quiet: var(--wa-color-warning-60);
        --wa-color-warning-on-normal: var(--wa-color-warning-70);
        --wa-color-warning-on-loud: white;

        --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
        --wa-color-danger-fill-normal: var(--wa-color-danger-20);
        --wa-color-danger-fill-loud: var(--wa-color-danger-50);
        --wa-color-danger-border-quiet: var(--wa-color-danger-20);
        --wa-color-danger-border-normal: var(--wa-color-danger-30);
        --wa-color-danger-border-loud: var(--wa-color-danger-40);
        --wa-color-danger-on-quiet: var(--wa-color-danger-60);
        --wa-color-danger-on-normal: var(--wa-color-danger-70);
        --wa-color-danger-on-loud: white;

        --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
        --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
        --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
        --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
        --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
        --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
        --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
        --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
        --wa-color-neutral-on-loud: var(--wa-color-neutral-05);

        /* Phillips IT's own navy loses contrast as heading text once the
           surface behind it goes dark — swap to the theme's own light-blue
           dark-mode accent (the same token it uses for links). */
        --heading-color: var(--wa-color-brand-70);

        /* The header logo's two-tone navy/blue is baked into the SVG itself
           and can't read --heading-color, so whiten it outright — matching
           how the footer logo is already handled on its (always-dark) navy
           background. */
        --logo-filter: brightness(0) invert(1);
    }
}