/*
 * OP — Tokens de marca (Orgullosamente Paisa)
 * ============================================
 * Fuente única de verdad visual. Portable: importar desde cualquier tema
 * hijo sin modificarlo.
 * REGLA: ningún valor hexadecimal se escribe literal fuera de este archivo.
 *
 * PALETA DE ANTIOQUIA (decisión de Alexander, 2026-08-27): OP nace desde
 * Antioquia y lleva los colores de su bandera — verde y blanco — sin dejar
 * de ser noticiero. Cambiar aquí = cambia todo el sitio.
 *
 * El verde bandera identifica a OP (categorías, enlaces, logo, botones).
 * El verde bosque da peso de noticiero (navegación, pie, fondos oscuros).
 * El amarillo silletero destaca (Suscríbete, tendencia, "Última hora").
 * Nunca rojo ni azul: esos son de ECN. Roles que no se cruzan.
 */

:root {
	/* ---- Colores de marca ---- */
	--op-negro: #151A17;         /* Negro Tinta (matiz verde): texto, titulares */
	--op-acento: #00843D;        /* Verde Antioquia (bandera): categorías, enlaces, logo, botones */
	--op-oscuro: #0B3D22;        /* Verde Bosque: navegación, pie, fondos oscuros */
	--op-blanco: #FFFFFF;        /* Blanco (bandera): fondo base */
	--op-gris: #6B7280;          /* Gris: sumarios, texto secundario */

	/* ---- Colores funcionales ---- */
	--op-destacado: #F5B400;     /* Amarillo Silletero: Suscríbete, tendencia, Última hora */
	--op-paisa: var(--op-acento);/* alias histórico: sección Paisa = verde bandera */

	/* ---- Neutros derivados (superficies y bordes del sistema) ---- */
	--op-gris-superficie: #F3F7F4;   /* blanco con un 2% de verde */
	--op-gris-borde: #DCE5DF;

	/* ---- Semánticos ---- */
	--op-variacion-positiva: var(--op-acento);
	--op-variacion-negativa: #B42318;    /* único rojo permitido: caída de un dato */

	/*
	 * ---- Tipografía ----
	 * Titulares: Outfit variable (OFL 1.1) — geométrica, ancha, fresca.
	 * Cuerpo: Archivo variable (OFL 1.1) — lectura larga probada en ECN.
	 * Ambas autohospedadas en el tema hijo. Cero peticiones externas.
	 * Outfit NO tiene eje wdth: cualquier 'wdth' en titulares se ignora.
	 */
	--op-font-titular: 'Outfit', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--op-font-cuerpo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

	/* Ejes variables por rol */
	--op-titular-wght: 800;
	--op-titular-wdth: 100;
	--op-cifra-wght: 900;
	--op-cifra-wdth: 100;

	/* ---- Escala tipográfica (base 16px, razón ~1.25) ---- */
	--op-fs-xs: 0.75rem;    /* 12px — notas al pie */
	--op-fs-sm: 0.875rem;   /* 14px — metadatos */
	--op-fs-base: 1rem;     /* 16px — cuerpo */
	--op-fs-md: 1.25rem;    /* 20px — subtítulos */
	--op-fs-lg: 1.5625rem;  /* 25px — títulos de tarjeta */
	--op-fs-xl: 1.953rem;   /* 31px — destacados */
	--op-fs-2xl: 2.441rem;  /* 39px — titular secundario */
	--op-fs-3xl: 3.052rem;  /* 49px — titular de apertura */

	/* ---- Escala de espaciado (base 4px) ---- */
	--op-sp-1: 0.25rem;   /*  4px */
	--op-sp-2: 0.5rem;    /*  8px */
	--op-sp-3: 0.75rem;   /* 12px */
	--op-sp-4: 1rem;      /* 16px */
	--op-sp-5: 1.5rem;    /* 24px */
	--op-sp-6: 2rem;      /* 32px */
	--op-sp-7: 3rem;      /* 48px */

	/* ---- Otros tokens del sistema ---- */
	--op-radio-borde: 10px;      /* esquinas redondeadas: lo "fresco" también es forma */
	--op-radio-borde-sm: 6px;
	--op-ancho-linea-dato: 3px;
	--op-borde-cifra-dia: 2px;

	/* ---- Video y audio en la noticia (plugin sic-media) ----
	 * OP no tiene capa oscura: la tira de audio va sobre el blanco verdoso del
	 * sistema, con el botón en verde bandera y el verde bosque como estado
	 * activo. Así no hace falta inventar ningún color fuera de los cinco de la
	 * marca. La caja del video sí es oscura, porque un video se ve mejor sobre
	 * negro venga de donde venga. */
	--sic-media-acento: var(--op-acento);
	--sic-media-acento-vivo: var(--op-oscuro);
	--sic-media-acento-texto: var(--op-blanco);
	--sic-media-lienzo: var(--op-negro);
	--sic-media-superficie: var(--op-gris-superficie);
	--sic-media-superficie-texto: var(--op-negro);
	--sic-media-superficie-tenue: var(--op-gris);
	--sic-media-borde: var(--op-gris-borde);
	--sic-media-halo: 0 6px 24px rgba(11, 61, 34, 0.35);
	--sic-media-pista: rgba(21, 26, 23, 0.14);
	--sic-media-muted: var(--op-gris);
	--sic-media-radio: var(--op-radio-borde);
	--sic-media-fuente-titular: var(--op-font-titular);
	--sic-media-fuente-cuerpo: var(--op-font-cuerpo);
	--sic-media-fs-xs: var(--op-fs-xs);
	--sic-media-fs-sm: var(--op-fs-sm);

	/* ---- Banner de cookies (plugin sic-consent) ---- */
	--sic-consent-accent: var(--op-acento);
	--sic-consent-accent-text: var(--op-blanco);
	--sic-consent-text: var(--op-negro);
	--sic-consent-muted: var(--op-gris);
	--sic-consent-border: var(--op-gris-borde);
	--sic-consent-radius: var(--op-radio-borde);
	--sic-consent-font: var(--op-font-cuerpo);
}