:root {
  --warm-cream: #fbf7f0;
  --soft-terracotta: #e8a87c;
  --deep-terracotta: #d4773c;
  --sage-green: #9caf88;
  --deep-teal: #4a7c7e;
  --warm-grey: #5a5a5a;
  --light-grey: #f4f1ec;
  --accent-coral: #f2937e;
  --dark-bg: #122426;
  --dark-surface: #1c3436;
  --dark-surface-2: #274648;
  --dark-border: #3d6668;
  --dark-text: #f4ecdf;
}

html,
body {
  background: var(--warm-cream) !important;
  color: var(--warm-grey) !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

h1,
h2,
h3,
.font-serif {
  font-family: 'Crimson Pro', Georgia, serif !important;
}

#root {
  background: radial-gradient(circle at 10% -10%, rgba(232, 168, 124, 0.2), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(74, 124, 126, 0.14), transparent 36%),
    var(--warm-cream);
}

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

.dark #root,
html.dark #root {
  background: radial-gradient(circle at 10% -10%, rgba(212, 119, 60, 0.12), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(74, 124, 126, 0.18), transparent 36%),
    var(--dark-bg);
}

.bg-white {
  background-color: #fff !important;
}

.dark .bg-white {
  background-color: var(--dark-surface) !important;
}

.bg-slate-950,
.bg-slate-900 {
  background-color: #315c5e !important;
}

.bg-slate-800 {
  background-color: #437274 !important;
}

.bg-slate-700 {
  background-color: #648f91 !important;
}

.bg-slate-300,
.bg-slate-200,
.bg-slate-100 {
  background-color: #f1e7da !important;
}

.bg-slate-50 {
  background-color: var(--warm-cream) !important;
}

.text-slate-900,
.text-slate-800 {
  color: #2f4f50 !important;
}

.text-slate-700,
.text-slate-600,
.text-slate-500,
.text-slate-400 {
  color: var(--warm-grey) !important;
}

.text-slate-300,
.text-slate-200,
.text-slate-100 {
  color: #f8f4ed !important;
}

.border-slate-800,
.border-slate-700 {
  border-color: rgba(74, 124, 126, 0.45) !important;
}

.border-slate-200,
.border-slate-100 {
  border-color: #e9dac8 !important;
}

.dark .bg-slate-950,
.dark .bg-slate-900 {
  background-color: var(--dark-bg) !important;
}

.dark .bg-slate-800 {
  background-color: var(--dark-surface) !important;
}

.dark .bg-slate-700 {
  background-color: var(--dark-surface-2) !important;
}

.dark .bg-slate-300,
.dark .bg-slate-200,
.dark .bg-slate-100,
.dark .bg-slate-50 {
  background-color: #284244 !important;
}

.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400 {
  color: var(--dark-text) !important;
}

.dark .text-slate-300,
.dark .text-slate-200,
.dark .text-slate-100 {
  color: #efe6d8 !important;
}

.dark .border-slate-800,
.dark .border-slate-700,
.dark .border-slate-200,
.dark .border-slate-100 {
  border-color: var(--dark-border) !important;
}

.bg-teal-700,
.bg-teal-600,
.bg-blue-700,
.bg-blue-600 {
  background-color: var(--deep-terracotta) !important;
}

.bg-teal-100,
.bg-blue-100,
.bg-blue-50 {
  background-color: #f6e1ce !important;
}

.text-teal-800,
.text-teal-700,
.text-teal-600,
.text-blue-800,
.text-blue-700,
.text-blue-600 {
  color: var(--deep-terracotta) !important;
}

.text-teal-400,
.text-blue-400,
.text-blue-500,
.text-blue-300,
.text-blue-200 {
  color: var(--soft-terracotta) !important;
}

.border-teal-500,
.border-blue-500,
.border-blue-200,
.border-blue-100 {
  border-color: rgba(212, 119, 60, 0.45) !important;
}

.dark .bg-teal-100,
.dark .bg-blue-100,
.dark .bg-blue-50 {
  background-color: rgba(212, 119, 60, 0.18) !important;
}

.dark .text-teal-400,
.dark .text-teal-600,
.dark .text-blue-400,
.dark .text-blue-500,
.dark .text-blue-600,
.dark .text-blue-300,
.dark .text-blue-200 {
  color: #f1c29c !important;
}

.dark .border-teal-500,
.dark .border-blue-500,
.dark .border-blue-200,
.dark .border-blue-100 {
  border-color: rgba(232, 168, 124, 0.45) !important;
}

.dark .dark\:bg-slate-950,
.dark .dark\:bg-slate-900 {
  background-color: var(--dark-bg) !important;
}

.dark .dark\:bg-slate-800 {
  background-color: var(--dark-surface) !important;
}

.dark .dark\:bg-slate-700 {
  background-color: var(--dark-surface-2) !important;
}

.dark .dark\:bg-slate-50,
.dark .dark\:bg-slate-100,
.dark .dark\:bg-slate-200,
.dark .dark\:bg-slate-300,
.dark .dark\:bg-white {
  background-color: #284244 !important;
}

.dark .dark\:text-white,
.dark .dark\:text-slate-100,
.dark .dark\:text-slate-200,
.dark .dark\:text-slate-300,
.dark .dark\:text-slate-400,
.dark .dark\:text-slate-500 {
  color: var(--dark-text) !important;
}

.dark .dark\:text-blue-200,
.dark .dark\:text-blue-300,
.dark .dark\:text-blue-400,
.dark .dark\:text-teal-200,
.dark .dark\:text-teal-400 {
  color: #f1c29c !important;
}

.dark .dark\:border-slate-700,
.dark .dark\:border-slate-800 {
  border-color: var(--dark-border) !important;
}

.dark .dark\:border-blue-900\/50,
.dark .dark\:border-amber-900\/50 {
  border-color: rgba(232, 168, 124, 0.35) !important;
}

.dark .dark\:bg-blue-900,
.dark .dark\:bg-teal-900 {
  background-color: #2b3f42 !important;
}

.dark .dark\:bg-blue-800,
.dark .dark\:bg-teal-800 {
  background-color: #355559 !important;
}

.dark .dark\:hover\:bg-slate-800:hover,
.dark .dark\:hover\:bg-slate-700:hover {
  background-color: #35595c !important;
}

.from-blue-600,
.from-blue-500,
.from-teal-500 {
  --tw-gradient-from: var(--deep-terracotta) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(212 119 60 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-indigo-700,
.to-indigo-600,
.to-indigo-500,
.to-emerald-700,
.to-emerald-600,
.to-emerald-500,
.to-violet-700 {
  --tw-gradient-to: var(--deep-teal) var(--tw-gradient-to-position) !important;
}

button,
[role='button'],
.cta,
.cta-button {
  border-radius: 16px;
}

input,
textarea,
select {
  border-radius: 14px !important;
}

button[class*='bg-teal-'],
button[class*='bg-blue-'] {
  background-color: var(--deep-terracotta) !important;
  color: #fff !important;
}

button[class*='bg-teal-']:hover,
button[class*='bg-blue-']:hover {
  background-color: var(--soft-terracotta) !important;
}