/* Palette and the theme switch, shared by every page on the site.

   Light is the plain :root palette, dark is layered on top twice: once
   behind a prefers-color-scheme query (so a visitor who has never touched
   the switch gets whatever their system asked for) and once behind
   [data-theme="dark"] (so an explicit choice beats the system either way).
   Nothing here defines a colour only inside a query, which is what keeps
   the two paths from drifting apart.

   Load this BEFORE the page's own stylesheet. */

:root{
  color-scheme:light;

  --bg:#f2f2f0;        /* paper */
  --bg-2:#e9e8e4;      /* panels, inputs */
  --bg-3:#e0dfda;      /* hover */
  --fg:#111214;
  --muted:#63666b;
  --accent:#c2410c;    /* deeper orange: the bright one can't carry text on paper */
  --line:#d8d6d1;
  --up:#15803d;

  --nav-bg:rgba(242,242,240,.86);
  --overlay:rgba(242,242,240,.45);
  --attrib-bg:rgba(242,242,240,.75);
  --thumb-bg:#e0dfda;
  --hatch:rgba(194,65,12,.10);
  --grain:.035;

  /* The CTA / stat bands invert the page, so their accents have to invert
     with it -- on a dark band the bright orange is the readable one. */
  --band-accent:#ff6b35;
  --band-hairline:rgba(255,255,255,.22);
  --band-up:#5ec27e;
  --band-down:#ff6b35;

  --map-tiles:"light";
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --bg:#111214;
    --bg-2:#17181b;
    --bg-3:#1c1d20;
    --fg:#f2f2f0;
    --muted:#9a9ca1;
    --accent:#ff6b35;
    --line:#2a2b2f;
    --up:#5ec27e;

    --nav-bg:rgba(17,18,20,.86);
    --overlay:rgba(17,18,20,.35);
    --attrib-bg:rgba(17,18,20,.75);
    --thumb-bg:#0c0d0f;
    --hatch:rgba(255,107,53,.06);
    --grain:.025;

    --band-accent:#b34a1f;
    --band-hairline:rgba(0,0,0,.19);
    --band-up:#15803d;
    --band-down:#c2410c;

    --map-tiles:"dark";
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --bg:#111214;
  --bg-2:#17181b;
  --bg-3:#1c1d20;
  --fg:#f2f2f0;
  --muted:#9a9ca1;
  --accent:#ff6b35;
  --line:#2a2b2f;
  --up:#5ec27e;

  --nav-bg:rgba(17,18,20,.86);
  --overlay:rgba(17,18,20,.35);
  --attrib-bg:rgba(17,18,20,.75);
  --thumb-bg:#0c0d0f;
  --hatch:rgba(255,107,53,.06);
  --grain:.025;

  --band-accent:#b34a1f;
  --band-hairline:rgba(0,0,0,.19);
  --band-up:#15803d;
  --band-down:#c2410c;

  --map-tiles:"dark";
}

body{transition:background-color 220ms ease,color 220ms ease;}

/* ---------- the switch ---------- */

.theme-toggle{
  position:fixed;right:20px;bottom:20px;z-index:300;
  width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--muted);
  border-radius:0;cursor:pointer;font-family:inherit;
  transition:color 220ms ease,border-color 220ms ease,background-color 220ms ease;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.theme-toggle svg{
  display:block;width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.theme-toggle svg .solid{fill:currentColor;stroke:none;}
@media (max-width:700px){.theme-toggle{right:14px;bottom:14px;}}
@media print{.theme-toggle{display:none;}}
@media (prefers-reduced-motion:reduce){
  body,.theme-toggle{transition:none;}
}