/* SoloSpark operator theme — one palette, two modes, shared by the dashboard and the editor.
 *
 * Loaded by both /dashboard and /edit/{siteId}, before each page's own <style>, so the page
 * rules can still override anything they need to.
 *
 * The light values live on :root and double as the fallback when JavaScript is unavailable.
 * [data-theme="dark"] is the only override, which means flipping between the two never needs a
 * third block: setting data-theme="light" simply stops matching the dark rule. theme.js sets the
 * attribute synchronously in <head> (from localStorage, else the OS preference), so the correct
 * theme is in place before first paint and there is no flash of the wrong one.
 *
 * The generated customer sites do NOT use these variables — they carry their own palette from
 * SitePalettes. This file only styles the operator surfaces.
 */
:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel2: #f5f6f8;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e3e6ea;
  --pri: #2563eb;
  /* Darker accent in light mode so white text on the primary button stays legible. */
  --acc: #c2410c;
  --ok: #15803d;
  --bad: #dc2626;
  /* Foreground for text sitting on --ok (the toast). Light mode needs white, dark mode needs ink. */
  --on-ok: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #171a21;
  --panel2: #1d212b;
  --ink: #e7ebf2;
  --muted: #8b93a5;
  --line: #2a2f3a;
  --pri: #4f8cff;
  --acc: #ff9b42;
  --ok: #3fca7d;
  --bad: #ff5c5c;
  --on-ok: #04140b;
  --shadow: none;
}

/* Theme toggle. An attribute selector (0-1-0) deliberately outranks the dashboard's bare
 * `button` rule (0-0-1) so the page's global button styling cannot swallow it. */
[data-theme-toggle] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
}

[data-theme-toggle]:hover {
  border-color: var(--pri);
}

[data-theme-toggle] [data-theme-icon] {
  font-size: 15px;
  line-height: 1;
}

/* Touch targets: keep the toggle comfortable to hit on a phone. */
@media (max-width: 640px) {
  [data-theme-toggle] {
    padding: 10px 14px;
  }
}
