@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700;800&family=Heebo:wght@500;700;800;900&family=Rubik:wght@600;700;800;900&family=Stardos+Stencil:wght@400;700&display=swap');

:root {
  color-scheme: dark;
}

body {
  font-family: 'Assistant', 'Heebo', 'Rubik', sans-serif;
  background-color: #070b14;
  color: #f8fafc;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Option Cards */
.option-card {
  transition: all 0.16s ease;
}
.option-card.selected {
  border-color: #10b981 !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.18), rgba(6, 78, 59, 0.32)) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.55), 0 8px 20px -6px rgba(16, 185, 129, 0.35);
}

/* Color Swatch Buttons */
.color-swatch-btn {
  transition: all 0.16s ease;
}
.color-swatch-btn.selected {
  border-color: #38bdf8 !important;
  background-color: rgba(14, 165, 233, 0.16) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

/* Payment Method Cards */
.pay-card {
  transition: all 0.16s ease;
}
.pay-card.selected {
  border-color: #38bdf8 !important;
  background-color: rgba(14, 165, 233, 0.15) !important;
  box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.5);
}

.stencil-preview {
  font-family: 'Stardos Stencil', sans-serif;
  letter-spacing: 0.06em;
}