/* ── Design tokens ────────────────────────────────────── */
:root {
  --color-espresso: #2b1d16;
  --color-cream: #faf6ef;
  --color-terracotta: #c96f3d;
  --color-leaf: #3e7c59;
  --color-ink: #1a1a1a;
  --color-terracotta-light: #d4885a;
  --color-terracotta-dark: #a85a2e;
  --color-leaf-light: #4e9b6f;
  --color-leaf-dark: #2d5c42;
  --color-cream-warm: #f5ede0;
  --color-espresso-light: #3d2e25;
  --nav-height: 88px;
  --radius-card: 1rem;
  --radius-button: 0.75rem;
}

html {
  scroll-behavior: smooth;
}

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

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Receipt divider ───────────────────────────────────── */
.receipt-edge {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='12' viewBox='0 0 24 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12 L12 0 L24 12' fill='%23FAF6EF'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 12px;
}

/* ── WhatsApp pulse ────────────────────────────────────── */
@keyframes whatsapp-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
}

.whatsapp-pulse {
  animation: whatsapp-pulse 8s ease-in-out infinite;
}