/* ==================================================================
   MYSTORiQ · TYPOGRAPHY TOKENS
   Display = chunky rounded (wordmark energy) · Body = warm & readable
   ================================================================== */

:root {
  /* ---- FAMILIES -------------------------------------------------- */
  --font-display: 'Grandstander', 'Baloo 2', system-ui, sans-serif;  /* titles, wordmark-adjacent */
  --font-heading: 'Grandstander', 'Fredoka', system-ui, sans-serif;  /* section heads, UI */
  --font-body:    'Grandstander', system-ui, -apple-system, sans-serif;    /* long-form copy */

  /* ---- WEIGHTS --------------------------------------------------- */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */

  /* ---- TYPE SCALE (fluid-ready, rem base 16px) ------------------- */
  --fs-display-xl: 5.25rem;   /* 84px · hero wordmark / cover */
  --fs-display-lg: 3.75rem;   /* 60px · page title */
  --fs-display-md: 2.75rem;   /* 44px · section title */
  --fs-h1:         2.25rem;   /* 36px */
  --fs-h2:         1.75rem;   /* 28px */
  --fs-h3:         1.375rem;  /* 22px */
  --fs-h4:         1.125rem;  /* 18px */
  --fs-body-lg:    1.1875rem; /* 19px · lead paragraphs */
  --fs-body:       1rem;      /* 16px · default body */
  --fs-body-sm:    0.875rem;  /* 14px */
  --fs-caption:    0.75rem;   /* 12px · labels / meta */

  /* ---- LINE HEIGHTS --------------------------------------------- */
  --lh-tight:   1.05;   /* @kind other */
  --lh-snug:    1.2;    /* @kind other */
  --lh-normal:  1.4;    /* @kind other */
  --lh-relaxed: 1.65;   /* @kind other */

  /* ---- LETTER SPACING ------------------------------------------- */
  --ls-tight:  -0.01em; /* @kind other */
  --ls-normal: 0;        /* @kind other */
  --ls-wide:   0.04em;   /* @kind other */
  --ls-caps:   0.12em;   /* ALL-CAPS academy / eyebrow labels @kind other */

  /* ---- SEMANTIC ROLES ------------------------------------------- */
  --type-hero:    var(--fw-black) var(--fs-display-xl)/var(--lh-tight) var(--font-display); /* @kind other */
  --type-title:   var(--fw-bold)  var(--fs-display-md)/var(--lh-snug)  var(--font-display); /* @kind other */
  --type-heading: var(--fw-semibold) var(--fs-h2)/var(--lh-snug)       var(--font-heading); /* @kind other */
  --type-body:    var(--fw-regular) var(--fs-body)/var(--lh-relaxed)   var(--font-body); /* @kind other */
  /* --type-lead pairs with the .mq-lead utility for ALL-CAPS lead paragraphs */
  --type-lead:    var(--fw-bold) var(--fs-body-lg)/var(--lh-snug) var(--font-heading); /* @kind other */
}