/* Egg & Bunz — Typography tokens
   TWO-FONT SYSTEM:
   - Baloo 2 (display): soft, puffy, rounded — echoes the logotype's bubble
     lettering. Headlines, menu names, signage, packaging, buttons, chips, prices.
   - Montserrat (body): clean geometric workhorse. Descriptions, captions, labels,
     long copy, UI meta.
   - Chewy (accent): pure bubble lettering — SPOT USE ONLY (a hero word, a sticker,
     a social overlay). Never body, menus, or as a stand-in for the real logo.
   Free display alternates if Baloo 2 is unavailable: Fredoka, Grandstander. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Chewy&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

:root {
  /* ---- Families ---- */
  --font-display: 'Baloo 2', 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Chewy', 'Baloo 2', cursive; /* spot accents only */

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-display-xl: 4.5rem;  /* 72 — hero signage */
  --fs-display-lg: 3.5rem;  /* 56 */
  --fs-display-md: 2.75rem; /* 44 — section headers */
  --fs-h1: 2.25rem;  /* 36 */
  --fs-h2: 1.75rem;  /* 28 — menu item names */
  --fs-h3: 1.375rem; /* 22 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 — descriptions */
  --fs-body-sm: 0.875rem; /* 14 — captions */
  --fs-price:   1.25rem;  /* 20 — prices */
  --fs-label:   0.75rem;  /* 12 — eyebrow / tag labels */

  /* ---- Line heights ---- */
  --lh-tight:   1.02; /* @kind font */
  --lh-snug:    1.15; /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-body:    0;        /* @kind font */
  --ls-label:   0.14em;   /* @kind font */

  /* ---- Semantic roles ---- */
  --type-hero-weight: var(--fw-extra);      /* @kind font */
  --type-heading-weight: var(--fw-bold);    /* @kind font */
  --type-body-weight: var(--fw-regular);    /* @kind font */
  --type-emphasis-weight: var(--fw-semibold);/* @kind font */
}