/*
 * PIA — Tokens de marca (Primicia IA)
 * ===================================
 * Fuente única de verdad visual, según docs/01-sistema-visual.md.
 * Portable: importar desde cualquier tema hijo sin modificarlo.
 * REGLA: ningún valor hexadecimal se escribe literal fuera de este archivo.
 *
 * Primicia IA es un medio de IA y su identidad lo dice sin decirlo: negro
 * neural como lienzo, cian como señal (la luz del cursor, el dato, el enlace)
 * y ámbar SOLO para lo que urge (Última hora / breaking). El morado queda
 * prohibido: es territorio de Kreoon, otra marca de la casa.
 *
 * Herencia de ECN: la misma arquitectura de tokens (lienzo / superficie /
 * acento / neón / semánticos), para que los plugins compartidos sic-* se
 * vistan solos leyendo estas variables.
 */

:root {
	/* ---- Colores de marca (branding aprobado 2026-09-09) ---- */
	--pia-negro: #0B0D12;        /* Negro Neural: lienzo, cabecera, pie, titulares sobre claro */
	--pia-cian: #00C2D8;         /* Cian Señal: la marca. Enlaces, categorías, cifras, filetes */
	--pia-ambar: #F59E0B;        /* Ámbar Primicia: EXCLUSIVO Última hora / breaking */
	--pia-blanco: #FFFFFF;       /* Fondo del cuerpo de nota; texto sobre el lienzo */
	--pia-gris: #6B7280;         /* Gris Prensa: bylines, sumarios, texto secundario sobre claro */

	/* ---- Neutros derivados (superficies y bordes del sistema) ---- */
	--pia-gris-superficie: #F4F6F8;   /* fondo de página en las vistas claras */
	--pia-gris-borde: #E5E7EB;        /* separadores sobre claro */
	--pia-superficie: #12161E;        /* tarjeta y desplegable sobre el negro neural */
	--pia-superficie-alta: #1A2029;   /* segundo nivel: hover, tabla, código */

	/*
	 * ---- Capa "señal" (el neón de Primicia) ----
	 * El cian llevado a luz. Se usa en bordes, filetes, brillos y como color de
	 * texto SOLO sobre superficies oscuras (cian sobre blanco no cumple
	 * contraste para cuerpo: 2,6:1). Sobre claro el enlace va en cian oscuro.
	 */
	--pia-cian-vivo: #22D3EE;                    /* cian a plena luz: hover, foco */
	--pia-cian-oscuro: #0891A5;                  /* cian legible sobre blanco (4,6:1) */
	--pia-cian-suave: rgba(0, 194, 216, 0.45);   /* bordes en reposo */
	--pia-cian-tenue: rgba(0, 194, 216, 0.14);   /* halo lejano, fondos de bloque */
	--pia-cian-fondo-claro: #EBFAFC;             /* fondo de bloque editorial sobre nota clara */

	--pia-tech-linea: rgba(255, 255, 255, 0.06);        /* retícula sobre oscuro */
	--pia-tech-linea-clara: rgba(11, 13, 18, 0.045);    /* retícula sobre claro */
	--pia-tech-texto-suave: rgba(255, 255, 255, 0.72);  /* secundario sobre oscuro */
	--pia-tech-hover: rgba(255, 255, 255, 0.1);         /* píldora al pasar el cursor, sobre oscuro */

	/* Brillo de señal: halo cercano nítido y halo lejano difuso */
	--pia-glow: 0 0 0 1px var(--pia-cian-suave), 0 0 14px var(--pia-cian-suave), 0 0 36px var(--pia-cian-tenue);
	--pia-glow-fuerte: 0 0 0 1px var(--pia-cian), 0 0 18px var(--pia-cian-suave), 0 0 48px var(--pia-cian-tenue);
	/* Filete horizontal que se apaga hacia los extremos, como una línea de señal */
	--pia-filete: linear-gradient(90deg, transparent 0%, var(--pia-cian) 18%, var(--pia-cian) 82%, transparent 100%);
	/* Retícula neural para superficies oscuras */
	--pia-reticula:
		linear-gradient(var(--pia-tech-linea) 1px, transparent 1px),
		linear-gradient(90deg, var(--pia-tech-linea) 1px, transparent 1px);
	--pia-reticula-tam: 28px 28px;
	--pia-halo: radial-gradient(ellipse 60% 80% at 100% 0%, var(--pia-cian-tenue), transparent 60%);

	/* Contorno de tarjeta: atenuado en reposo, encendido al acercarse */
	--pia-borde-senal: 1px solid var(--pia-cian-suave);
	--pia-borde-senal-vivo: 1px solid var(--pia-cian);

	/* ---- Ámbar: solo urgencia ----
	 * Barra ÚLTIMA HORA, badge breaking y el ítem de menú "Última hora".
	 * Nunca como acento decorativo: si el ámbar aparece en un botón cualquiera,
	 * la próxima vez que haya breaking nadie lo notará. */
	--pia-ambar-suave: rgba(245, 158, 11, 0.45);
	--pia-ambar-tenue: rgba(245, 158, 11, 0.14);
	--pia-ambar-glow: 0 0 0 1px var(--pia-ambar-suave), 0 0 14px var(--pia-ambar-suave);
	--pia-ambar-texto: var(--pia-negro); /* texto sobre ámbar: negro (contraste 9,9:1) */

	/* Sombras suaves de la capa clara */
	--pia-sombra-tarjeta: 0 6px 24px rgba(11, 13, 18, 0.07);
	--pia-sombra-flotante: 0 16px 40px rgba(11, 13, 18, 0.35);

	/* ---- Semánticos de dato (Radar de modelos) ----
	 * Sobre superficie oscura. Baja de precio = verde, sube = coral;
	 * ambos por encima de 7:1 sobre --pia-superficie. */
	--pia-variacion-positiva: #7FD39B;
	--pia-variacion-negativa: #F2868D;
	--pia-dato-neutro: var(--pia-tech-texto-suave);

	/*
	 * ---- Tipografía (docs/04-tipografia.md) ----
	 * Space Grotesk para titulares y cifras (geométrica con carácter técnico),
	 * Inter para cuerpo y metadatos. Ambas OFL 1.1, autohospedadas en el tema
	 * hijo como subsets latin en woff2 (7 archivos, ~133 KB en total).
	 */
	--pia-font-titular: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--pia-font-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--pia-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* nombres de modelo, precios de API */

	--pia-titular-wght: 700;
	--pia-cifra-wght: 700;
	--pia-titular-tracking: -0.01em;

	/* ---- Escala tipográfica (base 16px, razón ~1.25) ---- */
	--pia-fs-xs: 0.75rem;    /* 12px — fuente del dato, medida del hueco */
	--pia-fs-sm: 0.875rem;   /* 14px — metadatos, tablas */
	--pia-fs-base: 1rem;     /* 16px — cuerpo */
	--pia-fs-md: 1.25rem;    /* 20px — subtítulos */
	--pia-fs-lg: 1.5625rem;  /* 25px — títulos de tarjeta */
	--pia-fs-xl: 1.953rem;   /* 31px — cifras destacadas */
	--pia-fs-2xl: 2.441rem;  /* 39px — cifra principal de ficha */
	--pia-fs-3xl: 3.052rem;  /* 49px — El dato del día */

	/* ---- Escala de espaciado (base 4px) ---- */
	--pia-sp-1: 0.25rem;
	--pia-sp-2: 0.5rem;
	--pia-sp-3: 0.75rem;
	--pia-sp-4: 1rem;
	--pia-sp-5: 1.5rem;
	--pia-sp-6: 2rem;
	--pia-sp-7: 3rem;

	/* ---- Radios y líneas ---- */
	--pia-radio-borde: 12px;
	--pia-radio-borde-sm: 6px;
	--pia-radio-pildora: 999px;
	--pia-ancho-linea-dato: 3px;  /* filete de componentes de dato */
	--pia-borde-dato-dia: 2px;    /* borde cian de El dato del día */

	/* ---- Plugins compartidos sic-* (leen estas variables; cero hex allí) ---- */

	/* sic-media: video y audio en la nota */
	--sic-media-acento: var(--pia-cian);
	--sic-media-acento-vivo: var(--pia-cian-vivo);
	--sic-media-acento-texto: var(--pia-negro);
	--sic-media-lienzo: var(--pia-negro);
	--sic-media-superficie: var(--pia-superficie);
	--sic-media-superficie-texto: var(--pia-blanco);
	--sic-media-superficie-tenue: var(--pia-tech-texto-suave);
	--sic-media-borde: var(--pia-cian-suave);
	--sic-media-halo: var(--pia-glow);
	--sic-media-pista: rgba(255, 255, 255, 0.16);
	--sic-media-muted: var(--pia-gris);
	--sic-media-radio: var(--pia-radio-borde);
	--sic-media-fuente-titular: var(--pia-font-titular);
	--sic-media-fuente-cuerpo: var(--pia-font-cuerpo);
	--sic-media-fs-xs: var(--pia-fs-xs);
	--sic-media-fs-sm: var(--pia-fs-sm);

	/* sic-consent: banner de cookies sobre superficie oscura */
	--sic-consent-bg: var(--pia-superficie);
	--sic-consent-accent: var(--pia-cian);
	--sic-consent-accent-text: var(--pia-negro);
	--sic-consent-text: var(--pia-blanco);
	--sic-consent-muted: var(--pia-tech-texto-suave);
	--sic-consent-border: var(--pia-cian-suave);
	--sic-consent-radius: var(--pia-radio-borde);
	--sic-consent-font: var(--pia-font-cuerpo);

	/* sic-ads: el plugin declara sus --sic-ads-* DENTRO de .sic-ads leyendo
	 * var(--ecn-neon), var(--ecn-superficie) y var(--ecn-gris) (fuente de
	 * verdad en ecn-web; aquí no se toca). Se le dan esos tres nombres como
	 * alias: son los ÚNICOS --ecn-* permitidos en este repo. */
	--ecn-neon: var(--pia-cian);
	--ecn-superficie: var(--pia-superficie);
	--ecn-gris: var(--pia-gris);
}