/* Design tokens, carried over from the approved mockups (specs/mockups, specs/rebuild.md §5.6b).
   Components use these names only, never literal colours, so the dark theme (and a later
   user-customised theme) only has to redefine values.
   Light is the default. Dark follows the device setting unless the user chose a theme in
   Settings, which sets data-theme on <html>. */
:root {
  --bg: #e6e9e4;      --ink: #1f2421;     --muted: #667068;
  --line: #b7beb6;    --line2: #d3d8d1;
  --fill: #f8f9f6;    --fill2: #eceee9;   --fill3: #dde1db;
  --accent: #2e5b4c;  --accent-ink: #ffffff;
  --home: #3f5d86;    --home-t: #dfe6f0;
  --away: #8c3f3a;    --away-t: #f1e0de;
  --warn: #9a6a12;    --warn-t: #f5ead3;
  --pitch: #cdd8c9;   --pitch-line: #f8f9f6;
  --on-team: #f7f5ef;

  --f-display: 'Nuffle', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6ebe5;     --muted: #98a299;
    --line: #3d453e;    --line2: #2b322c;
    --fill: #161a17;    --fill2: #1d221e;   --fill3: #283029;
    --accent: #6bb394;  --accent-ink: #0c120f;
    --home: #88a8d8;    --home-t: #1d2838;
    --away: #df918a;    --away-t: #3a2321;
    --warn: #e3b55e;    --warn-t: #352b17;
    --pitch: #24302a;   --pitch-line: #7d8f7f;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #e6ebe5;     --muted: #98a299;
  --line: #3d453e;    --line2: #2b322c;
  --fill: #161a17;    --fill2: #1d221e;   --fill3: #283029;
  --accent: #6bb394;  --accent-ink: #0c120f;
  --home: #88a8d8;    --home-t: #1d2838;
  --away: #df918a;    --away-t: #3a2321;
  --warn: #e3b55e;    --warn-t: #352b17;
  --pitch: #24302a;   --pitch-line: #7d8f7f;
  color-scheme: dark;
}