@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg: #0b1020;
  --card: rgba(255,255,255,0.04);
  --muted: #a1b3d6;
  --fg: #ffffff;
  --accent: #3b82f6; /* primary */
  --accent-secondary: #8b5cf6;
  --border: rgba(255,255,255,0.08);
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
}

.theme-midnight,
.theme-dark {
  --bg: #0c1426;
  --card: rgba(255,255,255,0.06);
  --muted: #c8d7f0;
  --fg: #ffffff;
  --accent: #0a84ff; /* macOS blue */
  --accent-secondary: #5ac8fa;
  --border: rgba(255,255,255,0.08);
}

.theme-oled {
  --bg: #030303;
  --card: rgba(255,255,255,0.06);
  --muted: #a5adbb;
  --fg: #ffffff;
  --accent: #0ea5e9;
  --accent-secondary: #22d3ee;
  --border: rgba(255,255,255,0.08);
}

.theme-obsidian {
  --bg: #0b1220;
  --card: rgba(255,255,255,0.08);
  --muted: #c2c9d8;
  --fg: #ffffff;
  --accent: #7de3f4; /* icy cyan */
  --accent-secondary: #7c7fbc; /* muted purple */
  --border: rgba(255,255,255,0.08);
}

.theme-ocean,
.theme-blue {
  --bg: #04141d;
  --card: rgba(255,255,255,0.04);
  --muted: #a7d7f0;
  --fg: #ffffff;
  --accent: #06b6d4;
  --accent-secondary: #38bdf8;
  --border: rgba(255,255,255,0.08);
}

.theme-forest,
.theme-emerald {
  --bg: #07140c;
  --card: rgba(255,255,255,0.04);
  --muted: #b6e3c5;
  --fg: #ffffff;
  --accent: #22c55e;
  --accent-secondary: #16a34a;
  --border: rgba(255,255,255,0.08);
}

.theme-velvet,
.theme-purple {
  --bg: #100718;
  --card: rgba(255,255,255,0.04);
  --muted: #d1b7e8;
  --fg: #ffffff;
  --accent: #a855f7;
  --accent-secondary: #ec4899;
  --border: rgba(255,255,255,0.08);
}

.theme-ember,
.theme-sunset {
  --bg: #1a0d08;
  --card: rgba(255,255,255,0.05);
  --muted: #f2c5a3;
  --fg: #ffffff;
  --accent: #f97316;
  --accent-secondary: #f59e0b;
  --border: rgba(255,255,255,0.08);
}

.theme-espresso {
  --bg: #1b120d;
  --card: rgba(255, 255, 255, 0.06);
  --muted: #f3e6d0;
  --fg: #ffffff;
  --accent: #4db8aa; /* soft teal */
  --accent-secondary: #d99a5a; /* muted orange */
  --border: rgba(255,255,255,0.08);
}

.theme-midnight-blue {
  --bg: #121416;             /* almost-black navy */
  --card: #191c20;           /* subtle elevation */
  --muted: #a8b2c2;          /* soft cool gray text */
  --fg: #ffffff;
  --accent: #3a5a7a;         /* subtle blue reveal */
  --accent-secondary: #5f7ba0; /* lighter supporting accent */
  --border: rgba(255,255,255,0.10);
}

.theme-dracula-white {
  --bg: #eef2f7;
  --card: #ffffff;
  --muted: #64748b;
  --fg: #0f172a;
  --accent: #7c3aed; /* purple */
  --accent-secondary: #db2777; /* pink */
  --border: rgba(15, 23, 42, 0.14);
  --surface: #f8fafc;
}

body { background: var(--bg); color: var(--fg); transition: background-color 180ms ease, color 180ms ease; }
.app-shell, body, button, input, select, textarea { font-family: var(--font-family); font-size: var(--font-size-base); }
.app-shell, body { font-size: var(--font-size-base); }
html { font-size: var(--base-font-size, 16px); }
.app-shell { background: var(--bg); color: var(--fg); transition: background-color 180ms ease, color 180ms ease; }
.app-card { background: var(--card); }
.text-muted { color: var(--muted); }
.accent { color: var(--accent); }
.btn-primary { background: var(--accent); color: #0f172a; }
.btn-secondary { background: var(--accent-secondary); color: #0f172a; }
.nav-top { border-bottom: 1px solid var(--border); }
.nav-side { border-right: 1px solid var(--border); }

.nav-top, .nav-side, .app-card { transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }

.theme-dracula-white .btn-primary,
.theme-dracula-white .btn-secondary {
  color: #ffffff;
}

.theme-dracula-white .nav-top,
.theme-dracula-white .nav-side {
  background: rgba(248, 250, 252, 0.92) !important;
}

.theme-dracula-white .auth-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--border) !important;
}
.theme-dracula-white .auth-input {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--border) !important;
  color: #0f172a !important;
}
.theme-dracula-white .auth-muted { color: var(--muted) !important; }

.theme-dracula-white .text-white,
.theme-dracula-white .text-zinc-950 { color: #0f172a !important; }
.theme-dracula-white .text-zinc-900 { color: #111827 !important; }
.theme-dracula-white .text-zinc-200,
.theme-dracula-white .text-zinc-100 { color: #1f2937 !important; }
.theme-dracula-white .text-zinc-300 { color: #334155 !important; }
.theme-dracula-white .text-zinc-400 { color: #475569 !important; }
.theme-dracula-white .text-zinc-500 { color: #64748b !important; }

.theme-dracula-white .placeholder-white\\/40 { color: rgba(71, 85, 105, 0.70) !important; }

.theme-dracula-white .text-emerald-100,
.theme-dracula-white .text-emerald-200 { color: #065f46 !important; }
.theme-dracula-white .text-amber-100,
.theme-dracula-white .text-amber-200 { color: #92400e !important; }
.theme-dracula-white .text-rose-200 { color: #9f1239 !important; }
.theme-dracula-white .text-sky-200 { color: #075985 !important; }
.theme-dracula-white .text-slate-200 { color: #334155 !important; }

.theme-dracula-white .border-white,
.theme-dracula-white .border-white\\/10,
.theme-dracula-white .border-white\\/15 {
  border-color: var(--border) !important;
}

.theme-dracula-white .bg-white\\/5 { background-color: rgba(15, 23, 42, 0.05) !important; }
.theme-dracula-white .bg-white\\/10 { background-color: rgba(15, 23, 42, 0.09) !important; }
.theme-dracula-white .bg-white\\/30 { background-color: rgba(15, 23, 42, 0.18) !important; }
.theme-dracula-white .bg-white\\/\\[0\\.02\\] { background-color: rgba(15, 23, 42, 0.03) !important; }
.theme-dracula-white .bg-white\\/\\[0\\.03\\] { background-color: rgba(15, 23, 42, 0.04) !important; }
.theme-dracula-white .bg-white\\/\\[0\\.04\\] { background-color: rgba(15, 23, 42, 0.06) !important; }
.theme-dracula-white .bg-zinc-100 { background-color: #f1f5f9 !important; }
.theme-dracula-white .bg-zinc-700 { background-color: #e2e8f0 !important; }
.theme-dracula-white .bg-zinc-900\\/60 { background-color: #f1f5f9 !important; }
.theme-dracula-white .bg-zinc-950,
.theme-dracula-white .bg-zinc-950\\/95,
.theme-dracula-white .bg-zinc-950\\/80,
.theme-dracula-white .bg-zinc-950\\/90 {
  background-color: var(--surface) !important;
}

.theme-dracula-white .app-card {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}