/* ==========================================================================
   CAFÉ LEYVA — Custom stylesheet (works alongside Tailwind utility classes)
   Design tokens are declared as CSS variables so dark mode + roast gauge
   can reference the same palette.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #F9FAF8;           /* crisp fresh off-white */
  --bg-alt: #F0F4F1;       /* light tint of green-gray, very clean */
  --ink: #111C15;          /* near-black forest ink */
  --ink-soft: #3A4D40;     /* softened forest slate body text */
  --amber: #059669;        /* emerald green branding primary */
  --amber-deep: #047857;   /* darker emerald hover state */
  --cherry: #DC2626;       /* vibrant red for promos/urgency */
  --leaf: #2563EB;         /* fresh secondary accent (organic/dairy/blue) */
  --cream-ink: #F0F4F1;    /* text on dark */
  --border: rgba(17,28,21,0.08);
}

.dark {
  --bg: #0E1511;           /* very dark forest background */
  --bg-alt: #15221B;       /* slightly lighter forest card background */
  --ink: #E6F0EA;          /* crisp light mint-white text */
  --ink-soft: #94B09F;     /* softened green-slate body text */
  --amber: #34D399;        /* bright emerald accent */
  --amber-deep: #6EE7B7;   /* pressed/hover state */
  --cherry: #F87171;       /* bright coral/red for promos */
  --leaf: #60A5FA;         /* light blue accent */
  --border: rgba(230,240,234,0.08);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  transition: background-color .35s ease, color .35s ease;
}

.font-display { font-family: 'Fraunces', serif; font-optical-sizing: auto; }
.font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* -------------------------------------------------------------------------
   Signature element: the Basket Gauge — a vertical strip showing scroll progress.
   An animated shopping basket slides down the track and fills it with
   our emerald brand gradient.
   ------------------------------------------------------------------------- */
.basket-gauge {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 44px;
  z-index: 40;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .basket-gauge { display: flex; }
}
.basket-gauge__track {
  position: relative;
  width: 6px;
  height: 60vh;
  border-radius: 999px;
  background: var(--border);
  opacity: 0.8;
}
.basket-gauge__fill {
  position: absolute;
  top: 0; left: 0; width: 100%;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--amber) 0%, var(--amber-deep) 100%);
  transition: height .15s linear;
}
.basket-gauge__icon {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15), 0 0 0 3px var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top .15s linear;
}

/* Menu ticket cards ------------------------------------------------------ */
.ticket-card {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.ticket-card::before { left: -8px; }
.ticket-card::after { right: -8px; }
.ticket-perforation {
  border-left: 1.5px dashed var(--border);
}

/* Fade/scale-in utility for reveal-on-scroll ----------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Modal carousel ---------------------------------------------------------- */
.carousel-track {
  display: flex;
  transition: transform .4s cubic-bezier(.65,.05,.36,1);
}
.carousel-slide {
  flex: 0 0 100%;
}

/* Product image fallback pattern (used until real photos are dropped in) */
.img-placeholder {
  background:
    repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 10px, var(--border) 10px, var(--border) 11px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}

/* Scrollbar-less category filter row -------------------------------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Focus visibility --------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}