:root {
  --cream: #FAF6EF;
  --red: #C8102E;
  --red-dark: #A00D24;
  --charcoal: #1A1A1A;
  --mustard: #F5B82E;
  --muted: #6B6B6B;
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.btn-primary {
  background: var(--red);
  color: white;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 20px;
  transition: all 0.15s;
}
.btn-primary:hover { background: var(--red-dark); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: white;
  color: var(--charcoal);
  border: 1.5px solid var(--charcoal);
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 20px;
}

.badge-red {
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-mustard {
  background: var(--mustard);
  color: var(--charcoal);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.15s;
}
.card:active { transform: scale(0.98); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

.stepper-line {
  height: 3px;
  background: #E5E5E5;
  flex: 1;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.stepper-line.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  animation: fill 0.5s ease-out;
}
@keyframes fill { from { width: 0; } to { width: 100%; } }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}