/* ============================================================
   Valley Feast — Antilles Hearth design tokens
   Shared by the public site and the admin studio.
   ============================================================ */

@font-face { font-family: 'YoungSerif-Fallback'; src: local('Georgia'); size-adjust: 108%; ascent-override: 92%; }
@font-face { font-family: 'Karla-Fallback'; src: local('Arial'); size-adjust: 99%; }

:root {
  /* ---- Color · matched to the Valley Feast logo ---- */
  --green-ink:   oklch(25% 0.048 152);   /* deepest forest — headers, footer */
  --green-deep:  oklch(36% 0.062 151);   /* the logo green — primary surfaces */
  --green-mid:   oklch(46% 0.07 151);    /* hover, secondary emphasis */
  --green-soft:  oklch(88% 0.035 150);   /* tinted containers */
  --green-mist:  oklch(94% 0.018 148);   /* palest green wash */

  --cream:       oklch(97.5% 0.009 95);  /* page background — warm parchment */
  --cream-deep:  oklch(94.5% 0.014 92);  /* raised paper */
  --cream-card:  oklch(99% 0.006 95);    /* lightest card */

  --ink:         oklch(25% 0.02 150);    /* body text — green-tinted charcoal */
  --ink-soft:    oklch(45% 0.02 150);    /* secondary text */
  --ink-faint:   oklch(62% 0.015 148);   /* metadata, captions */

  --spice:       oklch(69% 0.155 52);    /* burnt orange — the accent. use sparingly */
  --spice-deep:  oklch(56% 0.14 45);
  --spice-wash:  oklch(94% 0.035 70);    /* chip backgrounds */
  --gold:        oklch(82% 0.115 85);
  --gold-wash:   oklch(95% 0.04 95);

  --on-green:       oklch(93% 0.022 100); /* the logo cream, on deep green */
  --on-green-soft:  oklch(82% 0.032 120);

  --line:        oklch(85% 0.015 140);   /* hairlines */
  --line-green:  oklch(30% 0.055 153 / .18); /* ledger rules */

  /* ---- Type ---- */
  --font-display: 'Young Serif', 'YoungSerif-Fallback', Georgia, serif;
  --font-body: 'Karla', 'Karla-Fallback', 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.333rem;
  --text-xl: 1.777rem;
  --text-2xl: clamp(2rem, 1.45rem + 2.2vw, 3.16rem);
  --text-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.4rem);

  /* ---- Space · 4pt scale ---- */
  --sp-2xs: 4px;  --sp-xs: 8px;   --sp-sm: 12px;  --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px;  --sp-2xl: 48px; --sp-3xl: 64px;
  --sp-4xl: 96px; --sp-5xl: 128px;
  --section-gap: clamp(72px, 6vw + 40px, 128px);
  --gutter: clamp(20px, 4vw, 48px);

  /* ---- Shape ---- */
  --r-sm: 4px;      /* buttons — “hand-trimmed” */
  --r-md: 8px;      /* images, cards */
  --r-lg: 14px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);      /* quart */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --t-slow: 520ms;

  /* ---- Elevation · soft & long, barely-there ---- */
  --shadow-sm: 0 1px 2px oklch(25% 0.03 150 / .06), 0 4px 14px oklch(25% 0.03 150 / .05);
  --shadow-md: 0 2px 4px oklch(25% 0.03 150 / .07), 0 14px 34px oklch(25% 0.03 150 / .09);
  --shadow-lg: 0 4px 8px oklch(25% 0.03 150 / .08), 0 28px 60px oklch(25% 0.03 150 / .13);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--spice); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--green-deep); color: var(--on-green); }

/* ============ Shared primitives ============ */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spice-deep);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 14px 26px;
  border: 0; border-radius: var(--r-sm);
  background: var(--green-deep); color: var(--on-green);
  font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--green-mid); }
.btn:active { transform: scale(0.98); }

.btn--spice { background: var(--spice-deep); color: oklch(98% 0.01 80); }
.btn--spice:hover { background: var(--spice); }

.btn--ghost {
  background: transparent; color: var(--green-deep);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--ghost:hover { background: var(--green-mist); }

.btn--on-dark { background: var(--cream); color: var(--green-ink); }
.btn--on-dark:hover { background: var(--gold-wash); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em;
}
.chip--veg     { background: var(--green-mist); color: var(--green-mid); }
.chip--spicy   { background: var(--spice-wash); color: var(--spice-deep); }
.chip--seafood { background: oklch(94% 0.025 230); color: oklch(48% 0.08 230); }
.chip--popular { background: var(--gold-wash); color: oklch(52% 0.1 75); }

/* ============ Reveal-on-scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition-duration: 1ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}