@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;700&family=Poppins:wght@600;700&display=swap');

:root {
  --crimson:       #FF0052;
  --gold:          #FFD400;
  --emerald:       #00C68D;
  --royal:         #0055DA;
  --crimson-light: #FFE5EC;
  --gold-light:    #FFF8D6;
  --emerald-light: #E0FAF4;
  --royal-light:   #E5EEFF;
  --dark:          #0D0D1A;
  --surface:       #F8F9FF;
  --text:          #1A1A2E;
  --muted:         #6B7280;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--surface);
  color: var(--text);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Animations */
.page-enter { 
  animation: slideUpFade 300ms ease-out; 
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scan-success { 
  animation: scanSuccess 600ms ease; 
}

@keyframes scanSuccess {
  0%   { background: transparent; }
  30%  { background: rgba(0, 198, 141, 0.3); transform: scale(1.02); }
  100% { background: transparent; transform: scale(1); }
}

.scan-error { 
  animation: shake 400ms ease; 
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

.total-update { 
  animation: totalPulse 400ms ease; 
}

@keyframes totalPulse {
  0%, 100% { color: inherit; }
  50%      { color: var(--crimson); transform: scale(1.05); }
}

/* Utilities */
.btn-touch {
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.btn-touch:active { 
  transform: scale(0.96); 
}

.product-tile {
  transition: transform 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}

.product-tile:active {
  transform: scale(0.94);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Custom Tailwind Colors (if used outside Tailwind classes) */
.bg-crimson { background-color: var(--crimson); }
.text-crimson { color: var(--crimson); }
.bg-emerald { background-color: var(--emerald); }
.text-emerald { color: var(--emerald); }
.bg-gold { background-color: var(--gold); }
.text-gold { color: var(--gold); }
.bg-royal { background-color: var(--royal); }
.text-royal { color: var(--royal); }
.bg-dark { background-color: var(--dark); }
.text-dark { color: var(--dark); }