/* Web: dark mode. Optional, include it after patterns.css.
   Requires core/tokens.css, web/scale.css and web/patterns.css.

   Only semantic tokens are remapped, and every value comes from a `--c-*`
   literal in core/tokens.css. No rule in scale.css or patterns.css needs to
   know which mode is active.

   The slide use case has no counterpart to this file. A deck is authored for a
   known projection, so its light is a decision rather than a system preference. */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --paper:    var(--c-dark);
    --paperAlt: var(--c-onDark-surface);
    --ink:      var(--c-darkInk);
    --inkSoft:  var(--c-onDark-body);
    --inkMute:  var(--c-onDark-mute);
    --rule:     var(--c-onDark-rule);

    /* The palette accent measures 3.63:1 on the dark ground, which fails AA for
       text. onDark-accent is the same hue and saturation, lightened to 4.78:1. */
    --accent:   var(--c-onDark-accent);
  }

  /* The band inverts with the page: on a dark page the band is the light one.
     Without this it sits dark on dark and the section rhythm disappears. */
  .band-dark {
    --band-bg:     var(--c-paper);
    --band-ink:    var(--c-ink);
    --band-body:   var(--c-inkSoft);
    --band-mute:   var(--c-inkMute);
    --band-rule:   var(--c-rule);
    --band-accent: var(--c-accent);
  }

  /* A photograph carries its own light and sits too bright against a dark page. */
  img { filter: brightness(0.92); }

  ::selection { background: color-mix(in srgb, var(--c-onDark-accent) 26%, transparent); }
}

/* A page that wants one mode regardless of the system setting sets color-scheme
   on the root element and does not include this file. */