/* ==========================================================================
   PROSERMAT — Premium Typography 2026
   --------------------------------------------------------------------------
   FASE 1 · Tipografía editorial + escala responsiva clamp().
   Familias:
     · Playfair Display  → display / titulares (serif editorial)
     · DM Sans           → body / UI (sans humanista)
     · DM Mono           → SKUs, precios técnicos, código
   Las fuentes se cargan vía <link> en layout.php (NO @import para evitar
   el render-blocking secundario y permitir media="print" swap).

   Las clases se aplican con :where() → especificidad 0,0,0 para que
   cualquier override puntual (incluso una clase utility) gane sin !important.
   ========================================================================== */

:root {
  /* ── Familias ───────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* ── Escala fluida clamp() ──────────────────────────────────────────── */
  --text-xs:   clamp(0.72rem, 0.68rem + 0.20vw, 0.78rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.50vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.10rem + 0.75vw, 1.50rem);
  --text-2xl:  clamp(1.5rem, 1.20rem + 1.50vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.40rem + 2.40vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.60rem + 3.25vw, 3.50rem);
  --text-hero: clamp(2.80rem, 1.80rem + 5.00vw, 5.50rem);

  /* ── Pesos canónicos (Playfair: 600/700/900; DM Sans: 400/500/600/700) */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;
}

/* ── Aplicación base (especificidad 0,0,0 vía :where) ────────────────── */
:where(body) {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal, 1.55);
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings y display editorial ─────────────────────────────────────── */
:where(h1, h2, h3,
       .hero-title, .ph-lines__title, .section-title,
       .pmt-display) {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: var(--leading-tight, 1.15);
}

/* ── Tabular numbers (alinear precios y SKUs) ─────────────────────────── */
:where(.prod-price, .pdp-price, .pmt-tabular,
       .cart-total, .co-total, .order-amount) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Monoespaciada para SKU, código, datos técnicos ───────────────────── */
:where(code, .pmt-mono, .prod-sku, .order-id, .tracking-number) {
  font-family: var(--font-mono);
  font-feature-settings: 'zero' 1;
}

/* ── Helpers utility (opt-in, no se aplican solos) ────────────────────── */
.pmt-display    { font-family: var(--font-display); }
.pmt-body       { font-family: var(--font-body); }
.pmt-mono       { font-family: var(--font-mono); }
.pmt-tabular    { font-variant-numeric: tabular-nums; }
.pmt-text-xs    { font-size: var(--text-xs); }
.pmt-text-sm    { font-size: var(--text-sm); }
.pmt-text-base  { font-size: var(--text-base); }
.pmt-text-lg    { font-size: var(--text-lg); }
.pmt-text-xl    { font-size: var(--text-xl); }
.pmt-text-2xl   { font-size: var(--text-2xl); }
.pmt-text-3xl   { font-size: var(--text-3xl); }
.pmt-text-4xl   { font-size: var(--text-4xl); }
.pmt-text-hero  { font-size: var(--text-hero); line-height: var(--leading-tight, 1.15); }

/* ── Fallback de carga · FOIT mitigation ──────────────────────────────── */
@supports (font-display: swap) {
  /* DM Sans y Playfair se descargan con &display=swap en el <link>; este
     bloque sólo documenta el comportamiento — no requiere reglas extra. */
}