/* ReachEra AI - Premium Theme Overrides */
:root {
  --primary: #F8FAFC; /* Crisp Off-White */
  --secondary: #94A3B8; /* Muted Ice Blue */
  --tertiary: #6366F1; /* Premium Electric Indigo/Cobalt */
  
  --success: #10B981; /* Emerald Green */
  --warning: #F59E0B; /* Amber Gold */
  --error: #EF4444; /* Coral Red */
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6, 
.text-h1, .text-h2, .text-h3, .text-white {
  color: var(--primary) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.text-primary, .text-on-surface, .text-on-background {
  color: var(--primary) !important;
}

.text-secondary, .text-on-surface-variant {
  color: var(--secondary) !important;
}

.text-tertiary {
  color: var(--tertiary) !important;
}

/* Accent Color Overrides (Teal/Cyan to Indigo/Cobalt) */
.text-cyan-400, .text-cyan-500, .text-teal-400 {
  color: var(--tertiary) !important;
}

.bg-cyan-400, .bg-cyan-500, .bg-teal-400, .bg-tertiary {
  background-color: var(--tertiary) !important;
}

.border-cyan-400, .border-cyan-500, .border-teal-400, .border-tertiary {
  border-color: var(--tertiary) !important;
}

/* Premium Buttons Styling */
.btn-emerald, .btn-primary {
  background-color: var(--tertiary) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

.btn-emerald:hover, .btn-primary:hover {
  background-color: #4F46E5 !important; /* Brighter Indigo */
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
  transform: translateY(-1.5px);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--secondary) !important;
  transition: all 0.2s ease !important;
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--primary) !important;
}

/* Glassmorphism Panel Hover Effect Override */
.glass-panel:hover {
  border-color: rgba(99, 102, 241, 0.28) !important;
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.12) !important;
}

/* Form Inputs Styling */
.inp:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--tertiary) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}

/* Status Dots and Icons */
.status-dot-active {
  background-color: var(--success) !important;
  box-shadow: 0 0 8px var(--success) !important;
}

.status-dot-sandbox {
  background-color: var(--warning) !important;
  box-shadow: 0 0 8px var(--warning) !important;
}

/* Close & Destructive Icons */
.material-symbols-outlined.text-error:hover, 
button:hover > .material-symbols-outlined {
  transition: color 0.2s ease !important;
}

.material-symbols-outlined {
  transition: color 0.2s ease !important;
}

/* Scrollbars */
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--tertiary) !important;
  border-radius: 999px !important;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
}