:root {
  --page-bg: #f6efe3;
  --surface: rgba(255,252,247,0.96);
  --surface-strong: #fcfbf8;
  --surface-muted: #f8f3ea;
  --text: #19324a;
  --muted: #111827;
  --accent: #2f5d62;
  --accent-2: #4c7b83;
  --accent-soft: rgba(47,93,98,0.1);
  --accent-soft-2: rgba(76,123,131,0.1);
  --border: rgba(25,50,74,0.1);
  --shadow: 0 12px 32px rgba(25,50,74,0.06);
  --success: #0f9d73;
  --warning: #d97706;
  --danger: #dc2626;
}

.dark {
  /* Light-only mode: keep tokens identical so any `.dark` class does not switch to a dark palette. */
  --page-bg: #f6efe3;
  --surface: rgba(255,252,247,0.96);
  --surface-strong: #fcfbf8;
  --surface-muted: #f8f3ea;
  --text: #19324a;
  --muted: #111827;
  --accent: #2f5d62;
  --accent-2: #4c7b83;
  --accent-soft: rgba(47,93,98,0.1);
  --accent-soft-2: rgba(76,123,131,0.1);
  --border: rgba(25,50,74,0.1);
  --shadow: 0 12px 32px rgba(25,50,74,0.06);
}


html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  background: var(--page-bg) !important;
  color: var(--text) !important;
  transition: background 0.25s ease, color 0.25s ease;
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  display: none;
}

/* Force light look even if pages use `.dark:` Tailwind classes */
.dark,
.dark * {
  color-scheme: light !important;
}

.dark {
  background: var(--page-bg) !important;
  color: var(--text) !important;
}

.dark input,
.dark select,
.dark textarea {
  background-color: var(--surface-muted) !important;
  color: var(--text) !important;
}

.dark table,
.dark thead,
.dark tbody,
.dark tr,
.dark th,
.dark td {
  background: transparent !important;
  color: var(--text) !important;
}


main,
nav,
header,
section,
form,
.card,
.glass-card {
  position: relative;
  z-index: 1;
}

body,
body * {
  color: var(--text) !important;
}

::selection {
  background: rgba(37,99,235,0.2);
  color: var(--text);
}

::placeholder {
  color: var(--text) !important;
  opacity: 0.7;
}

.glass-card {
  background: var(--surface-strong) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem !important;
}

.rounded-\[2\.5rem\],
.rounded-\[3rem\],
.rounded-\[3\.5rem\],
.rounded-\[2rem\] {
  border-radius: 1rem !important;
}

.rounded-2xl {
  border-radius: 0.9rem !important;
}

.rounded-xl {
  border-radius: 0.75rem !important;
}

.glass-card:hover {
  transform: none;
  box-shadow: 0 16px 40px rgba(15,23,42,0.1) !important;
}

input,
select,
textarea {
  background-color: var(--surface-muted) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(47,93,98,0.14) !important;
}

/* Light-only background for inputs in case `.dark` class exists */
.dark input,
.dark select,
.dark textarea {
  background-color: var(--surface-muted) !important;
  color: var(--text) !important;
}


.bg-indigo-600,
.bg-indigo-500,
.from-indigo-500,
.to-indigo-500,
.bg-violet-600,
.bg-blue-600,
.bg-emerald-500,
.bg-rose-500 {
  box-shadow: 0 10px 24px -12px rgba(47,93,98,0.22) !important;
}

.bg-indigo-600,
.bg-indigo-500,
.from-indigo-500,
.to-indigo-500,
.from-violet-500,
.to-violet-500,
.from-blue-500,
.to-blue-500,
.from-sky-500,
.to-sky-500,
.bg-violet-600,
.bg-blue-600 {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  background-color: var(--accent) !important;
  color: white !important;
}

.bg-emerald-500 {
  background: linear-gradient(135deg, #0f9d73, #34d399) !important;
  background-color: #0f9d73 !important;
}

.bg-rose-500 {
  background: linear-gradient(135deg, #dc2626, #fb7185) !important;
  background-color: #dc2626 !important;
}

.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-500:hover,
.hover\:bg-violet-600:hover,
.hover\:bg-blue-600:hover,
.hover\:from-indigo-500:hover,
.hover\:to-violet-500:hover,
.hover\:from-violet-500:hover,
.hover\:to-indigo-500:hover {
  background-color: var(--accent) !important;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
}

.text-indigo-500,
.text-indigo-600,
.text-blue-500,
.text-sky-500,
.text-violet-500 {
  color: var(--accent) !important;
}

.border-indigo-500,
.border-indigo-600,
.border-blue-500,
.border-violet-500 {
  border-color: var(--accent) !important;
}

.text-slate-500,
.text-slate-400,
.text-slate-600,
.text-slate-300,
.text-slate-700,
.text-slate-800,
.text-gray-500,
.text-gray-400,
.text-gray-600,
.text-gray-300,
.text-gray-700,
.text-zinc-500,
.text-zinc-400,
.text-zinc-600,
.text-zinc-300,
.text-stone-500,
.text-stone-400,
.text-stone-600,
.text-stone-300 {
  color: var(--text) !important;
}

.text-white {
  color: var(--text) !important;
}

.bg-indigo-600.text-white,
.bg-indigo-500.text-white,
.bg-violet-600.text-white,
.bg-blue-600.text-white,
.bg-emerald-500.text-white,
.bg-rose-500.text-white,
.bg-orange-500.text-white,
.from-indigo-600.text-white,
.to-indigo-600.text-white,
.from-indigo-500.text-white,
.to-indigo-500.text-white,
.from-violet-500.text-white,
.to-violet-500.text-white,
.from-blue-500.text-white,
.to-blue-500.text-white,
.from-sky-500.text-white,
.to-sky-500.text-white,
.bg-gradient-to-r.text-white,
.bg-gradient-to-br.text-white {
  color: white !important;
}

.bg-white.text-white,
.bg-white\/10.text-white,
.bg-white\/5.text-white,
.bg-white\/\[0\.02\].text-white,
.bg-white\/\[0\.03\].text-white,
.bg-white\/\[0\.05\].text-white,
.bg-slate-50.text-white,
.bg-slate-100.text-white,
.bg-slate-200.text-white,
.bg-slate-50\/10.text-white,
.bg-slate-100\/10.text-white,
.bg-slate-100\/5.text-white,
.bg-slate-200\/10.text-white {
  color: var(--text) !important;
}

.bg-slate-100,
.bg-slate-50,
.bg-slate-600,
.bg-slate-700,
.bg-slate-800,
.bg-slate-900,
.bg-slate-900\/10,
.bg-slate-900\/20,
.bg-slate-900\/30,
.bg-slate-900\/50,
.bg-slate-900\/80,
.bg-slate-950,
.bg-slate-950\/20,
.bg-slate-950\/30,
.bg-slate-950\/50,
.bg-slate-950\/80,
.dark\:bg-slate-900,
.dark\:bg-slate-950,
.dark\:bg-\[\#0d121f\],
.dark\:bg-\[\#0d1324\] {
  background-color: var(--surface-strong) !important;
  color: var(--text) !important;
}

.text-slate-100,
.text-slate-200 {
  color: var(--text) !important;
}

.border-white\/5,
.border-white\/10,
.border-white\/20 {
  border-color: var(--border) !important;
}

.badge,
.stat-badge,
.rounded-full {
  border-color: var(--border) !important;
  background: var(--surface-muted) !important;
  color: var(--muted) !important;
}

button,
a {
  transition: all 0.2s ease;
}

button:hover,
a:hover {
  transform: translateY(-1px);
}