/* Shared colour tokens for every dashboard page. Pages use these via var(--…) and
   never hardcode a colour, so a theme only has to redefine this one block. Chart
   colours are read from here in JS too (getComputedStyle), so keep them 6-digit hex:
   index.html's fade() appends a hex alpha. */
:root {
  --bg: #f6f7f9; --card: #ffffff; --border: #e7e9ee;
  --text: #16181d; --muted: #6b7280; --faint: #9aa0ac;
  --success: #1a8f5a; --down: #b23c3c; --sensitive: #b23c3c;
  --accent: #ea580c; --accent-hover: #d24f05; --accent-soft: #fff5ef; --on-accent: #ffffff;
  --hover: #eef0f4; --row-hover: #fafbfc; --neutral-bg: #f1f2f5;

  /* Banners: background / border / text per tone. */
  --warn-bg: #fff8e6;  --warn-border: #f2e2a8;  --warn-text: #7a5c00;
  --error-bg: #fdeeee; --error-border: #f0c9c9; --error-text: #8a2b2b;
  --ok-bg: #ecf7f1;    --ok-border: #bfe3d0;    --ok-text: #14663f;
  --info-bg: #eef4ff;  --info-border: #cfdcf7;  --info-text: #2b4b8a;

  /* Status pills. */
  --pill-amber-bg: #fdf3e3;  --pill-amber-text: #8a6100;
  --pill-orange-bg: #fbeee6; --pill-orange-text: #a3470a;
  --pill-blue-bg: #eaf1fd;   --pill-blue-text: #2b5fb0;

  /* Rendered email previews stay white: the emails are designed for a light background. */
  --email-bg: #ffffff;

  /* Charts. */
  --stripe: #5b8def; --gc: #2fb59a; --fee: #8b93a5;
  --c1: #ea580c; --c2: #5b8def; --c3: #2fb59a; --c4: #b23c3c;
  --c5: #9b6bd6; --c6: #c9932a; --c7: #4c6ef5; --c8: #20a39e;

  color-scheme: light;
}

/* data-theme is set by theme.js from the saved choice or the device setting. Chart series
   colours and --email-bg stay as they are: they read fine on both backgrounds. */
:root[data-theme="dark"] {
  --bg: #0f1115; --card: #181b22; --border: #2a2f3a;
  --text: #e6e8ec; --muted: #a0a6b1; --faint: #6e7582;
  --success: #3fbf82; --down: #e57373; --sensitive: #d9534f;
  --accent: #f06a1f; --accent-hover: #f5823f; --accent-soft: #2c1c12; --on-accent: #ffffff;
  --hover: #242833; --row-hover: #1d2029; --neutral-bg: #262b35;

  --warn-bg: #2a2310;  --warn-border: #54461a;  --warn-text: #e8c35a;
  --error-bg: #2e1719; --error-border: #5a2a2e; --error-text: #f09a9a;
  --ok-bg: #12291f;    --ok-border: #1f4d38;    --ok-text: #6fd3a3;
  --info-bg: #152033;  --info-border: #2a3d5e;  --info-text: #9bb8f0;

  --pill-amber-bg: #33280f;  --pill-amber-text: #e8b84a;
  --pill-orange-bg: #35200f; --pill-orange-text: #f0955a;
  --pill-blue-bg: #182640;   --pill-blue-text: #8fb2f2;

  color-scheme: dark;
}

/* Theme button in each page header (theme.js fills in the icon). `button.` beats the
   pages' own `[title] { cursor: help; }`. */
button.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
button.theme-toggle:hover { border-color: var(--faint); color: var(--text); }
button.theme-toggle svg { width: 15px; height: 15px; }