/**
 * Maps Tailwind "orange" brand utilities to CSS variables so themes can swap palettes.
 * Load after Tailwind. Default :root = Sunset Orange.
 */
:root {
  --de-50: #fff7ed;
  --de-100: #ffedd5;
  --de-200: #fed7aa;
  --de-300: #fdba74;
  --de-400: #fb923c;
  --de-500: #f97316;
  --de-600: #ea580c;
  --de-700: #c2410c;
  --de-800: #9a3412;
  --de-tint-50: #fffbeb;
  --de-amber-600: #d97706;
  --de-ring: #fb923c;
}

/* Alternate themes: only variables */
html[data-theme="ocean"] {
  --de-50: #f0fdfa;
  --de-100: #ccfbf1;
  --de-200: #99f6e4;
  --de-300: #5eead4;
  --de-400: #2dd4bf;
  --de-500: #14b8a6;
  --de-600: #0d9488;
  --de-700: #0f766e;
  --de-800: #115e59;
  --de-tint-50: #ecfeff;
  --de-amber-600: #0d9488;
  --de-ring: #2dd4bf;
}

html[data-theme="forest"] {
  --de-50: #ecfdf5;
  --de-100: #d1fae5;
  --de-200: #a7f3d0;
  --de-300: #6ee7b7;
  --de-400: #34d399;
  --de-500: #10b981;
  --de-600: #059669;
  --de-700: #047857;
  --de-800: #065f46;
  --de-tint-50: #f0fdf4;
  --de-amber-600: #059669;
  --de-ring: #34d399;
}

html[data-theme="berry"] {
  --de-50: #fff1f2;
  --de-100: #ffe4e6;
  --de-200: #fecdd3;
  --de-300: #fda4af;
  --de-400: #fb7185;
  --de-500: #f43f5e;
  --de-600: #e11d48;
  --de-700: #be123c;
  --de-800: #9f1239;
  --de-tint-50: #fdf2f8;
  --de-amber-600: #db2777;
  --de-ring: #fb7185;
}

/* Text */
.text-orange-300 { color: var(--de-300) !important; }
.text-orange-400 { color: var(--de-400) !important; }
.text-orange-500 { color: var(--de-500) !important; }
.text-orange-600 { color: var(--de-600) !important; }
.text-orange-700 { color: var(--de-700) !important; }
.text-orange-800 { color: var(--de-800) !important; }
.text-orange-200 { color: var(--de-200) !important; }

/* Backgrounds */
.bg-orange-400 { background-color: var(--de-400) !important; }
.bg-orange-50 { background-color: var(--de-50) !important; }
.bg-orange-100 { background-color: var(--de-100) !important; }
.bg-orange-200 { background-color: var(--de-200) !important; }
.bg-orange-500 { background-color: var(--de-500) !important; }
.bg-orange-500\/20 {
  background-color: color-mix(in srgb, var(--de-500) 20%, transparent) !important;
}
.bg-orange-50\/80 {
  background-color: color-mix(in srgb, var(--de-50) 80%, transparent) !important;
}
.bg-amber-50 {
  background-color: var(--de-tint-50) !important;
}

/* Borders & divide */
.border-orange-100 { border-color: var(--de-100) !important; }
.border-orange-200 { border-color: var(--de-200) !important; }
.border-orange-300 { border-color: var(--de-300) !important; }
.border-orange-300\/40 {
  border-color: color-mix(in srgb, var(--de-300) 40%, transparent) !important;
}
.border-orange-500 { border-color: var(--de-500) !important; }
.ring-orange-100 { --tw-ring-color: var(--de-100) !important; }
.divide-orange-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--de-100) !important;
}

/* Ring focus */
.focus\:ring-orange-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--de-400) !important;
}

/* Hover text */
.hover\:text-orange-400:hover { color: var(--de-400) !important; }
.hover\:text-orange-500:hover { color: var(--de-500) !important; }
.hover\:text-orange-600:hover { color: var(--de-600) !important; }
.hover\:text-orange-800:hover { color: var(--de-800) !important; }

/* Hover background */
.hover\:bg-orange-50:hover { background-color: var(--de-50) !important; }
.hover\:bg-orange-100:hover { background-color: var(--de-100) !important; }
.hover\:bg-orange-500:hover { background-color: var(--de-500) !important; }
.hover\:bg-orange-600:hover { background-color: var(--de-600) !important; }

/* Gradients — brand orange/amber */
.from-orange-50 {
  --tw-gradient-from: var(--de-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-orange-50\/80 {
  --tw-gradient-from: color-mix(in srgb, var(--de-50) 80%, transparent) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-orange-50 {
  --tw-gradient-to: var(--de-50) var(--tw-gradient-to-position) !important;
}
.to-orange-50\/50 {
  --tw-gradient-to: color-mix(in srgb, var(--de-50) 50%, transparent) var(--tw-gradient-to-position) !important;
}
.from-orange-100 {
  --tw-gradient-from: var(--de-100) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-orange-400 {
  --tw-gradient-from: var(--de-400) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-orange-600 {
  --tw-gradient-from: var(--de-600) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-orange-400 {
  --tw-gradient-to: var(--de-400) var(--tw-gradient-to-position) !important;
}
.to-orange-600 {
  --tw-gradient-to: var(--de-600) var(--tw-gradient-to-position) !important;
}
.to-amber-50 {
  --tw-gradient-to: var(--de-tint-50) var(--tw-gradient-to-position) !important;
}

/* Footer / social hover still use orange-* — covered above */

/* Hygiene row kept amber hue but soft-tinted in themes via separate vars — optional: tie to brand */
html[data-theme="ocean"] .text-amber-600,
html[data-theme="forest"] .text-amber-600,
html[data-theme="berry"] .text-amber-600 {
  color: var(--de-amber-600) !important;
}