/* ──────────────────────────────────────────────────────────────
   tokens.css — The Haven at Hickory Stick
   Palette + type pulled directly from the source PDF menu:
     • Bebas Neue (item names, descriptions, prices)
     • Montserrat (section titles + wordmark)
     • copper  #A3674F  (names / prices / accents)
     • charcoal #383738 (headings / body copy)
     • white   #FFFFFF  (page)
   Edit values here to retheme the entire site.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Color tokens ─────────────────────────────────────────── */
  --color-copper:         #A3674F;
  --color-charcoal:       #383738;

  --color-primary:        #A3674F;   /* copper — names, prices, accents */
  --color-secondary:      #A3674F;
  --color-tertiary:       #A3674F;
  --color-header-bg:      #ffffff;   /* white header */
  --color-page-bg:        #ffffff;   /* white page */
  --color-card-bg:        #ffffff;
  --color-text:           #383738;   /* charcoal body text */
  --color-text-muted:     #6f6e6c;   /* lighter charcoal for fine print */
  --color-text-on-primary:#ffffff;
  --color-text-on-header: #383738;
  --color-divider:        rgba(56, 55, 56, 0.16);
  --color-rule:           rgba(163, 103, 79, 0.45);  /* copper hairline */
  --color-shadow:         rgba(56, 55, 56, 0.12);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display:   'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; /* condensed caps */
  --font-heading:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;  /* section titles */
  --font-primary:   var(--font-display);
  --font-secondary: var(--font-heading);

  --fs-base:   16px;
  --fs-h2:     clamp(1.25rem, 1.1vw + 0.9rem, 1.5rem);  /* section titles */
  --fs-item:   1.45rem;   /* item name (Bebas is tall/condensed) */
  --fs-price:  1.45rem;   /* matches item name */
  --fs-desc:   1.05rem;   /* description (Bebas, charcoal) */
  --fs-sub:    0.95rem;   /* varietal / fine print */
  --fs-tab:    0.82rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  --lh-tight: 1.05;
  --lh-body:  1.15;

  /* ── Spacing scale (4-px base) ────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max: 1180px;
  --header-height: 64px;
  --header-height-md: 80px;
  --tabs-height: 52px;

  /* ── Radii / shadows ──────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-pill: 999px;
  --shadow-sticky:  0 1px 0 var(--color-divider), 0 4px 14px rgba(56, 55, 56, 0.06);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:  120ms;
  --duration-base:  220ms;

  /* ── Breakpoints (informational) ──────────────────────────── */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* ── Brand assets ─────────────────────────────────────────── */
  --image-favicon:  url('../assets/favicon.png');
}