/* ============================================================
   typography.css — single source of truth for EVERY font size.

   Want text bigger or smaller? Change ONE value in :root below
   and it updates everywhere that role is used across the page.
   Mobile (<=640px) sizes are the overrides in the @media block
   at the bottom — also a single place per role.

   Roles:
     hero            hero <h1>
     section-title   the <h2> title at the top of every section
     subtitle        card / row / playlist <h3> titles
     lead / body     paragraph copy
     eyebrow/tag/meta small labels and captions
   ============================================================ */
:root {
  /* Headings ------------------------------------------------ */
  --fs-hero:          64px; /* hero <h1>                         */
  --fs-section-title: 45px; /* every section's <h2> title        */
  --fs-subtitle:      24px; /* card / row / playlist <h3> titles */

  /* Body & supporting text --------------------------------- */
  --fs-lead:     16px; /* intro line under a section title */
  --fs-body:     15px; /* general paragraph copy           */
  --fs-fq-range: 20px; /* frequency range value            */
  --fs-eyebrow:  14px; /* uppercase label above a title    */
  --fs-tag:      12px; /* playlist tag                     */
  --fs-meta:     11px; /* timestamps / small captions      */
  --fs-check:    16px; /* setup-checklist item             */
  --fs-tiny:      8px; /* fine print                       */

  /* Line heights ------------------------------------------- */
  --lh-tight: 1.05;
  --lh-snug:  1.03;
  --lh-body:  1.55;
}

/* Semantic heading classes — put these on section headings so
   every section's title renders identically.                   */
.t-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-snug);
  letter-spacing: -0.045em;
  font-weight: 500;
}
.section-title {
  font-size: var(--fs-section-title);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
}
.subtitle {
  font-size: var(--fs-subtitle);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* Mobile (<=640px) — override just the variables. Every class
   here AND the component classes in index.html read these, so
   the whole page scales down from this one block.               */
@media (max-width: 640px) {
  :root {
    --fs-hero:          30px;
    --fs-section-title: 26px;
    --fs-subtitle:      20px;
    --fs-fq-range:      16px;
    --fs-check:         12px;
  }
}