:root {
  --cream: #FDF6E3;
  --masa: #F4E4BC;
  --salsa-roja: #C73E1D;
  --salsa-verde: #6B8E23;
  --avocado: #87A96B;
  --charcoal: #2B2118;
  --terracotta: #B85C38;
  --mustard: #E8B04B;
}

html, body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* Paper grain — SVG turbulence as a data-uri overlay. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main, header, .panel, .card { position: relative; z-index: 1; }

.font-display {
  font-family: 'Bagel Fat One', 'Rye', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* Tilt utilities — every Nth card gets one via :nth-child in markup. */
.tilt-1 { transform: rotate(-1deg); }
.tilt-2 { transform: rotate(1deg); }
.tilt-3 { transform: rotate(-0.5deg); }

/* Sticker buttons: hard offset shadow, presses on hover. */
.sticker {
  background: var(--salsa-roja);
  color: var(--cream);
  border: 2px solid var(--charcoal);
  border-radius: 14px;
  box-shadow: 4px 4px 0 0 var(--charcoal);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.15s;
  font-weight: 600;
}
.sticker:hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--charcoal);
}
.sticker:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--charcoal);
}
.sticker:disabled {
  background: #c8b89c;
  color: #6e624c;
  cursor: not-allowed;
  box-shadow: 4px 4px 0 0 #6e624c;
}
.sticker-verde { background: var(--salsa-verde); }
.sticker-mustard { background: var(--mustard); color: var(--charcoal); }
.sticker-cream { background: var(--cream); color: var(--charcoal); }

/* Generic card. */
.card {
  background: var(--masa);
  border: 2px solid var(--charcoal);
  border-radius: 14px;
  box-shadow: 5px 5px 0 0 var(--charcoal);
}

/* Menu item card. */
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  background: var(--cream);
  border: 2px solid var(--charcoal);
  border-radius: 14px;
  box-shadow: 4px 4px 0 0 var(--charcoal);
  opacity: 0;
  transform: translateY(8px);
  animation: stagger-in 0.45s ease-out forwards;
}
.menu-item:nth-child(3n) { transform: translateY(8px) rotate(-1deg); animation-name: stagger-in-tilt-l; }
.menu-item:nth-child(4n) { transform: translateY(8px) rotate(1deg);  animation-name: stagger-in-tilt-r; }

@keyframes stagger-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stagger-in-tilt-l {
  to { opacity: 1; transform: translateY(0) rotate(-1deg); }
}
@keyframes stagger-in-tilt-r {
  to { opacity: 1; transform: translateY(0) rotate(1deg); }
}

.qty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--mustard);
  color: var(--charcoal);
  border: 2px solid var(--charcoal);
  font-weight: 700;
  animation: pop 0.18s ease-out;
}
@keyframes pop {
  0% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

.add-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 2px solid var(--charcoal);
  background: var(--salsa-roja);
  color: var(--cream);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 3px 3px 0 0 var(--charcoal);
  transition: transform 0.08s, box-shadow 0.08s;
}
.add-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--charcoal);
}

/* Inputs. */
.input, textarea.input {
  width: 100%;
  background: var(--cream);
  border: 2px solid var(--charcoal);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--charcoal);
  box-shadow: 3px 3px 0 0 var(--charcoal);
}
.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--salsa-roja);
}

.category-label {
  font-family: 'Bagel Fat One', system-ui, sans-serif;
  color: var(--salsa-roja);
  font-size: 1.4rem;
  margin: 1.1rem 0 0.6rem;
}

.banner-locked {
  background: var(--salsa-roja);
  color: var(--cream);
  border: 2px solid var(--charcoal);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-weight: 600;
  box-shadow: 4px 4px 0 0 var(--charcoal);
}

/* Sticky bottom summary on mobile. */
.summary-bar {
  position: sticky;
  bottom: 0;
  background: var(--masa);
  border-top: 2px solid var(--charcoal);
  padding: 0.75rem 1rem;
  box-shadow: 0 -4px 0 0 var(--charcoal);
}

/* Tortilla spinner. */
.tortilla {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Live feed item highlight glow. */
.feed-new {
  animation: glow 1.4s ease-out;
}
@keyframes glow {
  0%   { background: var(--mustard); }
  100% { background: var(--cream); }
}

/* Wobble for the wordmark. */
.wobble {
  display: inline-block;
  animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* Success card slide-in. */
.slide-up {
  animation: slide-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}