/* ============================================================
   Repair Pro — Theme palettes (minimal)
   Switch via <html data-theme="..."> and data-mode
   ============================================================ */

/* Each theme: primary scale + soft wash + 2-stop gradient */
:root[data-theme="sunrise"]  { --primary:#f97316; --primary-2:#fb923c; --primary-dark:#ea580c; --primary-deep:#c2410c; --primary-soft:#fff4ec; --primary-glow:rgba(249,115,22,.28); --gradient-1:linear-gradient(135deg,#f97316,#fb923c); --gradient-2:linear-gradient(135deg,#ea580c,#fb923c); }
:root[data-theme="ember"]    { --primary:#ef4444; --primary-2:#f87171; --primary-dark:#dc2626; --primary-deep:#b91c1c; --primary-soft:#fef2f2; --primary-glow:rgba(239,68,68,.28); --gradient-1:linear-gradient(135deg,#ef4444,#f87171); --gradient-2:linear-gradient(135deg,#dc2626,#ef4444); }
:root[data-theme="amber"]    { --primary:#f59e0b; --primary-2:#fbbf24; --primary-dark:#d97706; --primary-deep:#b45309; --primary-soft:#fffbeb; --primary-glow:rgba(245,158,11,.28); --gradient-1:linear-gradient(135deg,#f59e0b,#fbbf24); --gradient-2:linear-gradient(135deg,#d97706,#fbbf24); }
:root[data-theme="forest"]   { --primary:#16a34a; --primary-2:#22c55e; --primary-dark:#15803d; --primary-deep:#166534; --primary-soft:#f0fdf4; --primary-glow:rgba(34,197,94,.28); --gradient-1:linear-gradient(135deg,#16a34a,#4ade80); --gradient-2:linear-gradient(135deg,#15803d,#22c55e); }
:root[data-theme="ocean"]    { --primary:#0ea5e9; --primary-2:#38bdf8; --primary-dark:#0284c7; --primary-deep:#0369a1; --primary-soft:#eff8fe; --primary-glow:rgba(14,165,233,.28); --gradient-1:linear-gradient(135deg,#0ea5e9,#38bdf8); --gradient-2:linear-gradient(135deg,#0284c7,#0ea5e9); }
:root[data-theme="violet"]   { --primary:#a855f7; --primary-2:#c084fc; --primary-dark:#9333ea; --primary-deep:#7e22ce; --primary-soft:#faf5ff; --primary-glow:rgba(168,85,247,.28); --gradient-1:linear-gradient(135deg,#a855f7,#c084fc); --gradient-2:linear-gradient(135deg,#9333ea,#a855f7); }
:root[data-theme="rose"]     { --primary:#f43f5e; --primary-2:#fb7185; --primary-dark:#e11d48; --primary-deep:#be123c; --primary-soft:#fff1f3; --primary-glow:rgba(244,63,94,.28); --gradient-1:linear-gradient(135deg,#f43f5e,#fb7185); --gradient-2:linear-gradient(135deg,#e11d48,#f43f5e); }
:root[data-theme="midnight"] { --primary:#6366f1; --primary-2:#818cf8; --primary-dark:#4f46e5; --primary-deep:#4338ca; --primary-soft:#eef0fe; --primary-glow:rgba(99,102,241,.28); --gradient-1:linear-gradient(135deg,#6366f1,#818cf8); --gradient-2:linear-gradient(135deg,#4f46e5,#6366f1); }

/* Keep sidebar active wash in sync with chosen theme (light mode) */
:root { --sidebar-active-bg: var(--primary-soft); --sidebar-active-text: var(--primary-dark); --gradient-dim: var(--primary-soft); }

/* ============================================================
   DARK MODE — explicit + auto (OS preference)
   ============================================================ */
:root[data-mode="dark"] {
  --bg: #0d111b;
  --surface: #161b27;
  --surface-2: #11151f;
  --border: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.13);
  --text: #e8eaee;
  --text-muted: #939aa6;
  --text-soft: #626a76;
  --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);

  --sidebar-bg: #11151f;
  --sidebar-border: rgba(255,255,255,.07);
  --sidebar-text: rgba(255,255,255,.62);
  --sidebar-text-strong: #ffffff;
  --sidebar-muted: rgba(255,255,255,.38);
  --sidebar-hover: rgba(255,255,255,.05);
  --sidebar-active-bg: color-mix(in srgb, var(--primary) 18%, transparent);
  --sidebar-active-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] {
    --bg: #0d111b;
    --surface: #161b27;
    --surface-2: #11151f;
    --border: rgba(255,255,255,.07);
    --border-strong: rgba(255,255,255,.13);
    --text: #e8eaee;
    --text-muted: #939aa6;
    --text-soft: #626a76;
    --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);

    --sidebar-bg: #11151f;
    --sidebar-border: rgba(255,255,255,.07);
    --sidebar-text: rgba(255,255,255,.62);
    --sidebar-text-strong: #ffffff;
    --sidebar-muted: rgba(255,255,255,.38);
    --sidebar-hover: rgba(255,255,255,.05);
    --sidebar-active-bg: color-mix(in srgb, var(--primary) 18%, transparent);
    --sidebar-active-text: #ffffff;
  }
}

/* Surfaces that need explicit treatment in dark */
:root[data-mode="dark"] .admin-header { background: color-mix(in srgb, var(--surface) 80%, transparent); }
:root[data-mode="dark"] .um-name { color: #fff; }
:root[data-mode="dark"] .table tbody tr:hover { background: rgba(255,255,255,.03); }
:root[data-mode="dark"] .cmd-search kbd { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.1); }
:root[data-mode="dark"] .btn-ghost { background: rgba(255,255,255,.03); }

@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] .admin-header { background: color-mix(in srgb, var(--surface) 80%, transparent); }
  :root[data-mode="auto"] .um-name { color: #fff; }
  :root[data-mode="auto"] .table tbody tr:hover { background: rgba(255,255,255,.03); }
}

/* ============================================================
   Font families
   ============================================================ */
:root[data-font="sarabun"]            body { font-family: 'Sarabun', 'Inter', system-ui, sans-serif; }
:root[data-font="noto-sans-thai"]     body { font-family: 'Noto Sans Thai', 'Inter', system-ui, sans-serif; }
:root[data-font="kanit"]              body { font-family: 'Kanit', 'Inter', system-ui, sans-serif; }
:root[data-font="prompt"]             body { font-family: 'Prompt', 'Inter', system-ui, sans-serif; }
:root[data-font="k2d"]                body { font-family: 'K2D', 'Inter', system-ui, sans-serif; }
:root[data-font="ibm-plex-sans-thai"] body { font-family: 'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif; }
:root[data-font="mitr"]               body { font-family: 'Mitr', 'Inter', system-ui, sans-serif; }
:root[data-font="krub"]               body { font-family: 'Krub', 'Inter', system-ui, sans-serif; }
:root[data-font="mali"]               body { font-family: 'Mali', cursive, sans-serif; }
:root[data-font="chonburi"]           h1,
:root[data-font="chonburi"]           h2,
:root[data-font="chonburi"]           h3 { font-family: 'Chonburi', serif; }