/* Design tokens shared by every page in the app -- the shell and the auth
   pages alike -- plus the couple of base rules (box-sizing, body font and
   color) that would otherwise get copied next to them. Loaded first, in
   base.html's head, so nothing downstream has to redeclare a color and
   risk it drifting from the rest. */

/* Three surfaces, and they have to be told apart at arm's length in a
   kitchen, on a phone, often in the dark:

     --bg      the page
     --panel   anything lifted off it -- a card, a timer, the panel
     --sunken  a box set *into* one of those -- the step a section is on,
               the line the coach last said

   `--sunken` exists because those inset boxes used to be painted
   `--bg`, which meant a box inside a card was the same colour as the
   page behind the card. Stacked up on a phone -- a timer over a card
   over the recipe -- the whole screen went flat, and the only thing
   keeping them apart was a hairline border. Dark mode had it worst: the
   card was #182420 against a #121a15 page, a step small enough to
   vanish under any glare at all. */

:root {
  color-scheme: light dark;
  --bg: #eef0e6; --fg: #182620; --muted: #3c4e44; --line: #cdd2be;
  --panel: #fff; --sunken: #f1f3e9; --accent: #93690f; --on-accent: #fff;
  --ok: #2f6b49; --bad: #9c4530;
  --curtain: #3a5c48; --stage-bg: #14231b;
  --sidebar: 15rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1512; --fg: #eef1ea; --muted: #b7bfb4; --line: #35473d;
    --panel: #1e2b25; --sunken: #16201b; --accent: #d8a53a; --on-accent: #1c1608;
    --ok: #74c299; --bad: #d98266;
  }
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--bg); color: var(--fg);
       font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }