/* ==========================================================================
   Graham's Kitchen — Design Tokens
   Source: Brand Decisions.md (June 2026) — non-negotiable system.
   Warm Stone + Antique Brass · Jost + Lato · Cormorant (logo only)
   Framer mapping: each token below = one Framer colour/text style.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Colour roles — Surfaces
     -------------------------------------------------------------------- */
  --color-white:      #FFFFFF; /* card surfaces, clean content panels */
  --color-cream:      #F7F3EC; /* page background */
  --color-ivory:      #F5F0E8; /* button text on brass, alt section fills */
  --color-stone:      #EDE6DC; /* hero + feature section backgrounds */
  --color-sand:       #D8C7A5; /* borders, dividers, on-dark accent */

  /* Accents */
  --color-brass-pale: #A89470; /* decorative numerals, tints — never text */
  --color-brass:      #8A7355; /* primary accent: CTAs, overlines, active nav, links */
  --color-brass-deep: #6B5A40; /* hover/pressed; small-text links on light */
  --color-burgundy:   #822129; /* tasting menu + seasonal highlights ONLY */

  /* Text */
  --color-text:       #1C1C1C; /* headings, primary body, nav */
  --color-text-soft:  #5A5A5A; /* secondary copy */
  --color-text-mist:  #9A9A9A; /* captions, metadata — never body */

  /* Semantic aliases */
  --bg-page:          var(--color-cream);
  --bg-feature:       var(--color-stone);
  --bg-dark:          var(--color-text);
  --border-soft:      var(--color-sand);

  /* --------------------------------------------------------------------
     Typography — Brand Decisions §5–6 (approved scale)
     Jost: display/headings/pull quotes/menu prices (100–400, italic ok)
     Lato: nav/body/buttons/UI (300–400 only, no italic)
     Cormorant italic 300: nav logo only, 24–28px
     -------------------------------------------------------------------- */
  --font-display: 'Jost', sans-serif;
  --font-body:    'Lato', sans-serif;
  --font-logo:    'Cormorant', serif;

  /* Type scale (desktop targets per Brand Decisions §6; clamped for mobile) */
  --text-hero:     clamp(2.75rem, 8vw, 6rem);      /* Hero H1 80–96px, Jost 300 italic, LH .92–.95 */
  --text-h2:       clamp(2.25rem, 5vw, 4rem);      /* Section H2 52–64px, Jost 300, LH 1.05 */
  --text-h3:       clamp(1.75rem, 3.5vw, 2.75rem); /* Sub-heading H3 36–44px, Jost 300 italic, LH 1.15 */
  --text-card:     1.25rem;                        /* Card heading, Lato 400, 18–22px */
  --text-body:     1.0625rem;                      /* Body, Lato 300, 16–18px, LH 1.70 */
  --text-nav:      0.875rem;                       /* Nav, Lato 400, 13–15px, caps */
  --text-button:   0.875rem;                       /* CTA, Lato 300, 13–14px, caps */
  --text-overline: 0.875rem;                       /* Overline, Lato 300, 14px (Sean, 6 Aug 2026 — was 11–13px), caps, brass */
  --text-caption:  0.8125rem;                      /* Caption, Lato 300, 12–13px, Mist */
  --text-price:    1.375rem;                       /* Menu prices, Jost */

  --lh-hero: 0.94;
  --lh-h2:   1.05;
  --lh-h3:   1.15;
  --lh-body: 1.70;

  --track-hero:     -0.01em;
  --track-overline: 0.26em;
  --track-nav:      0.16em;
  --track-button:   0.12em;

  --measure: 68ch; /* max body line length */

  /* --------------------------------------------------------------------
     Spacing — 8px base unit (Brand Decisions §9)
     -------------------------------------------------------------------- */
  --space-1:  4px;   /* icon gap */
  --space-2:  8px;   /* tight gap */
  --space-3:  16px;  /* label gap */
  --space-4:  24px;  /* card padding / mobile margin */
  --space-5:  32px;  /* card gap */
  --space-6:  48px;  /* section gap */
  --space-7:  64px;  /* large gap */
  --space-8:  80px;  /* section padding */
  --space-9:  120px; /* page margin (desktop) */
  --space-10: 160px; /* hero padding */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;   /* single-column reading / menu frame */
  --margin-desktop: 80px;      /* 80–120px range */
  --margin-mobile: 24px;
  --section-pad: var(--space-8);

  /* Components */
  --radius-button: 2px;        /* never pill */
  --nav-height: 88px;
  --transition-nav: opacity 200ms ease, background-color 200ms ease, color 200ms ease;
  --transition-hover: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}