:root {
  --theme-bg: #f9fafb;
  --theme-card: #ffffff;
  --theme-card-border: #e5e7eb;
  --theme-text: #111827;
  --theme-muted: #6b7280;
  --theme-primary: #4f46e5;
  --theme-primary-contrast: #ffffff;
}

body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* Slate (dark) theme */
body.theme-slate {
  --theme-bg: #0b1220;
  --theme-card: #0f172a;
  --theme-card-border: #1f2937;
  --theme-text: #e2e8f0;
  --theme-muted: #94a3b8;
  --theme-primary: #38bdf8;
  --theme-primary-contrast: #0b1220;
}

/* Sunrise (warm) theme */
body.theme-sunrise {
  --theme-bg: linear-gradient(135deg, #fff7ed 0%, #ffe4e6 100%);
  --theme-card: #fff7ed;
  --theme-card-border: #fed7aa;
  --theme-text: #4c1d95;
  --theme-muted: #9a3412;
  --theme-primary: #f97316;
  --theme-primary-contrast: #ffffff;
}

/* Shared overrides using existing utility classes */
body.theme-slate .bg-white,
body.theme-sunrise .bg-white {
  background-color: var(--theme-card) !important;
}

body.theme-slate .border,
body.theme-slate .border-gray-100,
body.theme-slate .border-gray-200,
body.theme-slate .border-indigo-200,
body.theme-slate .border-emerald-200,
body.theme-slate .border-blue-200,
body.theme-slate .border-purple-200,
body.theme-sunrise .border,
body.theme-sunrise .border-gray-100,
body.theme-sunrise .border-gray-200,
body.theme-sunrise .border-indigo-200,
body.theme-sunrise .border-emerald-200,
body.theme-sunrise .border-blue-200,
body.theme-sunrise .border-purple-200 {
  border-color: var(--theme-card-border) !important;
}

body.theme-slate .text-gray-800,
body.theme-slate .text-gray-700,
body.theme-slate .text-gray-600,
body.theme-slate .text-gray-500,
body.theme-slate .text-gray-400,
body.theme-sunrise .text-gray-800,
body.theme-sunrise .text-gray-700,
body.theme-sunrise .text-gray-600,
body.theme-sunrise .text-gray-500,
body.theme-sunrise .text-gray-400 {
  color: var(--theme-muted) !important;
}

body.theme-slate .text-gray-900,
body.theme-sunrise .text-gray-900 {
  color: var(--theme-text) !important;
}

body.theme-slate .text-indigo-600,
body.theme-sunrise .text-indigo-600,
body.theme-slate .text-indigo-700,
body.theme-sunrise .text-indigo-700 {
  color: var(--theme-primary) !important;
}

body.theme-slate .bg-indigo-600,
body.theme-sunrise .bg-indigo-600,
body.theme-slate .bg-indigo-700,
body.theme-sunrise .bg-indigo-700 {
  background-color: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

body.theme-slate .bg-gray-50,
body.theme-sunrise .bg-gray-50 {
  background-color: color-mix(in srgb, var(--theme-card) 88%, transparent) !important;
}

body.theme-slate .bg-indigo-50,
body.theme-sunrise .bg-indigo-50,
body.theme-slate .bg-blue-50,
body.theme-sunrise .bg-blue-50,
body.theme-slate .bg-purple-50,
body.theme-sunrise .bg-purple-50,
body.theme-slate .bg-emerald-50,
body.theme-sunrise .bg-emerald-50 {
  background-color: color-mix(in srgb, var(--theme-card) 92%, transparent) !important;
}

body.theme-slate .shadow-lg,
body.theme-sunrise .shadow-lg,
body.theme-slate .shadow-sm,
body.theme-sunrise .shadow-sm {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Unique layout accents */
body.theme-slate .theme-shell {
  padding: 24px;
}

body.theme-slate .theme-card {
  background: linear-gradient(145deg, #0f172a 0%, #111827 100%) !important;
  color: #e2e8f0 !important;
  border: 1px solid #1f2937 !important;
}

body.theme-slate .theme-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1220 100%) !important;
  border-bottom: 1px solid #1f2937;
}

body.theme-slate .theme-card input,
body.theme-slate .theme-card textarea,
body.theme-slate .theme-card select {
  background-color: #0b1220 !important;
  border-color: #1f2937 !important;
  color: #e2e8f0 !important;
}

body.theme-sunrise .theme-shell {
  padding: 20px;
}

body.theme-sunrise .theme-card {
  background: linear-gradient(160deg, #fff7ed 0%, #fff1f2 100%) !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 18px 35px rgba(249, 115, 22, 0.15) !important;
}

body.theme-sunrise .theme-hero {
  background: linear-gradient(135deg, #f97316 0%, #fb7185 50%, #f59e0b 100%) !important;
  color: #ffffff !important;
}

body.theme-sunrise .theme-card input,
body.theme-sunrise .theme-card textarea,
body.theme-sunrise .theme-card select {
  background-color: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
}