/* ============================================
   Swiss IAF — Typography System
   ============================================ */

:root {

  /* --- Fonts --- */
  --font-gt-america: 'GT America', sans-serif;
  --font-martina: 'Martina Plantijn', serif;

  /* ============================================
     GT America — graisses simplifiées (test)
     Regular (400) → Light (300) ; Bold (700) → Medium (500)
     ============================================ */

  /* H2 */
  --gt-h2-weight: 300;
  --gt-h2-size: 40px;
  --gt-h2-lh: 54px;

  /* H3 Regular */
  --gt-h3-weight: 300;
  --gt-h3-size: 24px;
  --gt-h3-lh: 36px;

  /* H3 Bold */
  --gt-h3-bold-weight: 500;

  /* Copy Regular */
  --gt-copy-weight: 300;
  --gt-copy-size: 18px;
  --gt-copy-lh: 26px;

  /* Copy Bold */
  --gt-copy-bold-weight: 500;

  /* Copy Bold UPPER */
  --gt-copy-upper-weight: 500;
  --gt-copy-upper-size: 16px;
  --gt-copy-upper-lh: 23px;
  --gt-copy-upper-ls: 0.03em;

  /* Caption Regular */
  --gt-caption-weight: 300;
  --gt-caption-size: 16px;
  --gt-caption-lh: 23px;
  --gt-caption-ls: -0.01em;

  /* Caption Bold — utilisé pour les sur-titres compacts (ex. iaf_text). */
  --gt-caption-bold-weight: 500;

  /* Caption Regular UPPER */
  --gt-caption-upper-size: 14px;
  --gt-caption-upper-lh: 21px;
  --gt-caption-upper-ls: 0.03em;

  /* ============================================
     Martina Plantijn
     ============================================ */

  /* H1 */
  --mp-h1-weight: 300;
  --mp-h1-size: 48px;
  --mp-h1-lh: 110%;

  /* H2 */
  --mp-h2-weight: 400;
  --mp-h2-size: 40px;
  --mp-h2-lh: 52px;

  /* H3 Regular */
  --mp-h3-weight: 400;
  --mp-h3-size: 24px;
  --mp-h3-lh: 32px;
  --mp-h3-ls: 0.02em;

  /* H3 Regular UPPER */
  --mp-h3-upper-ls: 0.05em;

  /* H4 */
  --mp-h4-weight: 400;
  --mp-h4-size: 23px;
  --mp-h4-lh: 32px;
  --mp-h4-ls: 0.01em;

  /* H4 Regular UPPER */
  --mp-h4-upper-ls: 0.05em;

  /* Copy Regular */
  --mp-copy-weight: 400;
  --mp-copy-size: 18px;
  --mp-copy-lh: 26px;
  --mp-copy-ls: 0.01em;

  /* Copy Italic */
  --mp-copy-italic-style: italic;

  /* Copy UPPER */
  --mp-copy-upper-ls: 0.05em;

  /* Caption */
  --mp-caption-weight: 400;
  --mp-caption-size: 16px;
  --mp-caption-lh: 20px;
  --mp-caption-ls: 0.02em;

}

/* ============================================
   Utility Classes — GT America
   ============================================ */

.gt-h2 {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-h2-weight);
  font-size: var(--gt-h2-size);
  line-height: var(--gt-h2-lh);
}

.gt-h3 {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-h3-weight);
  font-size: var(--gt-h3-size);
  line-height: var(--gt-h3-lh);
}

.gt-h3-bold {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-h3-bold-weight);
  font-size: var(--gt-h3-size);
  line-height: var(--gt-h3-lh);
}

.gt-copy {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-copy-weight);
  font-size: var(--gt-copy-size);
  line-height: var(--gt-copy-lh);
}

.gt-copy-bold {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-copy-bold-weight);
  font-size: var(--gt-copy-size);
  line-height: var(--gt-copy-lh);
}

.gt-copy-upper {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-copy-upper-weight);
  font-size: var(--gt-copy-upper-size);
  line-height: var(--gt-copy-upper-lh);
  text-transform: uppercase;
  letter-spacing: var(--gt-copy-upper-ls);
}

.gt-caption {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-caption-weight);
  font-size: var(--gt-caption-size);
  line-height: var(--gt-caption-lh);
  letter-spacing: var(--gt-caption-ls);
}

.gt-caption-bold {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-caption-bold-weight);
  font-size: var(--gt-caption-size);
  line-height: var(--gt-caption-lh);
}

.gt-caption-upper {
  font-family: var(--font-gt-america);
  font-weight: var(--gt-caption-weight);
  font-size: var(--gt-caption-upper-size);
  line-height: var(--gt-caption-upper-lh);
  text-transform: uppercase;
  letter-spacing: var(--gt-caption-upper-ls);
}

/* ============================================
   Utility Classes — Martina Plantijn
   ============================================ */

.mp-h1 {
  font-family: var(--font-martina);
  font-weight: var(--mp-h1-weight);
  font-size: var(--mp-h1-size);
  line-height: var(--mp-h1-lh);
}

.mp-h2 {
  font-family: var(--font-martina);
  font-weight: var(--mp-h2-weight);
  font-size: var(--mp-h2-size);
  line-height: var(--mp-h2-lh);
}

