/*
  Themes = token sets. To add a theme: add one block below with every token,
  add it to the matching category/status group, and add one line to js/themes.js.
  `npm run check` verifies every text/background pair passes WCAG AA.
*/

/* ---------- Light (default, also "Auto" when the device is light) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F7F6;
  --surface: #FFFFFF;
  --text: #17211F;
  --muted: #55625F;
  --border: #D5DCDA;
  --accent: #0D6B5C;
  --on-accent: #FFFFFF;
}

/* ---------- Dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111716;
  --surface: #1A2220;
  --text: #E6EDEA;
  --muted: #9DABA7;
  --border: #2E3A37;
  --accent: #5FD1B5;
  --on-accent: #0B1F1A;
}

/* "Auto" on a dark device: same values as Dark (checked by npm run check) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #111716;
    --surface: #1A2220;
    --text: #E6EDEA;
    --muted: #9DABA7;
    --border: #2E3A37;
    --accent: #5FD1B5;
    --on-accent: #0B1F1A;
    --good: #6FD08C;
    --warn: #F2C14E;
    --bad: #FF8A80;
    --cat-elec: #4FD1B0;
    --cat-water: #6CB4FF;
    --cat-tax: #A5A8FF;
    --cat-split: #FF8F7A;
  }
}

/* ---------- Indigo ---------- */
:root[data-theme="indigo"] {
  color-scheme: dark;
  --bg: #14152B;
  --surface: #1D1F3D;
  --text: #E8E9FF;
  --muted: #A3A6D1;
  --border: #2F3260;
  --accent: #8B93FF;
  --on-accent: #12133A;
}

/* ---------- Onyx ---------- */
:root[data-theme="onyx"] {
  color-scheme: dark;
  --bg: #0E0E10;
  --surface: #18181B;
  --text: #EDEDED;
  --muted: #A1A1AA;
  --border: #2A2A2E;
  --accent: #E4E4E7;
  --on-accent: #0E0E10;
}

/* ---------- Ocean ---------- */
:root[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #0B1A26;
  --surface: #112535;
  --text: #E3F1FA;
  --muted: #96B3C6;
  --border: #1F3A4F;
  --accent: #4FC3F7;
  --on-accent: #062033;
}

/* ---------- Matcha ---------- */
:root[data-theme="matcha"] {
  color-scheme: light;
  --bg: #F2F5EC;
  --surface: #FBFCF7;
  --text: #1F2A17;
  --muted: #56634A;
  --border: #D6DEC8;
  --accent: #4C7A2A;
  --on-accent: #FFFFFF;
}

/* ---------- Sakura ---------- */
:root[data-theme="sakura"] {
  color-scheme: light;
  --bg: #FBF3F5;
  --surface: #FFFFFF;
  --text: #2B1A20;
  --muted: #6E5560;
  --border: #EBD6DD;
  --accent: #C2416B;
  --on-accent: #FFFFFF;
}

/* ---------- Mango ---------- */
:root[data-theme="mango"] {
  color-scheme: light;
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --text: #2A1E0E;
  --muted: #6B5A40;
  --border: #F0DFC2;
  --accent: #B85500;
  --on-accent: #FFFFFF;
}

/* ---------- High contrast ---------- */
:root[data-theme="contrast"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #000000;
  --muted: #1F1F1F;
  --border: #000000;
  --accent: #0033CC;
  --on-accent: #FFFFFF;
  --border-w: 2px;
  --weight-body: 500;
  --weight-strong: 800;
}

/* ---------- Status + category colors, shared by theme type ---------- */
:root,
:root[data-theme="light"],
:root[data-theme="matcha"],
:root[data-theme="sakura"],
:root[data-theme="mango"] {
  --good: #1B7A3A;
  --warn: #8A5300;
  --bad: #B3261E;
  --cat-elec: #0F8A72;
  --cat-water: #1F6FD1;
  --cat-tax: #4F46E5;
  --cat-split: #D4513B;
}

:root[data-theme="contrast"] {
  --good: #0B5A23;
  --warn: #6B3D00;
  --bad: #9A0E07;
  --cat-elec: #00664F;
  --cat-water: #0040A8;
  --cat-tax: #3A2FC0;
  --cat-split: #A8321F;
}

:root[data-theme="dark"],
:root[data-theme="indigo"],
:root[data-theme="onyx"],
:root[data-theme="ocean"] {
  --good: #6FD08C;
  --warn: #F2C14E;
  --bad: #FF8A80;
  --cat-elec: #4FD1B0;
  --cat-water: #6CB4FF;
  --cat-tax: #A5A8FF;
  --cat-split: #FF8F7A;
}