/* ===================================================================== EL MERCIO. — puente.css El único sitio donde WordPress y el sistema de diseño se hablan. theme.json sigue siendo la fuente de verdad de los tokens del periódico: es lo que ve el editor, lo que escriben los atributos de bloque (`has-accent-color`, `var(--wp--preset--spacing--24)`) y lo que Francisco puede cambiar sin tocar código. Este archivo mete esos valores en la CAPA DE REFERENCIA del sistema (`--ref-*`), que es la única capa que un tema puede redefinir. A partir de ahí, los componentes del DS —que solo hablan roles— salen vestidos de periódico sin que nadie duplique un color. La dirección importa: WordPress → DS, no al revés. Si fuera al revés habría que escribir `var(--mal-primary)` dentro de theme.json y el selector de color del editor dejaría de enseñar la muestra. Lo que NO se toca aquí es la EXPRESIÓN (radio, filete, sombra, densidad, salto): eso lo decide el tema `mercio` del sistema, y es justo lo que hace que el periódico no tenga líneas ni sombras. Especificidad: `:root[data-marca="mercio"]` es (0,2,0), la misma que usa el bloque del tema dentro de `mal.css`. Empata, y este archivo carga después, así que gana. Con `:root` a secas (0,1,0) perdería. ===================================================================== */ :root[data-marca="mercio"] { /* ---------- Color ---------- */ --ref-marca: var(--wp--preset--color--accent); --ref-marca-2: var(--wp--preset--color--inverse); --ref-marca-txt: var(--wp--preset--color--accent); --ref-sobre-marca: var(--wp--preset--color--base); --ref-acento: var(--wp--preset--color--accent-blue); --ref-acento-2: var(--wp--preset--color--accent); /* n0 lienzo · n1 superficie · n2 tarjeta · n3 alterna */ --ref-n0: var(--wp--preset--color--base); --ref-n1: var(--wp--preset--color--surface); --ref-n2: var(--wp--preset--color--base); --ref-n3: var(--wp--preset--color--base-2); /* t0 texto · t1 secundario · t2 terciario */ --ref-t0: var(--wp--preset--color--contrast); --ref-t1: var(--wp--preset--color--contrast-2); --ref-t2: var(--wp--preset--color--contrast-3); /* el filete existe como token de WordPress aunque el tema del DS no dibuje líneas: lo usan el borde de la cabecera y el del pie, que van en atributos de bloque y son decisiones de maqueta, no de componente. */ --mal-outline: var(--wp--preset--color--border); --mal-outline-2: var(--wp--preset--color--border); /* la banda oscura (footer, secciones destacadas) */ --em-franja: var(--wp--preset--color--inverse); --em-franja-txt: var(--wp--preset--color--base); --em-franja-meta: #a0a0a0; /* ---------- Tipografía ---------- */ --ref-display: var(--wp--preset--font-family--pt-serif); --ref-texto: var(--wp--preset--font-family--pt-serif); --ref-mono: var(--wp--preset--font-family--montserrat); --ref-marca-tipo: var(--wp--preset--font-family--montserrat); --mal-t-caption: var(--wp--preset--font-size--caption); /* 14 */ --mal-t-cuerpo: var(--wp--preset--font-size--body); /* 18 */ --mal-t-h4: var(--wp--preset--font-size--body); /* 18 */ --mal-t-h3: var(--wp--preset--font-size--heading-3); /* 22 */ --mal-t-h2: var(--wp--preset--font-size--heading-2); /* 24 */ --mal-t-h1: var(--wp--preset--font-size--heading-1); /* 32 */ --mal-t-display: var(--wp--preset--font-size--display); /* 40 */ --mal-t-cita: var(--wp--preset--font-size--heading-3); /* 22 */ --em-t-badge: var(--wp--preset--font-size--badge); /* 9 */ --em-t-button: var(--wp--preset--font-size--button); /* 16 */ --em-t-display: var(--wp--preset--font-size--display); /* 40 */ --em-t-caption: var(--wp--preset--font-size--caption); /* 14 */ --em-t-body: var(--wp--preset--font-size--body); /* 18 */ --em-t-h3: var(--wp--preset--font-size--heading-3); --em-t-h2: var(--wp--preset--font-size--heading-2); --em-t-h1: var(--wp--preset--font-size--heading-1); /* `--mal-t-micro` (el rótulo en versalitas, 11 px) y `--mal-t-lede` (20 px) no tienen preset en theme.json: se quedan como los define el sistema. Si algún día se les crea un tamaño en el editor, se añaden aquí y dejan de estar en dos sitios. */ /* ---------- Espacio ---------- */ --mal-e1: var(--wp--preset--spacing--4); --mal-e2: var(--wp--preset--spacing--8); --mal-e3: var(--wp--preset--spacing--12); --mal-e4: var(--wp--preset--spacing--16); --mal-e5: var(--wp--preset--spacing--24); --mal-e6: var(--wp--preset--spacing--32); --mal-e7: var(--wp--preset--spacing--48); --mal-e8: var(--wp--preset--spacing--64); /* ---------- Medidas ---------- */ --mal-ancho: var(--wp--style--global--content-size, 1280px); --em-ancho: var(--wp--style--global--content-size, 1280px); } /* ===================================================================== La banda oscura, en los dos vocabularios ===================================================================== El sistema remapea sus propios tokens de texto dentro de `.em-dark` (`--em-contrast`), pero los bloques de WordPress no leen esos: leen `--wp--preset--color--contrast` a través de clases como `has-contrast-color`, que además llevan `!important`. Sin esta parte, un titular dentro de una banda oscura se queda en negro sobre negro. Solo se remapean los tres tokens de TEXTO. Los de fondo (base, base-2, surface, surface-2, inverse) se eligen a mano en cada sección, y si se tocaran aquí una tarjeta que pide `contrast-2` de fondo se volvería gris claro dentro de una sección oscura. Es lo mismo que hacen los modos claro/oscuro de las variables de Figma: el token no cambia de nombre, cambia de valor según el marco. */ .em-dark { --wp--preset--color--contrast: var(--em-franja-txt); --wp--preset--color--contrast-2: var(--em-franja-meta); --wp--preset--color--contrast-3: var(--em-franja-meta); }