/* ============================================================
   Themes: the background follows Light / Dark mode, and the colour
   palette only changes accents (buttons, titles, small highlights).
   To change a palette, edit its two hex values below.
   ============================================================ */

:root,
:root[data-theme="light"] {
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #f0f0eb;
  --text: #1b1d21;
  --muted: #6b6f76;
  --border: #e3e3dd;
  --shadow: 0 8px 30px rgba(20, 22, 26, 0.10);
  --pos: #2e8540;
  --warn: #b7791f;
  --neg: #c53030;
  --on-accent: #ffffff;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111418;
  --surface: #191d23;
  --surface-2: #222831;
  --text: #e8e9eb;
  --muted: #9aa0a8;
  --border: #2b313a;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --pos: #63c174;
  --warn: #e3b341;
  --neg: #f07171;
  --on-accent: #0d1014;
  color-scheme: dark;
}

/* ---------- Colour palettes (light value, then dark value) ---------- */
html { --accent: #0e8a8a; } /* fallback before a palette is chosen */
html[data-palette="ocean-breeze"]                    { --accent: #0e8a8a; }
html[data-theme="dark"][data-palette="ocean-breeze"]  { --accent: #3cc9c4; }

html[data-palette="rose-quartz"]                     { --accent: #c2416b; }
html[data-theme="dark"][data-palette="rose-quartz"]   { --accent: #f08bab; }

html[data-palette="lavender-haze"]                   { --accent: #7a4fc4; }
html[data-theme="dark"][data-palette="lavender-haze"] { --accent: #b69bf2; }

html[data-palette="forest-moss"]                     { --accent: #3f7d3a; }
html[data-theme="dark"][data-palette="forest-moss"]   { --accent: #8cc97c; }

html[data-palette="sunset-ember"]                    { --accent: #c4561a; }
html[data-theme="dark"][data-palette="sunset-ember"]  { --accent: #f59a5c; }

html[data-palette="royal-indigo"]                    { --accent: #3b5bdb; }
html[data-theme="dark"][data-palette="royal-indigo"]  { --accent: #8ea2ff; }

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --pos-soft: color-mix(in srgb, var(--pos) 16%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 18%, transparent);
  --neg-soft: color-mix(in srgb, var(--neg) 16%, transparent);
}
[data-palette] { --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Swatches in the moon menu always show both shades */
.sw-ocean-breeze  { background: linear-gradient(135deg, #0e8a8a 50%, #3cc9c4 50%); }
.sw-rose-quartz   { background: linear-gradient(135deg, #c2416b 50%, #f08bab 50%); }
.sw-lavender-haze { background: linear-gradient(135deg, #7a4fc4 50%, #b69bf2 50%); }
.sw-forest-moss   { background: linear-gradient(135deg, #3f7d3a 50%, #8cc97c 50%); }
.sw-sunset-ember  { background: linear-gradient(135deg, #c4561a 50%, #f59a5c 50%); }
.sw-royal-indigo  { background: linear-gradient(135deg, #3b5bdb 50%, #8ea2ff 50%); }