/*
 * SlavBot.com: the dark theme, and the switch that chooses it. Linked last, after site.css, motion.css and a page's own sheets.
 *
 * site.css paints the page ground, its type and its rules through colours named by their job (--ground, --text, --rule and the
 * rest, light values on its :root). Dark is the same poster printed on dark stock: those jobs get night values below, and the
 * spot colours (black, red, gold, the game colours) are left exactly as they are. Every rule in site.css and features.css that uses
 * a job follows the theme by itself, so this file only holds:
 *
 *   1. the night values, twice and identical (a test checks): for a visitor who chose dark, and for a device set to dark when no
 *      light choice was made (js/theme.js writes data-theme="auto", or there is no script at all, so CSS alone follows the device);
 *   2. the spot areas: inside a gold block the jobs point back at their light values (ink on gold in both themes), and inside red
 *      and black blocks a button's hover keeps its light colours;
 *   3. the switch in the header and the picker in the footer, and the room the header makes for the switch.
 *
 * The stock: ground #28231d (the page), ground-2 #312b24 (the alternate band, code chips, hairlines), card #3a332a (folds, game
 * bodies, tables). Black blocks stay #121212, the deepest layer. Type and rules on the stock are cream and paper; red as a mark is a
 * lighter #fa3036 so it keeps 3:1 there (the hero's notched button takes it as its face, with ink type); the hero's wedge turns gold so
 * the mascot is not black on black; a fold's open/close box turns gold with an ink sign, as a label does on black.
 * Kept: no gradients, glows, soft shadows, blur or rounded corners, and no colour transition (a theme change is a hard cut).
 * Print always gets the light poster: everything here is screen-only.
 */

@media screen {
  :root[data-theme='dark'] {
    color-scheme: dark;
    --ground: #28231d;
    --ground-2: #312b24;
    --card: #3a332a;
    --text: var(--cream);
    --quiet: var(--muted-on-ink);
    --rule: var(--paper);
    --hot: #fa3036;
    --focus: var(--gold);
    --tag: var(--gold);
    --on-tag: var(--ink);
    --solid: var(--cream);
    --on-solid: var(--ink);
    --on-solid-hi: var(--ink);
    --wedge: var(--gold);
    --land: #cfc3a6;
    --short: var(--card);
    --on-short: var(--cream);
    --short-mark: var(--gold);
    --switch: var(--gold);
    --bar-edge: var(--paper);
    --notch-face: var(--hot);
    --on-notch-face: var(--ink);
    --mark: var(--gold);
    --on-mark: var(--ink);
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --ground: #28231d;
    --ground-2: #312b24;
    --card: #3a332a;
    --text: var(--cream);
    --quiet: var(--muted-on-ink);
    --rule: var(--paper);
    --hot: #fa3036;
    --focus: var(--gold);
    --tag: var(--gold);
    --on-tag: var(--ink);
    --solid: var(--cream);
    --on-solid: var(--ink);
    --on-solid-hi: var(--ink);
    --wedge: var(--gold);
    --land: #cfc3a6;
    --short: var(--card);
    --on-short: var(--cream);
    --short-mark: var(--gold);
    --switch: var(--gold);
    --bar-edge: var(--paper);
    --notch-face: var(--hot);
    --on-notch-face: var(--ink);
    --mark: var(--gold);
    --on-mark: var(--ink);
  }
}

