/* =====================================================================
   That Groovy Spot theme · loaded AFTER style.css on purpose

   Dark mode wears the shop's colors — the same deep-purple-and-orange the
   staff dashboard uses — so when TeamNotes sits inside the dashboard the
   two read as one system. Light mode is left exactly as it was, for long
   writing sessions in a bright room; the 🌙 toggle still switches.

   Everything rides on the CSS variables style.css already defines, plus a
   handful of spots where it hardcodes a color. style.css itself is never
   edited, so pulling upstream changes stays painless.
   ===================================================================== */

html[data-theme="dark"] {
  --bg: #23052f;
  --sidebar-bg: #170122;
  --text: #F5F0E6;
  --text-soft: rgba(245, 240, 230, 0.72);
  --text-faint: rgba(245, 240, 230, 0.45);
  --border: rgba(255, 255, 255, 0.13);
  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(255, 255, 255, 0.12);
  --accent: #FF7E5F;
  --callout-bg: rgba(255, 255, 255, 0.06);
  --code-bg: rgba(0, 0, 0, 0.35);
  --code-text: #FFB39E;
  --danger: #FF5A78;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.09);
  --overlay: rgba(11, 0, 20, 0.68);
  --toast-bg: #3a0b4d;
}

/* The dashboard's signature backdrop. Surfaces (modals, menus, cards) keep
   the solid --bg so text always sits on a predictable color. */
html[data-theme="dark"] body {
  background: linear-gradient(160deg, #2E003E, #0B0014 70%) fixed;
}

/* Places style.css hardcodes instead of using a variable */
html[data-theme="dark"] .board-card { background: #2a0838; }

/* Orange is bright — dark text on it, exactly like the dashboard buttons */
html[data-theme="dark"] .name-modal button,
html[data-theme="dark"] .cp-input button,
html[data-theme="dark"] #use-template-btn {
  color: #2E003E;
  font-weight: 700;
}

/* "Today" in the calendar gets the shop pink instead of alarm red */
html[data-theme="dark"] .cal-cell.today .cal-day { background: #FF007F; }