/**
 * @file typography.css
 * Sistema tipográfico baseado no Figma Design System (ADS | 01 - Guia de Estilos).
 *
 * Fonte: Noto Sans
 * Pesos: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700)
 *
 * Escala tipográfica (dados extraídos do Figma via MCP):
 *
 * | Nome | Font Size          | Line Height          | Letter Spacing | Uso                                  |
 * |------|--------------------|----------------------|----------------|--------------------------------------|
 * | 3XL  | 40px (2.5rem)      | 60px (3.75rem)       | 0              | Display/Hero, Title, Subtitle        |
 * | 2XL  | 32px (2rem)        | 48px (3rem)          | 0              | Title, Subtitle, Body                |
 * | XL   | 24px (1.5rem)      | 36px (2.25rem)       | 0              | Title, Subtitle, Body, Label         |
 * | L    | 20px (1.25rem)     | 32px (2rem)          | 0              | Title, Subtitle, Body, Label         |
 * | M    | 16px (1rem)        | 28px (1.75rem)       | 0              | Title, Subtitle, Body, Label         |
 * | S    | 14px (0.875rem)    | 24px (1.5rem)        | 0              | Subtitles, Dates, Authors, Meta-Date |
 *
 * Cor primária do texto: #021C51 (Primary 900)
 *
 * Figma source:
 * https://www.figma.com/design/bG1jYfmWeD94EJM78ClGp5/ADS-%7C-01---Guia-de-Estilos?node-id=7-6&m=dev
 */

/* ==========================================================================
   CSS Custom Properties — Escala Tipográfica
   ========================================================================== */

:root {
  /* ---- Font Family ---- */
  --typo-font-family: "Noto Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;

  /* ---- Font Sizes ---- */
  --typo-size-3xl: 2.5rem; /* 40px */
  --typo-size-2xl: 2rem; /* 32px */
  --typo-size-xl: 1.5rem; /* 24px */
  --typo-size-l: 1.25rem; /* 20px */
  --typo-size-m: 1rem; /* 16px */
  --typo-size-s: 0.875rem; /* 14px */

  /* ---- Line Heights ---- */
  --typo-lh-3xl: 3.75rem; /* 60px */
  --typo-lh-2xl: 3rem; /* 48px */
  --typo-lh-xl: 2.25rem; /* 36px */
  --typo-lh-l: 2rem; /* 32px */
  --typo-lh-m: 1.75rem; /* 28px */
  --typo-lh-s: 1.5rem; /* 24px */

  /* ---- Font Weights ---- */
  --typo-weight-light: 300;
  --typo-weight-regular: 400;
  --typo-weight-medium: 500;
  --typo-weight-semibold: 600;
  --typo-weight-bold: 700;

  /* ---- Letter Spacing ---- */
  --typo-tracking: 0;

  /* ---- Primary Text Color ---- */
  --typo-color-primary: #021c51;
}

/* ==========================================================================
   Utility Classes — Tamanho Tipográfico
   Cada classe define font-size, line-height e letter-spacing para o tamanho.
   ========================================================================== */

.typo-3xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
}

.typo-2xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
}

.typo-xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
}

.typo-l {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
}

.typo-m {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
}

.typo-s {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
}

/* ==========================================================================
   Utility Classes — Peso Tipográfico
   ========================================================================== */

.typo-light {
  font-weight: var(--typo-weight-light);
}

.typo-regular {
  font-weight: var(--typo-weight-regular);
}

.typo-medium {
  font-weight: var(--typo-weight-medium);
}

.typo-semibold {
  font-weight: var(--typo-weight-semibold);
}

.typo-bold {
  font-weight: var(--typo-weight-bold);
}

/* ==========================================================================
   Composed Classes — Tamanho + Peso
   Combinações completas para uso direto, conforme o design system do Figma.
   ========================================================================== */

/* ---- 3XL (40px/60px) — Display/Hero, Title, Subtitle ---- */

.typo-3xl-light {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-light);
}

.typo-3xl-regular {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-3xl-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-3xl-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-3xl-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ---- 2XL (32px/48px) — Title, Subtitle, Body ---- */

.typo-2xl-light {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-light);
}

.typo-2xl-regular {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-2xl-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-2xl-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-2xl-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ---- XL (24px/36px) — Title, Subtitle, Body, Label ---- */

.typo-xl-light {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-light);
}

