/* THE SHARED COLOUR TOKENS (his cue item P249, 2026-10-05: "eventually it will need to be on another site, but I would like
   to share the styles and framework"). Light by default, dark by the system's choice or data-theme="dark" on <html>. Loaded
   by the cue sheet and by the Sessions view's stylesheet alike; a later site loads this file to look the same. */
:root{
  --bg:#f3f4f7; --panel:#ffffff; --ink:#1a1e27; --muted:#5d6475; --rule:#dcdfe7; --soft:#eceef3;
  --accent:#2d4fd6; --accent-ink:#ffffff;
  /* A BUTTON FILLED WITH THE ACCENT (his cue item P1839, 2026-10-29: "some of the button like “got it” and those with a similar shade need to be a
     bit darker"): its own pair, so a filled control can be darker than the accent's text and borders. White on it, 7:1 here and 5.4:1 in dark mode,
     where white on the accent itself was 2.8:1 */
  --accent-fill:#2744c4; --accent-fill-ink:#ffffff;
  --done:#0a7bd4; --done-bg:#e0f0fc;
  --pending:#a55a00; --pending-bg:#fbeedb;
  --blocked:#b3261e; --blocked-bg:#fbe4e2;
  --quiet:#5d6475; --quiet-bg:#eceef3;
  /* ACTIVE, ITS OWN COLOUR (his cue item P977, 2026-10-15: "the active color needs to convey that state. current color seems too muted"):
     it borrowed the app's accent, a soft periwinkle that reads as decoration. GREEN IS ACTIVE, BLUE IS DONE (his P1059, 2026-10-15: "switch the
     colors for done and active. green means active and blue is done makes more sense; change everywhere, and if in many places, dry it up"):
     every state colour is one of these tokens; anything in a turn, live or running uses --active, anything finished or succeeded --done */
  --active:#17994a; --active-bg:#e2f5e8;
  --code-bg:#eef0f5;
  /* a selected chip or toggle (his cue item P29, 2026-10-03: "the selected phase chip is white. this is too bright for
     dark mode"): ink-on-paper inverted in light mode, a muted slate-blue in dark mode instead of a white slab */
  --sel:#1a1e27; --sel-ink:#f3f4f7; --sel-edge:#1a1e27;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12151b; --panel:#1a1e26; --ink:#e7e9ef; --muted:#9aa1b2; --rule:#2c323d; --soft:#222731;
    --accent:#7b95ff; --accent-ink:#0d1020;
    --accent-fill:#4660d6; --accent-fill-ink:#ffffff;
    --done:#38b6ff; --done-bg:#13293a; --pending:#f0ad55; --pending-bg:#34281a;
    --blocked:#ff8a80; --blocked-bg:#3a1f1e; --quiet:#9aa1b2; --quiet-bg:#242933; --code-bg:#252a35; --active:#4cd27f; --active-bg:#14301f;
    --sel:#34405e; --sel-ink:#e7e9ef; --sel-edge:#7b95ff;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12151b; --panel:#1a1e26; --ink:#e7e9ef; --muted:#9aa1b2; --rule:#2c323d; --soft:#222731;
  --accent:#7b95ff; --accent-ink:#0d1020;
  --accent-fill:#4660d6; --accent-fill-ink:#ffffff;
  --done:#38b6ff; --done-bg:#13293a; --pending:#f0ad55; --pending-bg:#34281a;
  --blocked:#ff8a80; --blocked-bg:#3a1f1e; --quiet:#9aa1b2; --quiet-bg:#242933; --code-bg:#252a35; --active:#4cd27f; --active-bg:#14301f;
  --sel:#34405e; --sel-ink:#e7e9ef; --sel-edge:#7b95ff;
  color-scheme:dark;
}