/* ============================================================================
   Kahf Cafe — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for shared design values. Reference these everywhere
   instead of hardcoding hex codes / pixel values so the site stays consistent.
   Loaded BEFORE custom.css and menu.css.

   Existing brand tokens (do not redefine here) live in custom.css :root:
     --primary-color, --secondary-color, --text-color, --accent-color,
     --accent-secondary-color, --divider-color, --dark-divider-color,
     --error-color, --default-font, --accent-font
   ============================================================================ */

:root {
  /* ----- Accent gold tints (derived from --accent-color #C9A581) ----- */
  --accent-tint-04: rgba(201, 165, 129, 0.04);
  --accent-tint-08: rgba(201, 165, 129, 0.08);
  --accent-tint-12: rgba(201, 165, 129, 0.12);
  --accent-tint-25: rgba(201, 165, 129, 0.25);
  --accent-tint-30: rgba(201, 165, 129, 0.3);
  --accent-tint-90: rgba(201, 165, 129, 0.9);

  /* ----- Surface colors (cards / overlays) ----- */
  --surface-card-bg:           var(--accent-tint-04);
  --surface-card-bg-hover:     var(--accent-tint-08);
  --surface-card-border:       var(--accent-tint-12);
  --surface-card-border-hover: var(--accent-tint-25);
  --surface-divider-dashed:    var(--accent-tint-30);
  --surface-note-bg:           rgba(201, 165, 129, 0.03);

  /* ----- Text colors (extends existing brand) ----- */
  --text-muted:    #888;
  --text-on-card:  #fff;

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

  /* ----- Border radii ----- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* ----- Transitions ----- */
  --transition-fast: 0.25s ease;

  /* ----- Fluid typography (clamp() values for menu cards) ----- */
  --fs-card-title:   clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
  --fs-card-price:   clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  --fs-card-desc:    clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --fs-note:         clamp(0.78rem, 0.72rem + 0.3vw, 0.9rem);

  /* ----- Section heading sizes (responsive) ----- */
  --fs-section-h2-desktop: clamp(34px, 3.5vw + 12px, 44px);
  --fs-section-h2-tablet:  clamp(30px, 4.5vw, 40px);
  --fs-section-h2-mobile:  clamp(26px, 6vw, 34px);
  --fs-section-h2-small:   clamp(24px, 7vw, 32px);

  /* ----- Menu thumbnail sizing ----- */
  --menu-thumb-size: clamp(58px, 14vw, 80px);

  /* ----- Grid breakpoint minimums ----- */
  --menu-card-min-width: 280px;
}