@import "tailwindcss";

@theme {
  --color-emerald-500: #10b981;
  --color-emerald-700: #047857;
  --color-teal-600: #0d9488;
  --color-teal-800: #115e59;
  
  --color-indigo-500: #6366f1;
  --color-indigo-700: #4338ca;
  --color-purple-600: #9333ea;
  --color-purple-800: #6b21a8;

  --color-pink-500: #ec4899;
  --color-pink-700: #be185d;
  --color-rose-600: #e11d48;
  --color-rose-800: #9f1239;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  background-color: #0f172a; /* slate-900 */
}

/* Custom slider styling for Webkit/Firefox */
input[type=range] {
  -webkit-appearance: none;
  @apply w-full h-2 bg-slate-700 rounded-lg outline-none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  @apply w-4 h-4 rounded-full bg-slate-200 cursor-pointer shadow-md transition-transform hover:scale-110 active:scale-95;
}

input[type=range]::-moz-range-thumb {
  @apply w-4 h-4 rounded-full bg-slate-200 cursor-pointer shadow-md border-none transition-transform hover:scale-110 active:scale-95;
}

.glass-panel {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px 0 rgba(217, 119, 6, 0.39);
}

.premium-btn:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.23);
  transform: translateY(-1px);
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}