/*
 * Fidi Design System - Core Styles & Dark Theme Controls
 */

/* Form Elements Default Dark Theme Styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: #030712 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color-scheme: dark;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35) !important;
}

input::placeholder,
textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

select option {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

/* Stamp Slot Styles */
.stamp-slot {
  aspect-ratio: 1 / 1;
  border-radius: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

/* Earned Stamp - Radiant Golden Badge with high contrast checkmark */
.stamp-earned {
  background: linear-gradient(135deg, #fef08a 0%, #fbbf24 45%, #f59e0b 100%) !important;
  border: 2px solid #fef9c3 !important;
  color: #451a03 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  transform: scale(1.04);
}

.stamp-earned svg {
  color: #451a03 !important;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.3));
}

.stamp-earned span {
  color: #451a03 !important;
  font-weight: 900 !important;
}

/* Next Stamp in line - Pulsing dashed amber border */
.stamp-next {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 2px dashed rgba(251, 191, 36, 0.85) !important;
  color: #fde047 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.25) !important;
}

/* Future Unearned Stamp */
.stamp-unearned {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}

/* Card Gradient themes */
.card-gradient-indigo {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 35%, #7e22ce 100%) !important;
}
.card-gradient-emerald {
  background: linear-gradient(135deg, #064e3b 0%, #047857 35%, #0d9488 100%) !important;
}
.card-gradient-amber {
  background: linear-gradient(135deg, #9a3412 0%, #ea580c 35%, #e11d48 100%) !important;
}
.card-gradient-blue {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 35%, #06b6d4 100%) !important;
}
.card-gradient-dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #78350f 100%) !important;
}