/* Mushroom v2 design tokens. The single source of truth for the palette.
   Never hardcode a hex value anywhere else: if you only use tokens, light and dark
   both work for free. See DESIGN.md in the app repo (../../DESIGN.md) §1.

   WHAT CHANGED FROM THE LIVE SITE, and why it is only the surfaces:
   the live palette paints the whole page in saturated cream (--bg #f6ecd8), which
   reads warm and indie and gives screenshots nowhere clean to sit. v2 keeps every
   brand value (red, ink, radii, shadow scale) and moves the surface ratio only:
   cream steps down into --bg2 as the alternating band, --bg becomes warm near-white,
   and a third band --bg3 inherits the old --bg2. Same identity, different ratio.

   Three places a raw hex is still allowed, all narrow (DESIGN.md §1). Nowhere else,
   and `grep -n '#[0-9a-f]\{3\}' *.html site.css` should only ever find these:
   1. the two <meta name="theme-color"> tags in each page's head, because an HTML
      attribute cannot read a CSS variable. If --bg changes, change those by hand.
   2. the literal #fff inside .btn's color-mix, which is a lightening AMOUNT rather
      than a color choice. The live site does the same.
   3. the #000 in the hero's mask-image, which is a stencil: only its alpha is read,
      so the hue is arbitrary and never paints anything. */

/* WHY light-dark() RATHER THAN A SECOND :root BLOCK.
   A nav toggle needs a third state that CSS alone cannot express: "dark even though the
   system says light". Done with media queries that costs a duplicated dark palette
   (@media for the system, [data-theme] for the choice) and every future colour change has
   to land in both or the two silently disagree. light-dark() keeps ONE definition per
   token: it resolves against the element's used color-scheme, so the toggle only has to
   set color-scheme on :root and all twenty resolve with it. It also fixes form controls,
   scrollbars and the video chrome, which the old block never touched.
   Baseline since May 2024, and this site's floor is macOS 15, so Safari 18. */
:root {
  color-scheme: light dark;

  /* surfaces: near-white paper, cream band, deep cream band, raised card */
  --bg:   light-dark(#fdfaf4, #14100e);
  --bg2:  light-dark(#f6ecd8, #1c1613);
  --bg3:  light-dark(#efe1c6, #221913);
  --card: light-dark(#ffffff, #211a15);
  /* text */
  --ink:  light-dark(#4a3226, #f3e7d4);
  --ink2: light-dark(#7d6252, #b39f8b);
  /* brand */
  --red:     light-dark(#d0342c, #e8524a);
  --red-ink: light-dark(#fff, #1a0d0b);
  --spot:    light-dark(#fff, #ffeede);
  /* lines + focus. Lighter than the live --dcc9a8: a cream hairline that read as a
     soft edge on cream reads as a heavy box on near-white. */
  --line:  light-dark(#e7ddc9, #302520);
  --line2: light-dark(#d8c9ad, #3f312a);
  --ring:  light-dark(#d0342c, #e8524a);
  /* Both arms are var()-built, so this stays a mix of the CURRENT scheme's red and card
     rather than two frozen hexes. 9% over a dark card is not a faint fill, it is no
     fill, which is why the percentage differs and not just the inputs. DESIGN.md §1. */
  --tint: light-dark(color-mix(in srgb, var(--red)  9%, var(--card)),
                     color-mix(in srgb, var(--red) 15%, var(--card)));
  /* elevation. Only a <color> fits inside light-dark(), and a box-shadow list is not one,
     so the six layers are paired here and composed below. The alphas are not a tint of
     each other (.05 against .30): a shadow that reads as a hint on cream is invisible on
     near-black, so each scheme keeps its own weight. */
  --shadow: light-dark(rgba(74, 50, 38, .13), rgba(0, 0, 0, .5));
  --sh-1: light-dark(rgba(74, 50, 38, .05), rgba(0, 0, 0, .30));
  --sh-2: light-dark(rgba(74, 50, 38, .06), rgba(0, 0, 0, .32));
  --sh-3: light-dark(rgba(74, 50, 38, .08), rgba(0, 0, 0, .40));
  --sh-4: light-dark(rgba(74, 50, 38, .10), rgba(0, 0, 0, .44));
  --sh-5: light-dark(rgba(74, 50, 38, .10), rgba(0, 0, 0, .45));
  --sh-6: light-dark(rgba(74, 50, 38, .14), rgba(0, 0, 0, .55));
  --shadow-sm: 0 1px 2px var(--sh-1), 0 2px 6px var(--sh-2);
  --shadow-md: 0 4px 10px var(--sh-3), 0 10px 24px var(--sh-4);
  --shadow-lg: 0 8px 20px var(--sh-5), 0 24px 48px var(--sh-6);
  /* radius */
  --radius-card: 18px;
  --radius-win: 11px;
  --radius-pill: 999px;
}

/* The entire toggle. Set by the inline head script from localStorage before first paint,
   and absent until the reader actually picks one, which is what keeps the system
   preference in charge for everybody who never touches the button. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }