/* ============================================
   Chordo Warm Sunset Theme
   Overrides index-css.css color palette
   Transforms cold blue/purple → warm amber/sunset
   ============================================ */

/* --- Root CSS Variables (HSL) --- */
:root {
  --background: 30 30% 6%;
  --foreground: 30 20% 95%;
  --card: 30 30% 8%;
  --card-foreground: 30 20% 95%;
  --popover: 30 30% 8%;
  --popover-foreground: 30 20% 95%;
  --primary: 38 95% 55%;
  --primary-foreground: 30 30% 6%;
  --secondary: 30 15% 18%;
  --secondary-foreground: 30 20% 95%;
  --muted: 30 15% 18%;
  --muted-foreground: 30 10% 65%;
  --accent: 30 15% 18%;
  --accent-foreground: 30 20% 95%;
  --destructive: 0 70% 40%;
  --destructive-foreground: 30 20% 95%;
  --border: 30 15% 18%;
  --input: 30 15% 18%;
  --ring: 38 95% 55%;
}

/* --- Body Background (warm dark gradient) --- */
body {
  --tw-gradient-from: #0c0a09 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 10 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(28 25 24 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #292524 var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #1c1410 var(--tw-gradient-to-position);
}

/* --- Gradient From Classes --- */
.from-slate-900 {
  --tw-gradient-from: #0c0a09 var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600\/20 {
  --tw-gradient-from: rgb(217 119 6 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500 {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500 {
  --tw-gradient-from: #ea580c var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* --- Gradient Via Classes --- */
.via-blue-900 {
  --tw-gradient-to: rgb(41 37 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #292524 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* --- Gradient To Classes --- */
.to-indigo-900 {
  --tw-gradient-to: #1c1410 var(--tw-gradient-to-position);
}
.to-purple-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.to-purple-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}
.to-purple-600\/20 {
  --tw-gradient-to: rgb(234 88 12 / 0.2) var(--tw-gradient-to-position);
}
.to-red-600 {
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}
.to-cyan-600 {
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}
.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-pink-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

/* --- Background Color Classes --- */
.bg-blue-500 {
  background-color: rgb(245 158 11) !important;
}
.bg-blue-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-blue-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-blue-500\/30 {
  background-color: rgb(245 158 11 / 0.3);
}
.bg-purple-500\/20 {
  background-color: rgb(249 115 22 / 0.2);
}
.bg-red-500 {
  background-color: rgb(244 63 94);
}
.bg-red-500\/10 {
  background-color: rgb(251 113 133 / 0.1);
}
.bg-slate-700 {
  background-color: rgb(68 64 60);
}
.bg-slate-800 {
  background-color: rgb(41 37 36);
}
.bg-slate-900 {
  background-color: rgb(28 25 23);
}
.bg-slate-900\/80 {
  background-color: rgb(28 25 23 / 0.8);
}

/* --- Missing background classes added --- */
.bg-indigo-500\/20 {
  background-color: rgb(251 113 133 / 0.2);
}
.bg-green-500\/10 {
  background-color: rgb(52 211 153 / 0.1);
}

/* --- Text Color Classes --- */
.text-blue-400 {
  color: rgb(251 191 36);
}
.text-green-400 {
  color: rgb(52 211 153);
}
.text-red-400 {
  color: rgb(251 113 133);
}
.text-slate-500 {
  color: rgb(120 113 108);
}
.text-blue-300 {
  color: rgb(252 211 77);
}
.text-purple-300 {
  color: rgb(253 186 116);
}

/* --- Missing text color classes added --- */
.text-indigo-300 {
  color: rgb(253 164 175);
}

/* --- Border Color Classes --- */
.border-blue-400 {
  border-color: rgb(251 191 36);
}
.border-blue-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}
.border-blue-500\/50 {
  border-color: rgb(245 158 11 / 0.5);
}
.border-red-500\/50 {
  border-color: rgb(251 113 133 / 0.5);
}
.border-slate-700 {
  border-color: rgb(68 64 60);
}
.border-slate-900 {
  border-color: rgb(28 25 23);
}

/* --- Missing border classes added --- */
.border-indigo-500\/30 {
  border-color: rgb(251 113 133 / 0.3);
}
.border-green-500\/30 {
  border-color: rgb(52 211 153 / 0.3);
}

/* --- Glass Effect (warm tone) --- */
.glass-effect {
  border-color: rgb(245 158 11 / 0.15);
  background-color: rgba(28, 25, 23, 0.4);
}

/* --- Gradient Text (amber→orange→rose) --- */
.gradient-text {
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(251 128 69 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
}

/* --- Hover States --- */
.hover\:bg-blue-600:hover {
  background-color: rgb(217 119 6);
}
.hover\:bg-red-500\/20:hover {
  background-color: rgb(251 113 133 / 0.2);
}
.hover\:from-blue-600:hover {
  --tw-gradient-from: #d97706 var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-purple-700:hover {
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}
.hover\:from-green-600:hover {
  --tw-gradient-from: #059669 var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-emerald-700:hover {
  --tw-gradient-to: #047857 var(--tw-gradient-to-position);
}
.hover\:text-blue-300:hover {
  color: rgb(252 211 77);
}
.hover\:text-red-400:hover {
  color: rgb(251 113 133);
}

/* --- Focus Ring --- */
.focus\:ring-blue-400:focus {
  --tw-ring-color: rgb(251 191 36);
}

/* --- Card Hover Shadow --- */
.card-hover:hover {
  --tw-shadow-color: rgb(245 158 11 / 0.25);
}

/* --- Pulse Glow (warm amber) --- */
.pulse-glow {
  animation: pulse-glow-warm 2s ease-in-out infinite alternate;
}
@keyframes pulse-glow-warm {
  0% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); }
  100% { box-shadow: 0 0 40px rgba(251, 146, 60, 0.8); }
}

/* --- Floating Animation (slightly slower, smoother) --- */
.floating-animation {
  animation: float-warm 7s ease-in-out infinite;
}
@keyframes float-warm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}

/* --- Input field override for warm theme --- */
input, textarea, select {
  caret-color: #fbbf24;
}

/* --- Scrollbar styling (warm) --- */
::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
}
::-webkit-scrollbar-track {
  background: rgba(28, 25, 23, 0.5);
}