/* ==========================================================================
   Rota Done — shared design tokens
   ==========================================================================

   Single source of truth for colour, radius and (theme-independent) sizing
   custom properties used across the app shell (base.html + everything that
   extends it, plus the standalone kiosk/tab pages: rota.html, tasks.html,
   shifts.html, attendance_clock.html) and the marketing surface (landing,
   pricing, help_*).

   Before this file existed, 9 of 24 templates each defined their own copy
   of this block and had drifted apart (see git history / PR notes for the
   audit). Every value below was chosen by majority-usage across the
   templates that defined it, with the exceptions called out inline.
   Where a reconciled value differs from what a given template used to
   render, the shift is small (a few points of alpha, a couple of RGB
   steps) — see the CSS deduplication report for the explicit list.

   Theme switch: `html.rd-light-mode` is toggled by templates/_theme.html
   (early, pre-paint) and templates/base.html's toggle button, backed by
   localStorage key `rotadone-editor-theme`.
   ========================================================================== */

:root {
  /* ---- Surfaces ------------------------------------------------------
     Sol 2 values, adopted sitewide 2026-08-08. The canvas moves off the
     blue-black #0d1117 onto a more neutral near-black, and the panel and
     raised steps come with it. --surface3 is Sol 2's cell tone: the
     recessed ground a data cell sits on, which the old set had no
     equivalent for. */
  --bg:       #0f1218;
  --surface:  #151922;
  --surface2: #1b202b;
  --surface3: #12161e;

  /* ---- Borders -------------------------------------------------------
     --border is now a solid line rather than an alpha, so it holds its
     value over any of the four surfaces instead of shifting with what is
     behind it. --border-soft is the hairline used inside dense tables. */
  --border:        #292f3a;
  --border-soft:   rgba(255, 255, 255, 0.055);
  --border-strong: rgba(111, 140, 255, 0.20);

  /* ---- Text ----------------------------------------------------------
     Sol 2 runs a brighter ink than the old #cdd9e5, which was doing the
     job of both body text and headings and was slightly grey for either. */
  --text:        #f1f3f7;
  --text-bright: #ffffff;
  --muted:  #9098a8;
  --muted2: #626b7b;

  /* ---- Accent --------------------------------------------------------
     The action colour moves from azure to Sol 2's indigo. --blue-dim is
     the recessed fill for selected states; --accent-strong is the pressed
     step, which the old set never had. */
  --blue:           #6f8cff;
  --accent-strong:  #5878f6;
  --blue-dim:       #26305c;
  --blue-glow:      rgba(111, 140, 255, 0.18);
  --accent-wash:    rgba(111, 140, 255, 0.12);

  /* ---- Semantic ------------------------------------------------------
     Deliberately unchanged. Good/warning/critical are not brand colours
     and must keep meaning the same thing after a palette change. */
  --green:     #3fb950;
  --amber:     #d29922;
  --red:       #e5534b;

  /* Brass. Already identical to Sol 2's --sol-brass, and already in use
     on the landing page's theme toggle, so this token did not move. */
  --gold: #c9a96e;

  --radius: 4px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

html.rd-light-mode {
  /* Sol 2's warm light mode. This is the largest single change in the
     swap: the canvas leaves pure white for a warm paper grey, and the
     cell tone above it goes slightly warmer still, so data sits on the
     lighter surface rather than the page sitting on the brighter one. */
  --bg:       #ebe9e3;
  --surface:  #f8f7f3;
  --surface2: #eeece6;
  --surface3: #fffefa;

  --border:        #d8d5ce;
  --border-soft:   rgba(25, 29, 39, 0.075);
  --border-strong: rgba(49, 91, 234, 0.20);

  --text:        #191b22;
  --text-bright: #0d0f14;
  --muted:  #666b75;
  --muted2: #9a9b9c;

  --blue:           #315bea;
  --accent-strong:  #244bd2;
  --blue-dim:       #dde4fb;
  --blue-glow:      rgba(49, 91, 234, 0.12);
  --accent-wash:    rgba(49, 91, 234, 0.09);

  --green:     #15803d;
  --amber:     #b8872f;
  --red:       #c2413a;

  --gold: #9a7440;

  --shadow: 0 22px 64px rgba(25, 28, 37, 0.15);
}