/* ===========================================================================
   WhatsGood — Typography tokens
   Display: heavy geometric grotesque (loud, all-caps, often with CMYK glitch).
   Body/UI: friendly neutral grotesque, bold-leaning.
   ===========================================================================*/

:root {
  /* --- Families -------------------------------------------------------- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif; /* wordmark, hero */
  --font-heading: 'Archivo', system-ui, sans-serif;                  /* section titles */
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;           /* UI + copy      */

  /* --- Weights --------------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* --- Type scale (px) ------------------------------------------------- */
  --text-3xs:  11px;   /* micro labels                  */
  --text-2xs:  12px;   /* eyebrow / pin caption         */
  --text-xs:   13px;   /* small meta                    */
  --text-sm:   15px;   /* secondary body                */
  --text-base: 17px;   /* default body (iOS rhythm)     */
  --text-md:   19px;   /* card subtitle                 */
  --text-lg:   22px;   /* button / list title           */
  --text-xl:   26px;   /* card title                    */
  --text-2xl:  32px;   /* screen heading                */
  --text-3xl:  40px;   /* section header                */
  --text-4xl:  56px;   /* hero / wordmark               */
  --text-5xl:  76px;   /* oversized display             */

  /* --- Line heights ---------------------------------------------------- */
  --leading-tight:  1.05;   /* display / wordmark        */
  --leading-snug:   1.18;   /* headings                  */
  --leading-normal: 1.4;    /* body                      */
  --leading-relaxed:1.55;   /* long-form copy            */

  /* --- Tracking -------------------------------------------------------- */
  --tracking-tight:  -0.02em;  /* large display           */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* all-caps section labels */
  --tracking-wider:  0.10em;   /* eyebrows / "DYNAMIC STEREO" */

  /* ======================================================================
     SEMANTIC TYPE ROLES  (font / weight / size / leading / tracking)
     ======================================================================*/
  --type-wordmark:   var(--weight-black) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-hero:       var(--weight-black) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-screen:     var(--weight-extra) var(--text-2xl)/var(--leading-snug) var(--font-heading);
  --type-section:    var(--weight-black) var(--text-3xl)/var(--leading-snug) var(--font-heading);
  --type-card-title: var(--weight-bold)  var(--text-xl)/var(--leading-snug) var(--font-body);
  --type-button:     var(--weight-bold)  var(--text-lg)/1 var(--font-body);
  --type-body:       var(--weight-medium) var(--text-base)/var(--leading-relaxed) var(--font-body);
  --type-meta:       var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-eyebrow:    var(--weight-extra) var(--text-2xs)/1 var(--font-body);
}