/* Colour themes. Every colour in the UI comes from these variables, so adding a theme = adding one block
   here plus one entry in THEMES (js/app.js). */

:root, :root[data-theme="sunset"] {
  --bg: #1a1220; --bg2: #33182e;
  --surface: #2a2033; --surface2: #372a42;
  --text: #fff4ea; --muted: #b9a8c4;
  --primary: #ff7a3d; --on-primary: #2a1200;
  --accent: #ffc145; --border: rgba(255,255,255,.1);
  --ok: #4ade80; --danger: #ff6b6b;
  --shadow: 0 .6rem 1.6rem rgba(0,0,0,.35); --scrim: rgba(8,4,12,.65);
  color-scheme: dark;
}
:root[data-theme="midnight"] {
  --bg: #0b1020; --bg2: #1a2050;
  --surface: #182042; --surface2: #222c58;
  --text: #e8ecff; --muted: #9aa5d6;
  --primary: #7c8cff; --on-primary: #0b1020;
  --accent: #38e0c8; --border: rgba(255,255,255,.1);
  --ok: #4ade80; --danger: #ff7b8a;
  --shadow: 0 .6rem 1.6rem rgba(0,0,10,.45); --scrim: rgba(3,5,16,.7);
  color-scheme: dark;
}
:root[data-theme="bbq"] {
  --bg: #141414; --bg2: #2b1211;
  --surface: #242020; --surface2: #322a29;
  --text: #f5ece6; --muted: #b3a49b;
  --primary: #e5352b; --on-primary: #ffffff;
  --accent: #ffb703; --border: rgba(255,255,255,.1);
  --ok: #4ade80; --danger: #ff7b6b;
  --shadow: 0 .6rem 1.6rem rgba(0,0,0,.5); --scrim: rgba(8,4,4,.7);
  color-scheme: dark;
}
:root[data-theme="fresh"] {
  --bg: #f4fbf1; --bg2: #dff2d6;
  --surface: #ffffff; --surface2: #eef7ea;
  --text: #17301c; --muted: #5d7a63;
  --primary: #23843f; --on-primary: #ffffff;
  --accent: #f59e0b; --border: rgba(23,48,28,.12);
  --ok: #1a9a4a; --danger: #d63838;
  --shadow: 0 .5rem 1.4rem rgba(35,80,45,.16); --scrim: rgba(15,35,20,.5);
  color-scheme: light;
}
:root[data-theme="ocean"] {
  --bg: #eef8fb; --bg2: #d3ebf3;
  --surface: #ffffff; --surface2: #e6f3f8;
  --text: #0e2a38; --muted: #58798a;
  --primary: #08789a; --on-primary: #ffffff;
  --accent: #ff7f50; --border: rgba(14,42,56,.12);
  --ok: #148f5b; --danger: #d63838;
  --shadow: 0 .5rem 1.4rem rgba(10,80,110,.16); --scrim: rgba(8,30,42,.5);
  color-scheme: light;
}
:root[data-theme="candy"] {
  --bg: #fff1f6; --bg2: #ffdcea;
  --surface: #ffffff; --surface2: #fff0f6;
  --text: #3a1730; --muted: #8a5f7c;
  --primary: #d42a78; --on-primary: #ffffff;
  --accent: #7a5cff; --border: rgba(58,23,48,.12);
  --ok: #1a9a4a; --danger: #d63838;
  --shadow: 0 .5rem 1.4rem rgba(180,40,110,.16); --scrim: rgba(50,10,35,.5);
  color-scheme: light;
}