/* QuickCloud themes — single source of truth for panel + admin colours.
 *
 * A theme is a set of CSS variables on <html data-theme="...">. Pages link this
 * file BEFORE their inline <style>, so component rules consume the variables.
 *
 *   default      — the original dark panel (ships as the global default)
 *   cloud-light  — premium light "Cloud" theme
 *   cloud-dark   — the Cloud theme's dark mode
 *
 * The admin picks the global default (Admin → Settings → Appearance, stored in
 * the `panel_theme` setting, served by GET /api/theme). Customers may override
 * per browser via the header picker (localStorage `qc_theme_override`).
 */

:root, [data-theme="default"] {
  color-scheme: dark;
  --bg:#0f1419; --panel:#1a2230; --line:#2a3547; --ink:#e6edf3; --muted:#8b98a9;
  --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --prov:#a78bfa;
  --field:#0d1117;                 /* inputs / sunken surfaces */
  --v4:#7dd3fc; --v6:#c4b5fd;      /* address tints */
  --ok-ink:#bbf7d0; --warn-ink:#fcd34d; --err-ink:#fecaca; --prov-ink:#ddd6fe;
  --info:#38bdf8; --info-ink:#bae6fd;
  --shadow:none;
  --canvas-grid:#1c2433;           /* visual canvas dot grid */
}

/* Premium light "Cloud" theme */
[data-theme="cloud-light"] {
  color-scheme: light;
  --bg:#f2f5fa; --panel:#ffffff; --line:#e2e8f2; --ink:#10203a; --muted:#5d6f88;
  --accent:#2563eb; --ok:#16a34a; --warn:#d97706; --err:#dc2626; --prov:#7c3aed;
  --field:#f6f8fc;
  --v4:#0369a1; --v6:#6d28d9;
  --ok-ink:#166534; --warn-ink:#92400e; --err-ink:#b91c1c; --prov-ink:#5b21b6;
  --info:#0284c7; --info-ink:#075985;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.07);
  --canvas-grid:#dde4ef;
}

/* The Cloud theme's dark mode — richer than the original default */
[data-theme="cloud-dark"] {
  color-scheme: dark;
  --bg:#0a0f1e; --panel:#111a30; --line:#233252; --ink:#e8eefc; --muted:#8da0c0;
  --accent:#4f8df9; --ok:#2dd673; --warn:#f5a623; --err:#f25c5c; --prov:#a78bfa;
  --field:#0b1326;
  --v4:#7dd3fc; --v6:#c4b5fd;
  --ok-ink:#a7f3c8; --warn-ink:#fcd34d; --err-ink:#fecaca; --prov-ink:#ddd6fe;
  --info:#38bdf8; --info-ink:#bae6fd;
  --shadow:0 10px 30px rgba(2,6,18,.45);
  --canvas-grid:#1a2440;
}

/* Cloud-theme polish (both modes): soft card shadows + gradient backdrop. */
html[data-theme="cloud-light"] body { background:linear-gradient(180deg,#edf1f8 0%,#f4f7fb 60%,#f2f5fa 100%) fixed; }
html[data-theme="cloud-dark"]  body { background:radial-gradient(1200px 500px at 70% -10%, #14204a 0%, #0a0f1e 55%) fixed; }
[data-theme="cloud-light"] .card, [data-theme="cloud-dark"] .card,
[data-theme="cloud-light"] .modal, [data-theme="cloud-dark"] .modal { box-shadow:var(--shadow); }
[data-theme="cloud-light"] header, [data-theme="cloud-dark"] header { background:var(--panel); box-shadow:var(--shadow); }
[data-theme="cloud-light"] .modal-bg { background:rgba(23,32,52,.45); }
[data-theme="cloud-light"] .sidenav a.active, [data-theme="cloud-dark"] .sidenav a.active { box-shadow:var(--shadow); }
html[data-theme="cloud-light"] header h1, html[data-theme="cloud-dark"] header h1 {
  background:linear-gradient(90deg, var(--accent) 20%, #7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent;
}
