:root {
  --bg: #0b0f14;
  --surface: #121821;
  --border: #1e2836;
  --text: #e8eef7;
  --muted: #8b98a8;
  --accent: #5b8cff;
  --font: "Segoe UI", system-ui, sans-serif;
  /* Surfaces darker than --surface (inputs, toggles, modals, chips) */
  --elevated: #0f141c;
  --overlay-scrim: rgba(0, 0, 0, 0.55);
  --menu-hover-bg: rgba(255, 255, 255, 0.06);
  --accent-row-bg: rgba(91, 140, 255, 0.12);
  --accent-row-bg-strong: rgba(91, 140, 255, 0.15);
  --summary-dotted: rgba(255, 255, 255, 0.22);
}

/* Light: dark text on light backgrounds */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --surface: #ffffff;
  --border: #c8d0dc;
  --text: #0f172a;
  --muted: #5c6675;
  --accent: #1d4ed8;
  --elevated: #ffffff;
  --overlay-scrim: rgba(15, 23, 42, 0.45);
  --menu-hover-bg: rgba(0, 0, 0, 0.06);
  --accent-row-bg: rgba(29, 78, 216, 0.1);
  --accent-row-bg-strong: rgba(29, 78, 216, 0.14);
  --summary-dotted: rgba(15, 23, 42, 0.25);
}

:root[data-theme="eggplant"] {
  --bg: #1e142b;
  --surface: #261b36;
  --border: #4d3a67;
  --text: #f4ecff;
  --muted: #c0b0db;
  --accent: #b96bff;
  --elevated: #2b1f3e;
  --overlay-scrim: rgba(10, 5, 16, 0.62);
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --accent-row-bg: rgba(185, 107, 255, 0.16);
  --accent-row-bg-strong: rgba(185, 107, 255, 0.22);
  --summary-dotted: rgba(255, 255, 255, 0.34);
}

:root[data-theme="blueberry"] {
  --bg: #0e1a2b;
  --surface: #14243a;
  --border: #2e4a6b;
  --text: #eaf4ff;
  --muted: #a8bfd8;
  --accent: #4fa3ff;
  --elevated: #102034;
  --overlay-scrim: rgba(5, 12, 22, 0.62);
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --accent-row-bg: rgba(79, 163, 255, 0.16);
  --accent-row-bg-strong: rgba(79, 163, 255, 0.22);
  --summary-dotted: rgba(255, 255, 255, 0.34);
}

:root[data-theme="avocado"] {
  --bg: #10180f;
  --surface: #172316;
  --border: #2f4a2d;
  --text: #e9f6e4;
  --muted: #9fb89a;
  --accent: #5ea03a;
  --elevated: #141f13;
  --overlay-scrim: rgba(4, 8, 4, 0.64);
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --accent-row-bg: rgba(94, 160, 58, 0.16);
  --accent-row-bg-strong: rgba(94, 160, 58, 0.22);
  --summary-dotted: rgba(255, 255, 255, 0.34);
}

:root[data-theme="mandarin"] {
  --bg: #24140d;
  --surface: #2e1b11;
  --border: #6d452f;
  --text: #fff1e7;
  --muted: #e0bfaa;
  --accent: #ff8a3d;
  --elevated: #2a180f;
  --overlay-scrim: rgba(10, 6, 4, 0.62);
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --accent-row-bg: rgba(255, 138, 61, 0.16);
  --accent-row-bg-strong: rgba(255, 138, 61, 0.22);
  --summary-dotted: rgba(255, 255, 255, 0.34);
}

:root[data-theme="banana"] {
  --bg: #fff6cf;
  --surface: #fffbe5;
  --border: #e0c979;
  --text: #3f2f07;
  --muted: #7a6530;
  --accent: #b8860b;
  --elevated: #fffdf0;
  --overlay-scrim: rgba(63, 47, 7, 0.32);
  --menu-hover-bg: rgba(63, 47, 7, 0.08);
  --accent-row-bg: rgba(184, 134, 11, 0.14);
  --accent-row-bg-strong: rgba(184, 134, 11, 0.2);
  --summary-dotted: rgba(63, 47, 7, 0.28);
}

:root[data-theme="walnut"] {
  --bg: #1d1713;
  --surface: #271f1a;
  --border: #5c4a3f;
  --text: #f3ece6;
  --muted: #c5b3a7;
  --accent: #c78b52;
  --elevated: #221b16;
  --overlay-scrim: rgba(8, 6, 5, 0.62);
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --accent-row-bg: rgba(199, 139, 82, 0.16);
  --accent-row-bg-strong: rgba(199, 139, 82, 0.22);
  --summary-dotted: rgba(255, 255, 255, 0.34);
}

:root[data-theme="lime"] {
  --bg: #152010;
  --surface: #1d2b16;
  --border: #436533;
  --text: #f2ffe8;
  --muted: #b8d1a7;
  --accent: #9adf50;
  --elevated: #192512;
  --overlay-scrim: rgba(6, 10, 5, 0.62);
  --menu-hover-bg: rgba(255, 255, 255, 0.08);
  --accent-row-bg: rgba(154, 223, 80, 0.16);
  --accent-row-bg-strong: rgba(154, 223, 80, 0.22);
  --summary-dotted: rgba(255, 255, 255, 0.34);
}

/* Guava: pastel light green (dark text on soft mint surfaces) */
:root[data-theme="guava"] {
  --bg: #e4f3df;
  --surface: #f2faf0;
  --border: #b5d4ad;
  --text: #1c3220;
  --muted: #5a7a5e;
  --accent: #3f9e58;
  --elevated: #f8fcf7;
  --overlay-scrim: rgba(28, 50, 32, 0.32);
  --menu-hover-bg: rgba(28, 50, 32, 0.08);
  --accent-row-bg: rgba(63, 158, 88, 0.14);
  --accent-row-bg-strong: rgba(63, 158, 88, 0.2);
  --summary-dotted: rgba(28, 50, 32, 0.28);
}

/* Strawberry: pastel pink / red (dark text on soft blush surfaces) */
:root[data-theme="strawberry"] {
  --bg: #fce6ec;
  --surface: #fff3f6;
  --border: #e4b4c2;
  --text: #3a1f28;
  --muted: #8a5c6a;
  --accent: #d14d68;
  --elevated: #fff9fa;
  --overlay-scrim: rgba(58, 31, 40, 0.32);
  --menu-hover-bg: rgba(58, 31, 40, 0.08);
  --accent-row-bg: rgba(209, 77, 104, 0.14);
  --accent-row-bg-strong: rgba(209, 77, 104, 0.2);
  --summary-dotted: rgba(58, 31, 40, 0.28);
}

/* Peach: pastel orange (dark text on soft apricot surfaces) */
:root[data-theme="peach"] {
  --bg: #fde9d8;
  --surface: #fff4eb;
  --border: #e6c4a8;
  --text: #3d2818;
  --muted: #8a6a52;
  --accent: #e07838;
  --elevated: #fffaf6;
  --overlay-scrim: rgba(61, 40, 24, 0.32);
  --menu-hover-bg: rgba(61, 40, 24, 0.08);
  --accent-row-bg: rgba(224, 120, 56, 0.14);
  --accent-row-bg-strong: rgba(224, 120, 56, 0.2);
  --summary-dotted: rgba(61, 40, 24, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

a {
  color: var(--accent);
}

button {
  font: inherit;
}