/* ============================================================
   PODIUM SOCIETY — TYPOGRAPHY
   Two typefaces. No third font, ever.
     • Bebas Neue — every headline, subhead, relationship line,
       CTA. ALL CAPS. Tight leading. Big.
     • Montserrat — footers, kickers, captions, body, metadata.
       Locked template positions use ALL CAPS + wide tracking.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Bebas Neue', 'Anton', 'Oswald', Impact, sans-serif;
  --font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    var(--font-ui);

  /* ---- Display scale (Bebas Neue · ALL CAPS · line-height ~0.92) ----
     Bebas is a tall condensed cap face; leading runs tight. */
  --display-hero:  clamp(64px, 11vw, 168px); /* @kind font */
  --display-xxl:   96px;
  --display-xl:    72px;
  --display-lg:    56px;
  --display-md:    42px;
  --display-sm:    32px;
  --display-xs:    24px;

  --leading-display: 0.92; /* @kind font */
  --tracking-display: 0.01em; /* @kind font */

  /* ---- Utility / Montserrat scale ---- */
  --ui-xl:   22px;
  --ui-lg:   18px;
  --ui-md:   16px;
  --ui-sm:   14px;
  --ui-xs:   12px;
  --ui-xxs:  10.5px;  /* fine print / footnotes */

  --leading-ui:   1.5;   /* @kind font */
  --leading-tight: 1.2;  /* @kind font */

  /* Tracking — Montserrat in locked positions is wide & ALL CAPS */
  --tracking-caps:   0.22em;  /* @kind font */
  --tracking-kicker: 0.34em;  /* @kind font */
  --tracking-wide:   0.08em;  /* @kind font */
  --tracking-normal: 0;       /* @kind font */

  /* ---- Weights ---- */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semibold:600; /* @kind font */
  --w-bold:    700; /* @kind font */

  /* ---- Semantic roles ---- */
  --role-headline:      var(--font-display);
  --role-subhead:       var(--font-display);
  --role-relationship:  var(--font-display); /* gold line in Pull Up template */
  --role-cta:           var(--font-display);
  --role-footer:        var(--font-ui);
  --role-caption:       var(--font-ui);
  --role-body:          var(--font-ui);
}
