:root {
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-300: #fdba74;
  --brand-400: #fb923c;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --brand-800: #9a3412;
}

body.has-fixed-nav {
  padding-top: 84px;
}

@media (max-width: 768px) {
  body.has-fixed-nav {
    padding-top: 72px;
  }
}

/* Map sky palette to brand orange */
.bg-sky-50 { background-color: var(--brand-50) !important; }
.bg-sky-100 { background-color: var(--brand-100) !important; }
.bg-sky-200 { background-color: var(--brand-200) !important; }
.bg-sky-500 { background-color: var(--brand-500) !important; }
.bg-sky-600 { background-color: var(--brand-600) !important; }
.text-sky-400 { color: var(--brand-400) !important; }
.text-sky-500 { color: var(--brand-500) !important; }
.text-sky-600 { color: var(--brand-600) !important; }
.text-sky-700 { color: var(--brand-700) !important; }
.border-sky-100 { border-color: var(--brand-100) !important; }
.border-sky-500 { border-color: var(--brand-500) !important; }

/* Map teal palette to brand orange */
.bg-teal-100 { background-color: var(--brand-100) !important; }
.bg-teal-500 { background-color: var(--brand-500) !important; }
.text-teal-300 { color: var(--brand-300) !important; }
.text-teal-400 { color: var(--brand-400) !important; }
.text-teal-500 { color: var(--brand-500) !important; }
.border-teal-500 { border-color: var(--brand-500) !important; }

/* Map indigo palette to brand orange */
.bg-indigo-100 { background-color: var(--brand-100) !important; }
.bg-indigo-500 { background-color: var(--brand-500) !important; }
.text-indigo-300 { color: var(--brand-300) !important; }
.text-indigo-500 { color: var(--brand-500) !important; }
.border-indigo-100 { border-color: var(--brand-100) !important; }

/* Common hover states */
.hover\:bg-sky-50:hover { background-color: var(--brand-50) !important; }
.hover\:bg-sky-600:hover { background-color: var(--brand-600) !important; }
.hover\:text-sky-500:hover { color: var(--brand-500) !important; }
.hover\:text-sky-600:hover { color: var(--brand-600) !important; }
.hover\:text-sky-400:hover { color: var(--brand-400) !important; }

/* Opacity variants used in gradients/blobs */
.bg-sky-200\/30 { background-color: rgb(254 215 170 / 0.3) !important; }
.bg-teal-100\/30 { background-color: rgb(255 237 213 / 0.3) !important; }
.bg-teal-500\/10 { background-color: rgb(249 115 22 / 0.1) !important; }