/*
 * TYPOGRAPHY: Sistema tipográfico unificado
 * Combina Plan Original + Propuesta Claude
 * Compatible con: OLS, Cloudflare, LiteSpeed Cache
 */

/* ==========================================================
   FONT FACES - Cargar fuentes personalizadas
========================================================== */

/* ==========================================================
   FONT FACES - Según referencia El País
========================================================== */

/* MajritTxRoman - Texto del cuerpo (párrafos, listas) - Weight 400 */
@font-face {
    font-family: MajritTxRoman;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Roman-1.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Roman.woff") format("woff");
}

@font-face {
    font-family: MajritTxRoman;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Roman-1.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Roman.woff") format("woff");
}

/* MajritTx - Títulos y elementos bold/black */
@font-face {
    font-family: MajritTx;
    font-style: normal;
    font-weight: 500;
    font-display: swap; /* Evita FOIT y mejora LCP */
    /* Medium: usar Roman como fallback hasta tener archivo específico */
    src: url("/wp-content/fonts/Majrit-Text-Roman-1.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Roman.woff") format("woff");
}

@font-face {
    font-family: MajritTx;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Bold.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Bold.woff") format("woff");
}

@font-face {
    font-family: MajritTx;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Black.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Black.woff") format("woff");
}

/* MarcinAntB - Sans-serif para meta, fechas, etc. */
@font-face {
    font-family: MarcinAntB;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/fonts/marcinantb-regular-webfont.woff2") format("woff2");
}

@font-face {
    font-family: MarcinAntB;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    /* Medium: usar regular como fallback hasta tener archivo específico */
    src: url("/wp-content/fonts/marcinantb-regular-webfont.woff2") format("woff2");
}

@font-face {
    font-family: MarcinAntB;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/fonts/marcinantb-bold-webfont.woff2") format("woff2");
}

@font-face {
    font-family: MarcinAntB;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    /* Heavy/Black: usar regular como fallback hasta tener archivo específico */
    src: url("/wp-content/fonts/marcinantb-regular-webfont.woff2") format("woff2");
}

/* Alias para compatibilidad */
@font-face {
    font-family: "Majrit Text Roman";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Roman-1.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Roman.woff") format("woff");
}

/* Alias adicionales para compatibilidad con nombres antiguos */
@font-face {
    font-family: "MJRT";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Bold.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Bold.woff") format("woff");
}

@font-face {
    font-family: "MJRT";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/wp-content/fonts/Majrit-Text-Black.woff2") format("woff2"),
         url("/wp-content/fonts/Majrit-Text-Black.woff") format("woff");
}

@font-face {
    font-family: "MarcinAnt";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/fonts/marcinantb-regular-webfont.woff2") format("woff2");
}

/* ==========================================================
   BASE TYPOGRAPHY
========================================================== */

/**
 * Phase B: Estilos globales peligrosos eliminados
 * 
 * ANTES: h1-h6 tenían estilos visuales (color, font-family) que
 * rompían componentes con fondos oscuros.
 * 
 * DESPUÉS: Los resets de h1-h6 están en elements.css
 * Los estilos tipográficos se aplican con utility classes (utilities-typography.css)
 * 
 * Este archivo ahora solo contiene:
 * - @font-face declarations
 * - Utility classes existentes (compatibilidad)
 * - Estilos de body (básicos)
 */

/* ==========================================================
   BODY - Estilos básicos del body
========================================================== */

