/* ============================================================
   WCGB · Typography Tokens

   PRIMARY WEBSITE PAIR (use everywhere consumer-facing):
     Headlines  → Good Vibrations Script (Great Vibes proxy) — --font-script
     Body copy  → Dosis Bold 700, ALL CAPS — --font-dosis

   SECONDARY / INTERNAL PAIR (brand guide, admin UI, fine prose):
     Display    → Playfair Display — --font-serif
     UI body    → IBM Plex Sans — --font-sans
     Labels     → IBM Plex Mono — --font-mono

   Print catalog body: Open Sans 400 — --font-open-sans
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-script:    'Great Vibes', cursive;                   /* PRIMARY headline — Good Vibrations Script proxy */
  --font-dosis:     'Dosis', 'Trebuchet MS', sans-serif;      /* PRIMARY body — Dosis Bold ALL CAPS */
  --font-open-sans: 'Open Sans', Arial, sans-serif;           /* Print / catalog body */
  --font-serif:     'Playfair Display', Georgia, serif;       /* Internal / brand-guide display */
  --font-sans:      'IBM Plex Sans', system-ui, sans-serif;   /* Internal UI prose */
  --font-mono:      'IBM Plex Mono', ui-monospace, monospace; /* Labels, kickers, metadata */

  /* ── Semantic aliases ── */
  --font-headline:  var(--font-script);  /* Consumer-facing headline: Good Vibrations Script */
  --font-body:      var(--font-dosis);   /* Consumer-facing body: Dosis Bold ALL CAPS */
  --font-display:   var(--font-serif);   /* Internal display (brand guide, admin) */
  --font-heading:   var(--font-serif);   /* Internal block titles */
  --font-label:     var(--font-mono);    /* Kickers, section numbers, metadata */

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

  /* ---- Scale — website (px) ---- */
  --fs-headline:   56px;   /* Script — hero / page headlines */
  --fs-subhead:    32px;   /* Script — sub-headlines */
  --fs-body-web:   18px;   /* Dosis Bold ALL CAPS — web body */
  --fs-body-sm:    14px;   /* Dosis Bold ALL CAPS — small body / captions */
  --fs-label:      10px;   /* Mono — kickers, labels */
  --fs-meta:       11px;   /* Mono — metadata, badges */

  /* ---- Scale — internal / brand guide ---- */
  --fs-display:    72px;   /* Playfair 900 */
  --fs-section:    48px;   /* Playfair 900 */
  --fs-title:      28px;   /* Playfair 700 */
  --fs-subtitle:   22px;   /* Playfair italic */
  --fs-body:       15px;   /* IBM Plex Sans */
  --fs-sm:         13px;   /* IBM Plex Sans small */

  /* ---- Line heights ---- */
  --lh-display:  0.95; /* @kind font */
  --lh-tight:    1.1;  /* @kind font */
  --lh-heading:  1.2;  /* @kind font */
  --lh-snug:     1.4;  /* @kind font */
  --lh-body:     1.65; /* @kind font */
  --lh-relaxed:  1.75; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-headline: 0;       /* @kind font */ /* Script headlines: no extra tracking */
  --ls-caps:     0.12em;  /* @kind font */ /* Dosis ALL CAPS body */
  --ls-label:    0.15em;  /* @kind font */ /* Mono labels */
  --ls-meta:     0.08em;  /* @kind font */ /* Mono metadata */
  --ls-cta:      0.06em;  /* @kind font */ /* Button labels (Dosis) */
  --ls-tight:   -0.01em;  /* @kind font */ /* Playfair display tight */
}