@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  --sanitify-cyan: #00e5ff;
  --sanitify-blue: #007aff;
  --sanitify-dark: #0a192f;
  --sanitify-surface: #f8fbff;
  --sanitify-surface-soft: #eef7ff;
  --sanitify-border: #d7e9ff;
}

body,
.font-sans {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--sanitify-surface);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-serif,
.font-display {
  font-family: 'Poppins', sans-serif !important;
}

.bg-emerald-50,
.bg-emerald-50\/60 {
  background-color: var(--sanitify-surface-soft) !important;
}

.bg-emerald-100,
.bg-emerald-100\/70 {
  background-color: #d9efff !important;
}

.bg-emerald-700 {
  background-color: var(--sanitify-blue) !important;
}

.bg-emerald-800,
.bg-emerald-900 {
  background-color: var(--sanitify-dark) !important;
}

.text-emerald-50,
.text-emerald-100,
.text-emerald-200 {
  color: #dff6ff !important;
}

.text-emerald-700,
.text-emerald-800 {
  color: var(--sanitify-blue) !important;
}

.text-emerald-900,
.text-emerald-950 {
  color: var(--sanitify-dark) !important;
}

.border-emerald-50,
.border-emerald-100,
.border-emerald-200 {
  border-color: var(--sanitify-border) !important;
}

.from-emerald-50 {
  --tw-gradient-from: var(--sanitify-surface-soft) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(238 247 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.hover\:bg-emerald-50:hover,
.hover\:bg-emerald-100:hover {
  background-color: #e5f2ff !important;
}

.hover\:bg-emerald-800:hover {
  background-color: #07203d !important;
}

.hover\:text-emerald-700:hover {
  color: #0a90ff !important;
}

.selection\:bg-emerald-200::selection {
  background-color: rgba(0, 229, 255, 0.28) !important;
}