body {
    font-family: var(--font-sans); /* MarcinAntB por defecto */
    font-size: var(--fs-md);
    line-height: var(--line-height-content);
    color: var(--color-text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================
   HEADINGS GLOBALES - ELIMINADOS
========================================================== */

/**
 * REMOVIDO: Estilos globales peligrosos de h1-h6
 * 
 * Estos estilos causaban problemas:
 * - Componentes con fondos oscuros tenían títulos negros (invisibles)
 * - Necesitaban !important para forzar colores blancos
 * - Dificultaban el aislamiento de componentes
 * 
 * SOLUCIÓN: Usar utility classes (.informe-heading, .informe-text--light, etc.)
 * Ver: utilities-typography.css
 */

/* ==========================================================
   VARIANTES SEMÁNTICAS (Clases utilitarias)
========================================================== */

/* ==========================================================
   TÍTULOS - ESTÁNDAR EL PAÍS
========================================================== */

/* Hero / Destacados grandes */
.informe-title-xl {
    font-family: var(--font-serif);
    font-size: var(--fs-title-xl);     /* 1.875rem - 30px */
    font-weight: var(--fw-title-featured); /* 700 */
    line-height: var(--lh-hero);       /* 1.07 */
    letter-spacing: var(--ls-hero);    /* -.0675rem */
    color: var(--color-text);
}

/* Titulares de bloque / Destacados secundarios */
.informe-title-lg {
    font-family: var(--font-serif);
    font-size: var(--fs-title-lg);     /* 1.625rem - 26px */
    font-weight: var(--fw-title-base); /* 600 */
    line-height: var(--lh-title-base); /* 1.15 */
    letter-spacing: var(--ls-title-lg);/* -.0375rem */
    color: var(--color-text);
}

/* Títulos estándar (Cards principales) */
.informe-title-md {
    font-family: var(--font-serif);
    font-size: var(--fs-title-base);   /* 1.25rem - 20px */
    font-weight: var(--fw-title-base); /* 600 */
    line-height: var(--lh-title-base); /* 1.15 */
    letter-spacing: var(--ls-title-base); /* -.018125rem */
    color: var(--color-text);
}

/* Títulos listas */
.informe-title-sm {
    font-family: var(--font-serif);
    font-size: var(--fs-title-md);     /* 1.125rem - 18px */
    font-weight: var(--fw-title-base); /* 600 */
    line-height: var(--lh-title-list); /* 1.17 */
    letter-spacing: var(--ls-title-md);/* -.016875rem */
    color: var(--color-text);
}

/* Títulos compactos/pequeños */
.informe-title-xs {
    font-family: var(--font-serif);
    font-size: var(--fs-title-sm);     /* 1rem - 16px */
    font-weight: var(--fw-title-base); /* 600 */
    line-height: var(--lh-title-sm);   /* 1.19 */
    letter-spacing: var(--ls-title-sm);/* -.005625rem */
    color: var(--color-text);
}

/* ==========================================================
   HEADINGS - ACTUALIZADOS CON TOKENS EL PAÍS
========================================================== */

.informe-heading {
    font-family: var(--font-primary);
    font-weight: var(--fw-title-base);  /* 600 - Estándar El País */
    line-height: var(--lh-title-base); /* 1.15 */
    color: var(--color-text-primary);
    margin: 0;
}

.informe-heading--hero {
    font-size: clamp(1.7rem, 3.2vw, var(--fs-title-xl)); /* 1.875rem */
    line-height: var(--lh-hero);       /* 1.07 */
    letter-spacing: var(--ls-hero);    /* -.0675rem */
    font-weight: var(--fw-title-featured); /* 700 */
}

.informe-heading--section {
    font-size: var(--fs-title-lg);     /* 1.625rem - 26px */
    line-height: var(--lh-title-base); /* 1.15 */
    letter-spacing: var(--ls-title-lg);/* -.0375rem */
}

.informe-heading--subsection {
    font-size: var(--fs-title-base);   /* 1.25rem - 20px */
    line-height: var(--lh-title-base); /* 1.15 */
    letter-spacing: var(--ls-title-base); /* -.018125rem */
}

.informe-heading--card {
    font-size: var(--fs-title-md);     /* 1.125rem - 18px */
    line-height: var(--lh-title-list); /* 1.17 */
    letter-spacing: var(--ls-title-md);/* -.016875rem */
}

.informe-heading--small {
    font-size: var(--fs-title-sm);     /* 1rem - 16px */
    line-height: var(--lh-title-sm);   /* 1.19 */
    letter-spacing: var(--ls-title-sm);/* -.005625rem */
}

.informe-heading--link {
    text-decoration: none;
}

.informe-heading--link:hover {
    color: var(--color-title-hover);   /* #444 - Estándar El País */
    text-decoration: underline;
}

/* ==========================================================
   EXCERPTS / BAJADAS - ESTÁNDAR EL PAÍS
========================================================== */

.informe-excerpt,
.informe-text {
    font-family: var(--font-serif-roman); /* MajritTxRoman según referencia */
    font-size: var(--fs-excerpt);       /* .9375rem - 15px */
    font-weight: var(--font-weight-normal); /* 400 */
    line-height: var(--lh-excerpt);     /* 1.27 */
    color: var(--color-excerpt);        /* #4a4a4a */
}

.informe-text--lg {
    font-size: var(--fs-excerpt);
}

.informe-text--base {
    font-size: var(--fs-excerpt);
}

.informe-text--sm {
    font-size: var(--fs-title-xs);     /* .875rem - 14px */
    line-height: var(--lh-compact);    /* 1.21 */
}

/* ==========================================================
   META TEXT - ESTÁNDAR EL PAÍS (Categorías, Fechas, Autores)
========================================================== */

.informe-meta,
.informe-author {
    font-family: var(--font-sans); /* MarcinAntB según referencia */
    font-size: var(--fs-meta);          /* .6875rem - 11px */
    font-weight: var(--fw-meta);        /* 500 */
    line-height: var(--lh-excerpt);     /* 1.27 */
    text-transform: uppercase;
    letter-spacing: var(--ls-meta);     /* .0125rem */
    color: var(--color-meta);           /* #666 */
}

.informe-meta--xs {
    font-size: var(--font-size-xs);
}

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

.informe-meta--primary {
    color: var(--color-primary);
}

/* ==========================================================
   LINKS
========================================================== */

/**
 * Phase C: Links globales - Reset básico (OK, no rompe componentes)
 * `color: inherit` permite que componentes definan sus propios colores
 * Este reset es seguro y no necesita cambios
 */
a {
    color: inherit; /* OK - permite que componentes sobrescriban */
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/**
 * Links en headings - REMOVIDO
 * 
 * Estos estilos están ahora en elements.css (resets básicos)
 * Para estilos más específicos, usar utility classes
 */