/**
 * Tokens de color de Caprii.
 *
 * Ver docs/design-tokens.md en la raíz del repo.
 *
 * Este archivo define QUÉ roles existen y cuánto valen por defecto. El plugin
 * Caprii Core sobrescribe los tres slots estacionales según la temporada activa;
 * si el plugin no está, el sitio se ve con la temporada por defecto de acá.
 *
 * Se carga en el front y en el editor (ver functions.php), así que lo que se
 * diseña en el editor es lo que se publica.
 */

:root {
	/* Neutros — fijos, nunca cambian con la temporada. */
	--c-base: #f2f2ea; /* Blanco Caprii I */
	--c-base-alt: #edeae4; /* Blanco Caprii II */
	--c-ink: #141414; /* Negro Caprii */

	/* Derivados de los neutros. La primera declaración es el fallback
	   estático para navegadores sin color-mix(). */
	--c-ink-soft: #575754;
	--c-ink-soft: color-mix(in srgb, var(--c-ink) 70%, var(--c-base));
	--c-border: #cecec8;
	--c-border: color-mix(in srgb, var(--c-ink) 16%, var(--c-base));

	/* Colores de marca. Constantes del manual: no cambian con la temporada,
	   son los valores entre los que la temporada elige. Viven acá —y no solo
	   en Caprii\Core\Design\Palette— porque el editor los ofrece como
	   swatches, y la paleta del editor sale de theme.json, que necesita algo
	   a lo que apuntar aunque el plugin no esté. */
	--c-brand-arena: #e3cf71;
	--c-brand-iris: #6e71b8;
	--c-brand-naranja-amalfi: #ff8c46;
	--c-brand-verde-capri: #5f5e30;
	--c-brand-azul-riviera: #a1c1e4;
	--c-brand-rosa-salina: #dfa2a9;
	--c-brand-verde-profundo: #1c3630;
	--c-brand-borgona-vesuvio: #311615;

	/* Temporada por defecto. Debe coincidir con los defaults de
	   Caprii\Core\Design\Palette::defaults() en el plugin. */
	--c-accent: #1c3630; /* Verde Profundo */
	--c-surface: #e3cf71; /* Arena */
	--c-detail: #ff8c46; /* Naranja Amalfi */

	/* Pareja de texto de cada slot. El selector del plugin solo ofrece
	   acentos oscuros y superficies claras, así que estas dos parejas valen
	   para cualquier temporada. */
	--c-accent-on: var(--c-base);
	--c-surface-on: var(--c-ink);

	/* Derivados de uso. Ningún estilo debería hardcodear un hex. */
	--c-link: var(--c-accent);
	--c-link-hover: var(--c-ink);
	--c-btn-bg: var(--c-accent);
	--c-btn-fg: var(--c-accent-on);
}

/**
 * Emparejado automático de texto sobre fondo.
 *
 * WordPress agrega `has-{slug}-background-color` cuando se aplica un color de
 * la paleta como fondo. Fijando acá el color de texto, cualquier bloque al que
 * le pongan fondo Accent o Surface queda legible sin que el editor tenga que
 * acordarse de cambiar el texto — y sigue siendo legible al cambiar de
 * temporada.
 *
 * Sin `!important`: si el editor elige un color de texto explícito, WordPress
 * lo emite con `!important` y gana, que es lo correcto.
 */
.has-accent-background-color {
	color: var(--c-accent-on);
}

.has-surface-background-color {
	color: var(--c-surface-on);
}

/**
 * Lo mismo para los colores de marca aplicados directo como fondo.
 *
 * Los slots estacionales están filtrados por contraste, así que Accent y
 * Surface siempre emparejan. Los swatches de marca no tienen ese filtro: se
 * pueden aplicar a cualquier bloque, en cualquier combinación. Fijar acá el
 * texto de cada uno evita el caso obvio —Borgoña de fondo con texto negro— sin
 * pedirle al editor que lo piense.
 *
 * Iris es la excepción declarada en docs/design-tokens.md: no llega a AA en
 * ninguna dirección (3.96 contra el blanco, 4.14 contra el negro). Le ponemos
 * el negro, que es el mejor de los dos, pero sigue sin ser apto para párrafos.
 */
.has-arena-background-color,
.has-azul-riviera-background-color,
.has-rosa-salina-background-color,
.has-naranja-amalfi-background-color,
.has-iris-background-color {
	color: var(--c-ink);
}

.has-verde-capri-background-color,
.has-verde-profundo-background-color,
.has-borgona-vesuvio-background-color {
	color: var(--c-base);
}

/* Los links heredan el acento, que sobre un fondo de acento sería invisible. */
.has-accent-background-color a:where(:not(.wp-element-button)) {
	color: var(--c-accent-on);
}

.has-surface-background-color a:where(:not(.wp-element-button)) {
	color: var(--c-surface-on);
}