.mp-h3 {
  font-family: var(--font-martina);
  font-weight: var(--mp-h3-weight);
  font-size: var(--mp-h3-size);
  line-height: var(--mp-h3-lh);
  letter-spacing: var(--mp-h3-ls);
}

.mp-h3-upper {
  font-family: var(--font-martina);
  font-weight: var(--mp-h3-weight);
  font-size: var(--mp-h3-size);
  line-height: var(--mp-h3-lh);
  text-transform: uppercase;
  letter-spacing: var(--mp-h3-upper-ls);
}

.mp-h4 {
  font-family: var(--font-martina);
  font-weight: var(--mp-h4-weight);
  font-size: var(--mp-h4-size);
  line-height: var(--mp-h4-lh);
  letter-spacing: var(--mp-h4-ls);
}

.mp-h4-upper {
  font-family: var(--font-martina);
  font-weight: var(--mp-h4-weight);
  font-size: var(--mp-h4-size);
  line-height: var(--mp-h4-lh);
  text-transform: uppercase;
  letter-spacing: var(--mp-h4-upper-ls);
}

/* Copie courante serif (Martina Plantijn) — alias charte : gt-copy-serif, copy-serif. */
.mp-copy,
.gt-copy-serif,
.copy-serif {
  font-family: var(--font-martina);
  font-weight: var(--mp-copy-weight);
  font-size: var(--mp-copy-size);
  line-height: var(--mp-copy-lh);
  letter-spacing: var(--mp-copy-ls);
}

.mp-copy-italic {
  font-family: var(--font-martina);
  font-weight: var(--mp-copy-weight);
  font-size: var(--mp-copy-size);
  line-height: var(--mp-copy-lh);
  font-style: var(--mp-copy-italic-style);
}

.mp-copy-upper {
  font-family: var(--font-martina);
  font-weight: var(--mp-copy-weight);
  font-size: var(--mp-copy-size);
  line-height: var(--mp-copy-lh);
  text-transform: uppercase;
  letter-spacing: var(--mp-copy-upper-ls);
}

.mp-caption {
  font-family: var(--font-martina);
  font-weight: var(--mp-caption-weight);
  font-size: var(--mp-caption-size);
  line-height: var(--mp-caption-lh);
  letter-spacing: var(--mp-caption-ls);
}

/* ============================================
   Mobile type scale (≤1023px) — independent of desktop
   H3 → desktop H4 feel ; H4 → body/paragraph feel
   ============================================ */

@media (max-width: 1023px) {
  :root {
    /* Semantic mobile roles (M1–M7) — single source for extensions + rich-text. */
    --iaf-m-hero: 32px;
    --iaf-m-hero-lh: 1.1;
    --iaf-m-display: 28px;
    --iaf-m-display-lh: 36px;
    --iaf-m-section: 24px;
    --iaf-m-section-lh: 33px;
    --iaf-m-h3: 18px;
    --iaf-m-h3-lh: 26px;
    --iaf-m-item: 16px;
    --iaf-m-item-lh: 24px;
    --iaf-m-body: 16px;
    --iaf-m-body-lh: 24px;
    --iaf-m-eyebrow: 14px;
    --iaf-m-eyebrow-lh: 20px;
    --iaf-m-meta: 12px;
    --iaf-m-meta-lh: 18px;
    --iaf-m-keyword: clamp(28px, 8vw, 36px);

    --gt-h2-size: var(--iaf-m-display);
    --gt-h2-lh: var(--iaf-m-display-lh);

    --gt-h3-size: var(--iaf-m-h3);
    --gt-h3-lh: var(--iaf-m-h3-lh);

    --gt-copy-size: var(--iaf-m-body);
    --gt-copy-lh: var(--iaf-m-body-lh);

    --gt-copy-upper-size: var(--iaf-m-eyebrow);
    --gt-copy-upper-lh: var(--iaf-m-eyebrow-lh);

    --gt-caption-size: var(--iaf-m-eyebrow);
    --gt-caption-lh: var(--iaf-m-eyebrow-lh);

    --gt-caption-upper-size: var(--iaf-m-meta);
    --gt-caption-upper-lh: var(--iaf-m-meta-lh);

    --mp-h1-size: var(--iaf-m-hero);
    --mp-h1-lh: var(--iaf-m-hero-lh);

    --mp-h2-size: var(--iaf-m-display);
    --mp-h2-lh: var(--iaf-m-display-lh);

    --mp-h3-size: var(--iaf-m-h3);
    --mp-h3-lh: var(--iaf-m-h3-lh);

    --mp-h4-size: var(--iaf-m-h3);
    --mp-h4-lh: var(--iaf-m-h3-lh);

    --mp-copy-size: var(--iaf-m-body);
    --mp-copy-lh: var(--iaf-m-body-lh);

    --mp-caption-size: var(--iaf-m-eyebrow);
    --mp-caption-lh: var(--iaf-m-eyebrow-lh);
  }

  /* Extension section titles only — not item/card headlines (.gt-h3). */
  .gt-h3-bold {
    font-size: var(--iaf-m-section);
    line-height: var(--iaf-m-section-lh);
  }
}