/* Colour themes. Each theme sets every colour token; the page uses only tokens.
   The theme comes from data-theme on <html> (picked from the palette at the foot of the rail, remembered per browser).
   Without a choice: "steel-petrol", or "steel-dark" when the system is in dark mode.

   Tones: red = P1 · blue = in progress · amber = waiting · teal = to test · green = done.
   --X is the light tint, --X-ink the text on it; --tile-X-* colour the four focus tiles.
   --side* colour the right panel; --accent* its avatars and heading. */




/* Ocean Solid: petrol rail, cool aqua neutrals, solid tiles. */
:root[data-theme="ocean-solid"] {
  --rail: #0b2a33; --rail-ink: #e4f0f2; --rail-muted: #7f9aa2; --rail-hover: #143a45;
  --canvas: #eff4f6; --surface: #ffffff; --sunk: #f6f9fa;
  --side: #d4e6eb; --side-line: #b5cfd7;
  --accent: #0a6a72; --accent-ink: #ffffff; --accent-soft: #bcdfe3; --accent-soft-ink: #07525a;
  --ink: #0f1e24; --muted: #536570; --faint: #93a3ab;
  --line: #dbe4e8; --line-strong: #c3d0d6;
  --grey: #ebf0f2;  --grey-ink: #55656d;
  --red: #fbe8e5;   --red-ink: #ad3a2c;
  --blue: #e1edf8;  --blue-ink: #1e5a96;
  --amber: #faf0dc; --amber-ink: #8b5c09;
  --teal: #dcf1f2;  --teal-ink: #0a6a72;
  --green: #e1f2e8; --green-ink: #1c6c45;
  --bar-done: #2f8f62; --bar-testing: #1596a0; --bar-doing: #2a72b8; --bar-waiting: #dc9a30; --bar-track: #dde6ea;
  --tile-red-bg: #b8432f;   --tile-red-fg: #ffffff;
  --tile-blue-bg: #1e5a96;  --tile-blue-fg: #ffffff;
  --tile-amber-bg: #c88f1f; --tile-amber-fg: #ffffff;
  --tile-teal-bg: #0a6a72;  --tile-teal-fg: #ffffff;
  --tile-green-bg: #23774f; --tile-green-fg: #ffffff;
  --hot: #ad3a2c;
  --shadow: 0 1px 2px rgba(11,42,51,.05), 0 8px 24px rgba(11,42,51,.07);
  --scrim: rgba(8,26,32,.5);
  color-scheme: light;
}



/* Steel Petrol: blue-grey rail and neutrals, petrol accent, muted solid tiles. */
:root, :root[data-theme="steel-petrol"] {
  --rail: #1c2733; --rail-ink: #e5eaf0; --rail-muted: #8391a1; --rail-hover: #2a3746;
  --canvas: #eef1f4; --surface: #ffffff; --sunk: #f6f8fa;
  --side: #d5e3e6; --side-line: #b7ccd1;
  --accent: #1f6a72; --accent-ink: #ffffff; --accent-soft: #c3dde0; --accent-soft-ink: #164f55;
  --ink: #141c25; --muted: #56616e; --faint: #96a0ac;
  --line: #dde3e9; --line-strong: #c7cfd8;
  --grey: #edf0f3;  --grey-ink: #56606c;
  --red: #f8e8e5;   --red-ink: #9c3e33;
  --blue: #e3eaf3;  --blue-ink: #2f557f;
  --amber: #f7efdd; --amber-ink: #7f5a12;
  --teal: #ddeeef;  --teal-ink: #1f6a72;
  --green: #e2efe7; --green-ink: #2a6646;
  --bar-done: #3d8a62; --bar-testing: #23858d; --bar-doing: #3a6a9e; --bar-waiting: #c99a44; --bar-track: #e0e5ea;
  --tile-red-bg: #a8473b;   --tile-red-fg: #ffffff;
  --tile-blue-bg: #2f5d87;  --tile-blue-fg: #ffffff;
  --tile-amber-bg: #b88a33; --tile-amber-fg: #ffffff;
  --tile-teal-bg: #1f6a72;  --tile-teal-fg: #ffffff;
  --tile-green-bg: #2f6e4f; --tile-green-fg: #ffffff;
  --hot: #9c3e33;
  --shadow: 0 1px 2px rgba(28,39,51,.05), 0 8px 24px rgba(28,39,51,.07);
  --scrim: rgba(16,22,30,.5);
  color-scheme: light;
}


/* Steel Dark: steel, dark. */
:root[data-theme="steel-dark"] {
  --rail: #0d1218; --rail-ink: #e4e9ef; --rail-muted: #6c7886; --rail-hover: #1b232d;
  --canvas: #151b22; --surface: #1c242d; --sunk: #222b35;
  --side: #222e3b; --side-line: #33414f;
  --accent: #7f9cc0; --accent-ink: #0e141b; --accent-soft: #2f3e50; --accent-soft-ink: #bccbe0;
  --ink: #e4e9ef; --muted: #9ba6b3; --faint: #66717e;
  --line: #2a333e; --line-strong: #3a4552;
  --grey: #28313b;  --grey-ink: #b1bac5;
  --red: #3a2220;   --red-ink: #ec958a;
  --blue: #1f2d3f;  --blue-ink: #9cb7d8;
  --amber: #372d18; --amber-ink: #e2bb6c;
  --teal: #183437;  --teal-ink: #79c9cd;
  --green: #193123; --green-ink: #86cba1;
  --bar-done: #45936a; --bar-testing: #3a9aa0; --bar-doing: #5583b8; --bar-waiting: #c99a44; --bar-track: #2a333e;
  --tile-red-bg: #a8473b;   --tile-red-fg: #ffffff;
  --tile-blue-bg: #3a5f86;  --tile-blue-fg: #ffffff;
  --tile-amber-bg: #a8802f; --tile-amber-fg: #ffffff;
  --tile-teal-bg: #2f7479;  --tile-teal-fg: #ffffff;
  --tile-green-bg: #3a7a57; --tile-green-fg: #ffffff;
  --hot: #ec958a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --scrim: rgba(0,0,0,.6);
  color-scheme: dark;
}