/* Typography — desktop defaults (role-based tokens).
   Spacing scale (--Scale-*) is separate; do not couple sizes here.
   Line-height: 1.2× for headings/intro/caption; 1.5× for body (large + paragraph). */

:root {
  /* Headings */
  --Font-Headings-Hero-text-size: 60px;
  --Font-Headings-Hero-line-height: 72px;

  --Font-Headings-Section-text-size: 32px;
  --Font-Headings-Section-line-height: 38px;

  --Font-Headings-Card-title-text-size: 24px;
  --Font-Headings-Card-title-line-height: 29px;

  --Font-Headings-Contact-title-text-size: 28px;
  --Font-Headings-Contact-title-line-height: 34px;

  /* Body roles */
  --Font-Body-Intro-text-size: 40px;
  --Font-Body-Intro-line-height: 48px;

  --Font-Body-Large-text-size: 20px;
  --Font-Body-Large-line-height: 30px;

  --Font-Body-Paragraph-text-size: 16px;
  --Font-Body-Paragraph-line-height: 24px;

  --Font-Body-Caption-text-size: 12px;
  --Font-Body-Caption-line-height: 14px;

  /* About section */
  --Font-Body-About-lede-text-size: 32px;
  --Font-Body-About-lede-line-height: 40px;

  --Font-Body-Marquee-text-size: 24px;
  --Font-Body-Marquee-line-height: 34px;

  --Font-Body-Endorsement-text-size: 20px;
  --Font-Body-Endorsement-line-height: 28px;

  --Font-Body-Outro-text-size: 24px;
  --Font-Body-Outro-line-height: 30px;

  /* Home hero (index .hero-heading) */
  --Font-Body-Home-hero-text-size: 72px;
  --Font-Body-Home-hero-line-height: 72px;

  /* Global left/right page margin */
  --page-gutter-inline: var(--Scale-1000);
}

@media (max-width: 1200px) {
  :root {
    --Font-Body-Home-hero-text-size: 64px;
    --Font-Body-Home-hero-line-height: 64px;
  }
}

/*
 * Work card titles: 3-up starts at 1024px — columns are tight on iPad Pro /
 * mid desktop, so step titles down until cards have more room again.
 */
@media (min-width: 1024px) and (max-width: 1399px) {
  :root {
    --Font-Headings-Card-title-text-size: 20px;
    --Font-Headings-Card-title-line-height: 24px;
  }
}

@media (max-width: 810px) {
  :root {
    --Font-Body-About-lede-text-size: 28px;
    --Font-Body-About-lede-line-height: 35px;

    --Font-Body-Home-hero-text-size: 48px;
    --Font-Body-Home-hero-line-height: 48px;

    --Font-Body-Endorsement-text-size: 18px;
    --Font-Body-Endorsement-line-height: 27px;

    --Font-Body-Marquee-text-size: 20px;
    --Font-Body-Marquee-line-height: 28px;

    --Font-Body-Outro-text-size: 20px;
    --Font-Body-Outro-line-height: 25px;

    --Font-Headings-Contact-title-text-size: 24px;
    --Font-Headings-Contact-title-line-height: 29px;

    --page-gutter-inline: var(--Scale-600);
  }
}

/* Large phones (e.g. iPhone Plus / Pro Max ~430px) — between small mobile and tablet */
@media (max-width: 480px) {
  :root {
    --Font-Body-Home-hero-text-size: 32px;
    --Font-Body-Home-hero-line-height: 34px;
  }
}

@media (max-width: 390px) {
  :root {
    --Font-Body-About-lede-text-size: 24px;
    --Font-Body-About-lede-line-height: 30px;

    --Font-Body-Home-hero-text-size: 28px;
    --Font-Body-Home-hero-line-height: 30px;

    --Font-Body-Endorsement-text-size: 16px;
    --Font-Body-Endorsement-line-height: 24px;

    --Font-Body-Marquee-text-size: 18px;
    --Font-Body-Marquee-line-height: 26px;

    --Font-Body-Outro-text-size: 18px;
    --Font-Body-Outro-line-height: 23px;

    --Font-Headings-Contact-title-text-size: 20px;
    --Font-Headings-Contact-title-line-height: 24px;

    --page-gutter-inline: var(--Scale-400);
  }
}