/* ─────────────────────────────────────────────────────────────
   Typography tokens — GME design system
   Spec: 05-redesign/design-system/foundation/typography.md
   ─────────────────────────────────────────────────────────────
   Construcción:
   - Familias: Geist (sans), Geist Mono, Newsreader (serif)
   - Pesos: 300 display · 400 todo lo demás · 500/700 excepciones
     declaradas (ver "Regla de pesos" en typography.md)
   - Display fluido vía clamp(); headings/body/caption/quote/stats
     fijos en px
   - Responsive: override de tokens display + h1/h2 en <720
     (ADR 0008). NO override per-element — el cambio en :root
     baja a todos los consumidores en sintonía.

   Fuentes self-hosted como variable woff2 en ../fonts/.
   - Geist + Geist Mono: vercel/geist v1.7.0 (OFL-licensed)
   - Newsreader: @fontsource-variable/newsreader v5.2.10 (OFL),
     subset latin (cubre EN/ES/PT con acentos)
   Las paths son relativas al CSS — funcionan donde sea que se
   importe este archivo.
   ───────────────────────────────────────────────────────────── */

/* ── Geist Variable (sans) ─────────────────────────────────── */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Geist Mono Variable ───────────────────────────────────── */
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Newsreader Variable (regular + italic) ────────────────── */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader/Newsreader-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader/Newsreader-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Familias ───────────────────────────────────────────── */
  --font-sans:  'Geist', -apple-system, system-ui, sans-serif;
  --font-mono:  'Geist Mono', monospace;
  --font-serif: 'Newsreader', serif;

  /* ── Display (Geist 300, fluido) ─────────────────────────
     Hero principal · headlines de sección. Solo dos niveles.
     Fluidos para escalar suave entre mobile y desktop sin
     media queries por elemento. */
  --text-display-xl-size:  clamp(56px, 8vw, 112px);
  --text-display-xl-line:  0.92;
  --text-display-xl-track: -0.045em;

  --text-display-l-size:   clamp(44px, 6vw, 88px);
  --text-display-l-line:   0.98;
  --text-display-l-track:  -0.04em;

  /* display-m — un escalón bajo display-l. Títulos de sección de páginas
     un escalón bajo el hero. */
  --text-display-m-size:   clamp(38px, 5vw, 72px);
  --text-display-m-line:   1.0;
  --text-display-m-track:  -0.035em;

  /* ── Token de INTENCIÓN: título de sección ───────────────────
     UNA sola medida de título de sección en TODO el sitio (= display-m).
     Lo único que escala por tipo de página es el H1 del hero (xl home /
     l internas). Así el componente de secciones es consistente en toda la
     experiencia y no depende del contexto de página. Referencia (no copia)
     a display-m → hereda su override mobile automáticamente.
     Consumidores: SectionHead, headers bespoke del home, títulos split,
     statements sobre video (reframe quote, video-break). */
  --section-title-size:   var(--text-display-m-size);
  --section-title-line:   var(--text-display-m-line);
  --section-title-track:  var(--text-display-m-track);

  /* ── Headings (Geist, fijo) ──────────────────────────────
     Section title · card title · mini heading. */
  --text-h1-size:   32px;
  --text-h1-line:   1.05;
  --text-h1-track: -0.025em;

  --text-h2-size:   24px;
  --text-h2-line:   1.25;
  --text-h2-track: -0.02em;

  --text-h3-size:   20px;
  --text-h3-line:   1.3;
  --text-h3-track: -0.015em;

  /* ── Body (Geist 400, fijo) ──────────────────────────────
     body-l: default de <body>, leads. body: cards, descriptions.
     body-s: footer items, detail copy. */
  --text-body-l-size: 20px;
  --text-body-l-line: 1.55;
  --text-body-size:   16px;
  --text-body-line:   1.55;
  --text-body-s-size: 14px;
  --text-body-s-line: 1.5;

  /* ── Eyebrow / Caption (Geist Mono) ──────────────────────
     Eyebrow se posa sobre un heading marcando jerarquía vertical.
     Caption acompaña contenido (metadata, badges, atribuciones).
     Si dudás, es caption. */
  --text-eyebrow-size:  14px;
  --text-eyebrow-track: 0.08em;
  --text-caption-size:  12px;
  --text-caption-track: 0.14em;

  /* ── Quote (Newsreader 400, fijo) ────────────────────────
     Moments editoriales — palabras de alguien o emphasis editorial
     dentro de display headings (e.g. el em de un closing title).
     Familia tres steps: 24 / 20 / 16. Newsreader regular por default
     (italic explícito solo cuando se justifica caso por caso). */
  --text-quote-size:    24px;
  --text-quote-line:    1.4;
  --text-quote-m-size:  20px;
  --text-quote-m-line:  1.45;
  --text-quote-s-size:  16px;
  --text-quote-s-line:  1.45;

  /* ── Stats (Geist 300, numérico) ─────────────────────────
     Aparte de display porque viven en grids y NO escalan con
     viewport. Si necesitás un número como heading, usá display. */
  --text-stat-xl-size:  64px;
  --text-stat-xl-line:  0.9;
  --text-stat-xl-track: -0.04em;
  --text-stat-size:     40px;
  --text-stat-line:     1.0;
  --text-stat-track:    -0.02em;
}

/* ── Responsive — narrow viewports ───────────────────────────
   Override de tokens (no per-element) para que todos los
   consumidores shrinkeen en sintonía. Display preserva clamp,
   solo más apretado. H1/H2 fijos más chicos.
   Spec: ADR 0008 § Type scale responsive en <720.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 719px) {
  :root {
    /* Pisos a la grid de 4/8 — el valor que renderiza en anchos de teléfono
       (≤~480) cae en múltiplo limpio: 48/40/32 (display) · 28/24/20 (títulos).
       El TOPE de cada clamp ≈ el valor desktop en 720px → el handoff en el
       breakpoint es sin escalón (no un salto 112→40; es una rampa fluida que
       solo baja el piso). Display preserva clamp; h1 fijo. Ver § Responsive.
       Invariante: display-m DEBE bajar junto con display-l, si no los títulos
       de sección quedarían más grandes que el H1 interno → jerarquía invertida. */
    --text-display-xl-size: clamp(48px, 10vw, 56px);
    --text-display-l-size:  clamp(40px, 6.5vw, 44px);
    --text-display-m-size:  clamp(32px, 5.5vw, 38px);
    --text-h1-size: 28px;
    /* h2 se queda en su valor desktop (24, múltiplo de 8) — ya es mobile-apto
       y mantener 24 deja la escalera de títulos en pasos limpios de 4:
       section-title 32 · h1 28 · h2 24 · h3 20. */
  }
}