@media screen {
  /* ---------- spot areas ---------- */

  /* Gold keeps its light look in both themes: ink type, ink rules, cream slips, red marks and red rings. */
  .gold,
  .ticker,
  .cmd:target {
    --ground-2: var(--paper-2);
    --card: var(--cream);
    --text: var(--ink);
    --quiet: var(--muted);
    --rule: var(--ink);
    --hot: var(--red);
    --focus: var(--red);
    --tag: var(--ink);
    --on-tag: var(--cream);
    --solid: var(--ink);
    --on-solid: var(--cream);
    --on-solid-hi: var(--gold);
    --mark: var(--ink);
    --on-mark: var(--gold);
  }

  /* On red and black a button's hover keeps its light colours; the header keeps its black edges too. */
  .red,
  .ink,
  .bar,
  .foot,
  .warn,
  .streak,
  .explain-detail,
  .cmd-bar {
    --solid: var(--ink);
    --on-solid: var(--cream);
    --on-solid-hi: var(--gold);
  }

  .bar {
    --rule: var(--ink);
  }

  /* The search and password fields stay cream slips in both themes, so the browser draws their own marks (the search box's
     clear cross, a password's reveal eye) for a light field; on the dark scheme the cross turned white on cream. */
  .search input,
  .unlock-form input {
    color-scheme: light;
  }

  /* The streak slider sits on a black panel in both themes: its track stays the light one (the dark scheme drew it in a grey
     that was 1.7:1 on the black). */
  .streak input[type='range'] {
    color-scheme: light;
  }

  /* ---------- the switch: a square that fills, an Anton label ---------- */

  /* Hidden until js/theme.js has run (it sets data-theme): without a script they would do nothing. */
  .theme-flip,
  .foot-theme {
    display: none;
  }

  [data-theme] .theme-flip {
    display: inline-flex;
  }

  [data-theme] .foot-theme {
    display: block;
  }

  .theme-flip,
  .theme-set button {
    flex: none;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: var(--cream);
    font: 400 0.85rem/1 var(--display);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    cursor: pointer;
  }

  /* A finger needs 44px. The header switch is 44 tall, centred in a 64px row that it does not set; a footer choice is 44
     tall too, its extra padding taken back by a negative margin, so nothing around either one moves. */
  .theme-flip {
    min-width: 44px;
    height: 44px;
    padding: 2px 0 0;
  }

  .theme-box {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: -2px;
    border: 3px solid currentColor;
  }

  /* The header's square is filled when the page is dark, whoever chose it: --switch is gold in the dark blocks. */
  .theme-flip .theme-box {
    background: var(--switch);
  }

  .theme-flip:hover,
  .theme-set button:hover {
    color: var(--gold);
  }

  .theme-flip:active,
  .theme-set button:active {
    transform: translate(2px, 2px);
  }

  .theme-set {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
  }

  .theme-set button {
    display: inline-flex;
    min-height: 44px;
    margin: -9px 0;
    padding: 15px 0 13px;
    font-size: 1rem;
  }

  [data-theme='auto'] [data-theme-set='auto'] .theme-box,
  [data-theme='light'] [data-theme-set='light'] .theme-box,
  [data-theme='dark'] [data-theme-set='dark'] .theme-box {
    background: var(--gold);
    border-color: var(--gold);
  }

  /* Windows contrast themes drop painted fills, which is all the on state is: draw it in the system's own text colour. */
  @media (forced-colors: active) {
    .theme-box {
      forced-color-adjust: none;
      border-color: CanvasText;
      background: Canvas;
    }

    [aria-pressed='true'] > .theme-box {
      background: CanvasText;
    }
  }

  /* Room for the switch on the header's first row, after Add to Discord, at every width: the header keeps its two rows (and
     its --bar-h) below 1000px and its one row above. Narrow screens tighten the gaps, the word and the button a little; a
     wide one takes the switch's width back from the menu's padding, so the menu scrolls no more than it did. */
  @media (max-width: 499px) {
    [data-theme] .bar-in {
      column-gap: 8px;
    }

    [data-theme] .mark {
      gap: 8px;
    }

    [data-theme] .mark-word {
      font-size: 1.6rem;
    }

    [data-theme] .cta {
      padding-right: 11px;
      padding-left: 11px;
      font-size: 0.95rem;
      letter-spacing: 0.04em;
    }

    .theme-flip {
      gap: 5px;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
    }

    .theme-flip .theme-box {
      width: 14px;
      height: 14px;
    }
  }

  @media (max-width: 389px) {
    [data-theme] .mark-word {
      font-size: 1.35rem;
    }

    [data-theme] .cta {
      font-size: 0.9rem;
      letter-spacing: 0.03em;
    }

    .theme-flip {
      gap: 4px;
    }
  }

  @media (min-width: 1000px) {
    [data-theme] .theme-flip {
      order: 2;
      margin-left: -6px;
    }

    [data-theme] .nav {
      margin-left: 6px;
    }

    [data-theme] .nav a {
      padding-right: 9px;
      padding-left: 9px;
    }
  }
}