.typo-xl-regular {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-xl-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-xl-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-xl-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ---- L (20px/32px) — Title, Subtitle, Body, Label ---- */

.typo-l-light {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-light);
}

.typo-l-regular {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-l-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-l-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-l-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ---- M (16px/28px) — Title, Subtitle, Body, Label ---- */

.typo-m-light {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-light);
}

.typo-m-regular {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-m-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-m-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-m-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ---- S (14px/24px) — Subtitles, Dates, Authors, Meta-Date ---- */
/* Nota: O tamanho S não tem variante Light no Figma (começa em Regular). */

.typo-s-regular {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-s-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-s-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-s-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ==========================================================================
   Semantic Classes — Uso contextual
   Classes semânticas mapeadas para os contextos de uso definidos no Figma.
   ========================================================================== */

/* Display / Hero — 3XL Light */
.typo-display {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-light);
}

/* Title — gama de tamanhos, peso semibold por defeito */
.typo-title-3xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-title-2xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-title-xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-title-l {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-title-m {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

/* Subtitle — peso regular por defeito */
.typo-subtitle-3xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-3xl);
  line-height: var(--typo-lh-3xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-subtitle-2xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-subtitle-xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-subtitle-l {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-subtitle-m {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

/* Body — peso regular por defeito */
.typo-body-2xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-2xl);
  line-height: var(--typo-lh-2xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-body-xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-body-l {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-body-m {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

/* Label — peso medium por defeito */
.typo-label-xl {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-label-l {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-label-m {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

/* Meta — S size, for subtitles, dates, authors, meta-date */
.typo-meta {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-regular);
}

.typo-meta-medium {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-medium);
}

.typo-meta-semibold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-semibold);
}

.typo-meta-bold {
  font-family: var(--typo-font-family), serif;
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

/* ==========================================================================
   Heading Scale — nível semântico → tamanho
   Escala geral de títulos do design system, igual à usada no conteúdo
   editorial (ver components/editorial-content/editorial-content.css).

   Aplicar em títulos de MÓDULOS e CONTAINERS: quando o autor muda o nível
   do heading (H2 → H3 → …), o estilo acompanha o nível.
   NÃO aplicar em títulos de cards: aí o nível é só semântica/acessibilidade
   e o estilo é fixo pelo componente.

   Mobile-first:
     H2: XL Bold (24/36) → 2XL Bold (32/48) em desktop
     H3: L Bold  (20/32) → XL Bold  (24/36)
     H4: M Bold  (16/28) → L Bold   (20/32)
     H5: S Bold  (14/24) → M Bold   (16/28)
     H6: S Bold  (14/24) — sem escalonamento

   A cor é deixada a cargo de cada componente (não é definida aqui).
   ========================================================================== */

.typo-heading-2,
.typo-heading-3,
.typo-heading-4,
.typo-heading-5,
.typo-heading-6 {
  font-family: var(--typo-font-family), serif;
  letter-spacing: var(--typo-tracking);
  font-weight: var(--typo-weight-bold);
}

.typo-heading-2 {
  font-size: var(--typo-size-xl);
  line-height: var(--typo-lh-xl);
}

.typo-heading-3 {
  font-size: var(--typo-size-l);
  line-height: var(--typo-lh-l);
}

.typo-heading-4 {
  font-size: var(--typo-size-m);
  line-height: var(--typo-lh-m);
}

.typo-heading-5,
.typo-heading-6 {
  font-size: var(--typo-size-s);
  line-height: var(--typo-lh-s);
}

@media (min-width: 1280px) {
  .typo-heading-2 {
    font-size: var(--typo-size-2xl);
    line-height: var(--typo-lh-2xl);
  }

  .typo-heading-3 {
    font-size: var(--typo-size-xl);
    line-height: var(--typo-lh-xl);
  }

  .typo-heading-4 {
    font-size: var(--typo-size-l);
    line-height: var(--typo-lh-l);
  }

  .typo-heading-5 {
    font-size: var(--typo-size-m);
    line-height: var(--typo-lh-m);
  }
}

/* ==========================================================================
   Primary Text Color
   ========================================================================== */

.typo-primary {
  color: var(--typo-color-primary);
}