/* ============================================================
   MUNCHIO — TYPOGRAPHY TOKENS
   Three voices: LOUD (display billboard caps), INFORMATIVE
   (geometric sans body), CASUAL (handwritten sticker accents).
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display:  "Anton", "Arial Narrow", sans-serif;        /* loud: compressed caps */
  --font-cartoon:  "Sigmar One", "Anton", sans-serif;          /* whimsical 70s hero alt */
  --font-body:     "Space Grotesk", "Helvetica Neue", Arial, sans-serif; /* informative */
  --font-script:   "Pacifico", "Brush Script MT", cursive;     /* casual handwritten */

  /* --- Display scale (billboard headings, all-caps) --- */
  --fs-display-xl: clamp(64px, 11vw, 168px); /* @kind font */
  --fs-display-l:  clamp(48px, 8vw, 104px);  /* @kind font */
  --fs-display-m:  clamp(36px, 5.5vw, 68px); /* @kind font */
  --fs-display-s:  clamp(28px, 4vw, 44px);   /* @kind font */

  /* --- Heading + body scale --- */
  --fs-h1:   40px;
  --fs-h2:   30px;
  --fs-h3:   22px;
  --fs-lead: 20px;   /* intro / lead paragraphs */
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;   /* labels, eyebrows */

  /* --- Weights --- */
  --fw-reg:   400; /* @kind font */
  --fw-med:   500; /* @kind font */
  --fw-semi:  600; /* @kind font */
  --fw-bold:  700; /* @kind font */

  /* --- Line heights --- */
  --lh-display: 0.86;  /* @kind font */
  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.25;  /* @kind font */
  --lh-body:    1.55;  /* @kind font */

  /* --- Tracking --- */
  --ls-display:  -0.01em;  /* @kind font */
  --ls-body:      0;       /* @kind font */
  --ls-eyebrow:   0.22em;  /* @kind font */
  --ls-button:    0.06em;  /* @kind font */

  /* --- Display drop-shadow (heavy offset black, comic-book) --- */
  --display-shadow:    4px 4px 0 var(--ink);
  --display-shadow-lg: 7px 7px 0 var(--ink);
}

/* ---- Reusable type helpers (consumers may use these classes) ---- */
.m-display {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-body);
}
.m-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--fs-xs);
}
.m-script {
  font-family: var(--font-script);
  font-weight: var(--fw-reg);
}
.m-body {
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  line-height: var(--lh-body);
  color: var(--text-body);
}