/* ============================================================
   Theme tokens
   Light values live on :root. Dark values are applied twice:
   - inside prefers-color-scheme, guarded so an explicit "light"
     override still wins when the OS is dark
   - under [data-theme="dark"], for the manual override button
   color-scheme is set per-branch too, so native controls
   (checkboxes, number-input spinners) render in the right mode.
   ============================================================ */
:root {
  color-scheme: light;

  --color-bg: #f7f5fb;
  --color-text: #201a2e;
  --color-text-muted: #6b6480;
  --color-text-faint: #948da8;
  --color-text-quiet: #8b83a3;
  --color-text-whisper: #ada6bd;
  --color-text-form: #574b73;

  --color-card-bg: #ffffff;
  --color-border: #e7e2f2;
  --color-card-shadow: rgba(32, 26, 46, .04);
  --color-heading-accent: #7c5cd6;
  --color-heading-strong: #3a2e57;

  --color-pill-bg: #f3eefe;
  --color-pill-border: #ddd0f7;
  --color-pill-text: #6d28d9;
  --color-pill-hover: #ece2fc;

  --color-active-grad-start: #8b5cf6;
  --color-active-grad-end: #6d28d9;
  --color-active-shadow: rgba(109, 40, 217, .35);

  --color-row-border: #f0edf7;
  --color-total: #4c1d95;
  --color-accent: #7c3aed;

  --color-bonus-text: #1f8a5f;
  --color-bonus-bg: #e7f8ef;
  --color-bonus-disabled-text: #a49dbb;

  --color-switch-off: #9a8fbc;
  --color-switch-knob: #ffffff;
  --color-switch-first-buy: #d99a0b;

  --color-tag-bg: #fef3c7;
  --color-tag-text: #92640a;

  --color-danger-bg: #fdeceb;
  --color-danger-border: #f5b8b3;
  --color-danger-text: #b91c1c;
  --color-danger-hover: #fbdcda;

  --color-input-bg: #ffffff;
  --color-input-text: #201a2e;
  --color-input-border: #ddd6ee;
  --color-input-focus-ring: #b9a6ec;

  --color-stat-grad-start: #faf8ff;

  --color-hotbar-bg: rgba(255, 255, 255, .82);
  --color-hotbar-border: rgba(231, 226, 242, .9);
  --color-hotbar-shadow: rgba(32, 26, 46, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #15111f;
    --color-text: #eee9fb;
    --color-text-muted: #a79fc4;
    --color-text-faint: #9089ab;
    --color-text-quiet: #8f87a8;
    --color-text-whisper: #6e6584;
    --color-text-form: #c7bfe0;

    --color-card-bg: #1e1930;
    --color-border: #322a4a;
    --color-card-shadow: rgba(0, 0, 0, .35);
    --color-heading-accent: #b6a0f5;
    --color-heading-strong: #e7e0fb;

    --color-pill-bg: #29223e;
    --color-pill-border: #453a66;
    --color-pill-text: #cabbf5;
    --color-pill-hover: #352c50;

    --color-active-grad-start: #9f7cf7;
    --color-active-grad-end: #5b21b6;
    --color-active-shadow: rgba(159, 124, 247, .35);

    --color-row-border: #2b2440;
    --color-total: #c9b8fb;
    --color-accent: #a78bfa;

    --color-bonus-text: #52d999;
    --color-bonus-bg: rgba(82, 217, 153, .14);
    --color-bonus-disabled-text: #6f6787;

    --color-switch-off: #4b4070;
    --color-switch-knob: #eee9fb;
    --color-switch-first-buy: #e0aa2b;

    --color-tag-bg: rgba(245, 213, 110, .16);
    --color-tag-text: #f5d56e;

    --color-danger-bg: rgba(248, 113, 113, .12);
    --color-danger-border: #7f2b2b;
    --color-danger-text: #f87171;
    --color-danger-hover: rgba(248, 113, 113, .2);

    --color-input-bg: #241d3a;
    --color-input-text: #eee9fb;
    --color-input-border: #453a66;
    --color-input-focus-ring: #7c5cf0;

    --color-stat-grad-start: #241d3a;

    --color-hotbar-bg: rgba(30, 25, 48, .86);
    --color-hotbar-border: rgba(50, 42, 74, .9);
    --color-hotbar-shadow: rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #15111f;
  --color-text: #eee9fb;
  --color-text-muted: #a79fc4;
  --color-text-faint: #9089ab;
  --color-text-quiet: #8f87a8;
  --color-text-whisper: #6e6584;
  --color-text-form: #c7bfe0;

  --color-card-bg: #1e1930;
  --color-border: #322a4a;
  --color-card-shadow: rgba(0, 0, 0, .35);
  --color-heading-accent: #b6a0f5;
  --color-heading-strong: #e7e0fb;

  --color-pill-bg: #29223e;
  --color-pill-border: #453a66;
  --color-pill-text: #cabbf5;
  --color-pill-hover: #352c50;

  --color-active-grad-start: #9f7cf7;
  --color-active-grad-end: #5b21b6;
  --color-active-shadow: rgba(159, 124, 247, .35);

  --color-row-border: #2b2440;
  --color-total: #c9b8fb;
  --color-accent: #a78bfa;

  --color-bonus-text: #52d999;
  --color-bonus-bg: rgba(82, 217, 153, .14);
  --color-bonus-disabled-text: #6f6787;

  --color-switch-off: #4b4070;
  --color-switch-knob: #eee9fb;
  --color-switch-first-buy: #e0aa2b;

  --color-tag-bg: rgba(245, 213, 110, .16);
  --color-tag-text: #f5d56e;

  --color-danger-bg: rgba(248, 113, 113, .12);
  --color-danger-border: #7f2b2b;
  --color-danger-text: #f87171;
  --color-danger-hover: rgba(248, 113, 113, .2);

  --color-input-bg: #241d3a;
  --color-input-text: #eee9fb;
  --color-input-border: #453a66;
  --color-input-focus-ring: #7c5cf0;

  --color-stat-grad-start: #241d3a;

  --color-hotbar-bg: rgba(30, 25, 48, .86);
  --color-hotbar-border: rgba(50, 42, 74, .9);
  --color-hotbar-shadow: rgba(0, 0, 0, .45);
}

/* Explicit light override, for when the OS is dark but the user picked
   light mode with the toggle button. */
:root[data-theme="light"] { color-scheme: light; }