/**
 * Roots Bar & Kitchen — design tokens (from Figma mobile menu)
 * Use in WordPress theme: @import or enqueue as roots-tokens.css
 */
:root {
  /* Backgrounds */
  --roots-bg-page: #e8e7df;
  --roots-bg-warm: #f2eee3;
  --roots-bg-overlay: #dcdbce;
  --roots-bg-footer: #e5e5e2;

  /* Surfaces */
  --roots-surface-card: #e6e2d3;
  --roots-surface-placeholder: #d9d9d9;

  /* Text */
  --roots-text-primary: #110202;
  --roots-text-body: #000000;

  /* Category / section accents */
  --roots-accent-tap: #ded5ad;
  --roots-accent-cocktails: #ba8b7a;
  --roots-accent-bottles: #af9379;
  --roots-accent-chasers: #c4cfae;
  --roots-accent-snack: #dea17f;
  --roots-accent-sweet: #99b5b6;
  --roots-accent-cigarettes: #abb7a6;

  /* Spacing */
  --roots-space-4: 4px;
  --roots-space-8: 8px;
  --roots-space-12: 12px;
  --roots-space-16: 16px;
  --roots-space-24: 24px;
  --roots-space-32: 32px;

  /* Radius */
  --roots-radius-sm: 5px;
  --roots-radius-md: 7px;
  --roots-radius-lg: 14px;
  --roots-radius-xl: 20px;
  --roots-radius-card: 20px;
  --roots-radius-card-image: 30px;
  --roots-radius-pill: 999px;
  --roots-radius-hero-desktop: 48px;

  /* Typography */
  --roots-font-family: "Noto Sans Hebrew", sans-serif;
  --roots-font-section: 900 16px/1.2 var(--roots-font-family);
  --roots-font-subtitle: 600 14px/1.4 var(--roots-font-family);
  --roots-font-body: 400 14px/1.4 var(--roots-font-family);
  --roots-font-chip: 800 16px/1 var(--roots-font-family);

  /* Layout (Figma mobile node 25:0) */
  --roots-chip-width: 105px;
  --roots-chip-height: 30px;
  --roots-card-image-width: 32%;
  --roots-card-image-min: 108px;
  --roots-card-image-max: 140px;
  --roots-content-max: 1200px;
  --roots-grid-gap: var(--roots-space-24);
  --roots-scroll-offset: 68px;

  /* Hero overlay — fluid between mobile (375) and desktop (1200+) */
  --roots-hero-logo-w: clamp(96px, 22vw + 1rem, 220px);
  --roots-hero-logo-h: clamp(40px, 6.5vw + 0.5rem, 96px);
  --roots-hero-tagline-w: clamp(76px, 17vw + 0.75rem, 168px);
  --roots-hero-tagline-h: clamp(13px, 2.4vw + 0.25rem, 34px);
  --roots-hero-rule-w: clamp(64px, 14vw, 140px);
  --roots-hero-overlay-pad: clamp(12px, 2.5vw, 24px);
  --roots-hero-overlay-gap: clamp(4px, 0.8vw, 8px);
}