/**
 * Paleta de Esther Perarnau — FUENTE DE VERDAD
 * ═════════════════════════════════════════════
 *
 * Se copia tal cual a cada child theme con `node copiar-comun.js`; no editar
 * las copias, que se pisan en la siguiente sincronización.
 *
 *   estherperarnau.com          → web profesional      (KBS + KPS)
 *   cursos.estherperarnau.com   → cursos               (KLS + KPS)
 *
 * ── Por qué la paleta está reducida a cuatro colores ─────────────────────
 *
 * Los tres plugins Kenzen configuran su identidad con **cuatro ejes** —acento,
 * oscuro, texto y fondo— y derivan el resto ajustando la luminosidad en HSL,
 * conservando tono y saturación. KPS ni siquiera tiene gestor propio: lee las
 * opciones de KLS si no encuentra las suyas.
 *
 * La paleta original tenía nueve colores en **cuatro familias de tono
 * distintas** (verde azulado 178–184°, oliva 99–100°, neutros cálidos 34–40°,
 * terracota 10°). Eso no cabe: de un eje solo salen tonos de su propia
 * familia. Mantenerla entera significaba que el CSS del tema y el que generan
 * los plugins pintaran cosas distintas en la misma página.
 *
 * Así que la paleta se reduce a los cuatro ejes, y el resto de tonos **son los
 * que generan los plugins**, calculados aquí con sus mismos deltas para que
 * tema y plugins digan exactamente lo mismo.
 *
 * Salen del sistema: salvia `#69908F`, oliva `#7A8A72`, salvia clara
 * `#BDC6B8`, champagne `#D8CCB7` y arena `#CDB89C`. Los dos neutros cálidos
 * se recuperan casi iguales como fondos derivados (`#F1EBDF`, `#EDE5D4`); los
 * tres verdes medios no, y esa es la pérdida real: la web queda en marfil,
 * petróleo y terracota, sin el verde intermedio.
 *
 * ── Los cuatro ejes, tal como hay que ponerlos en los ajustes ────────────
 *
 *   Acento   #C13D24     Landings KLS → Ajustes globales → Identidad
 *   Oscuro   #09494E     (y los equivalentes de KBS y KPS)
 *   Texto    #2A281F
 *   Fondo    #F6F2EA
 *
 * ⚠️ En la web principal **no habrá KLS**, y KPS cae en las opciones `kls_*`
 * cuando no encuentra las suyas. Allí hay que rellenar los campos de KPS
 * explícitamente o se quedará con el navy y el rojo de Kenzen.
 *
 * ── El acento es el terracota funcional, no el de marca ──────────────────
 *
 * `#C13D24`, no `#DD6048`. El acento de los plugins se usa en botones,
 * enlaces y texto destacado, y ahí el de marca no llega (3.60:1 sobre blanco).
 * Compensa que el tono derivado `accent_light` sale `#D94F35`, prácticamente
 * el terracota de marca: sigue apareciendo en degradados y adornos, que es
 * donde se quería.
 */

:root {

	/* ── Los cuatro ejes ──────────────────────────────────────────────── */

	--esther-acento:   #C13D24;  /* terracota funcional                   */
	--esther-oscuro:   #09494E;  /* verde petróleo                        */
	--esther-texto:    #2A281F;  /* carbón cálido                         */
	--esther-fondo:    #F6F2EA;  /* marfil cálido                         */

	/* ── Derivados: lo que generan los plugins, con sus mismos deltas ──
	 *
	 * Si alguien cambia un eje arriba, ESTOS HAY QUE RECALCULARLOS, o el
	 * tema y los plugins dejarán de coincidir sin que se note a simple
	 * vista. El delta de cada uno va anotado al lado.
	 */

	--esther-acento-claro:  #D94F35;  /* acento  +8    ≈ terracota de marca */
	--esther-acento-oscuro: #812918;  /* acento −15                         */

	--esther-oscuro-alt:    #0B5B61;  /* oscuro  +4.1                       */
	--esther-oscuro-card:   #0C646B;  /* oscuro  +6.3                       */

	--esther-texto-soft:    #3C3A2D;  /* texto   +6.3   10.25:1 sobre fondo */
	--esther-texto-muted:   #6C6750;  /* texto  +22.4    5.09:1             */
	--esther-texto-subtle:  #756F56;  /* texto  +25.5    4.52:1  ← reparado */

	--esther-fondo-alt:     #F1EBDF;  /* fondo   −3.1                       */
	--esther-fondo-ivory:   #EDE5D4;  /* fondo   −6.1                       */

	/* ── El oliva, rescatado de la paleta original ────────────────────────
	 *
	 * El verde oliva `#7A8A72` es uno de los nueve colores de la guía y se
	 * quedó fuera de los cuatro ejes, así que ningún plugin lo deriva. Se
	 * recupera aquí a mano **para la barra de menú de cursos**: era el único
	 * modo de distinguirla de la de la web profesional sin salirse de la
	 * paleta. La salvia no servía —al oscurecerla cae en 178°, que es petróleo
	 * otra vez— y el petróleo claro que se probó primero era justo eso.
	 *
	 * Los dos tonos oscuros son el mismo color bajado de luminosidad, sin
	 * tocar tono ni saturación, que es como deriva el resto de la paleta.
	 * Sobre `oscuro` el marfil da 9,20:1 y sobre `oscuro-alt`, 7,77:1.
	 */
	--esther-oliva:             #7A8A72;  /* el de la guía, sin tocar        */
	--esther-oliva-oscuro:      #3B4337;  /* barra de menú de cursos         */
	--esther-oliva-oscuro-alt:  #454E41;  /* sus desplegables, un paso más   */

	/* ⚠️ `texto-subtle` NO es el que generan los plugins.
	 *
	 * Con el delta real (+42.2) sale `#A19B7F`: 2.50:1 sobre marfil, y ese
	 * tono se usa 38 veces como color de texto —fechas, tiempo de lectura,
	 * pies de foto—. En Kenzen ese mismo delta da 5.02:1 porque su texto es
	 * un navy: el azul aporta poca luminancia y aguanta que lo aclaren. El
	 * carbón de Esther es cálido y no aguanta.
	 *
	 * Aquí se usa +25.5, el máximo que sigue siendo legible, y más abajo se
	 * repara la variable del plugin. No es un capricho de esta paleta: el
	 * valor por defecto del CSS de los plugins, `#8A8578`, ya se queda en
	 * 3.30:1 sobre marfil.
	 */

	/* ── RGB, para transparencias sin duplicar el color ───────────────── */

	--esther-acento-rgb: 193, 61, 36;
	--esther-oscuro-rgb: 9, 73, 78;
	--esther-texto-rgb:  42, 40, 31;

	/* ── Semánticos: lo que se usa en las hojas de estilo ─────────────── */

	--color-bg:            var(--esther-fondo);
	--color-bg-blanco:     #FFFFFF;
	--color-bg-alt:        var(--esther-fondo-alt);
	--color-bg-calido:     var(--esther-fondo-ivory);
	--color-bg-oscuro:     var(--esther-oscuro);
	--color-bg-oscuro-alt: var(--esther-oscuro-alt);

	--color-heading:       var(--esther-oscuro);
	--color-text:          var(--esther-texto);
	--color-text-suave:    var(--esther-texto-muted);   /* 5.09:1 */
	--color-text-sutil:    var(--esther-texto-subtle);  /* 4.52:1 */
	--color-text-inverso:  #FFFFFF;

	--color-link:          var(--esther-oscuro);
	--color-link-hover:    var(--esther-acento);

	--color-cta-bg:        var(--esther-acento);
	--color-cta-texto:     #FFFFFF;
	--color-cta-bg-hover:  var(--esther-oscuro);

	--color-borde:         rgba(var(--esther-texto-rgb), .14);  /* decorativo */
	--color-borde-campo:   #938C6D;                             /* 3.03:1 sobre marfil */
	--color-focus:         var(--esther-oscuro);
	--color-focus-ring:    rgba(var(--esther-oscuro-rgb), .22);

	--color-icono:         var(--esther-texto-muted);
	--color-icono-acento:  var(--esther-acento);

	/* ── Profundidad: ligera y cálida, nunca sombras duras ────────────── */

	--sombra:       0 10px 30px rgba(var(--esther-texto-rgb), .08);
	--sombra-suave: 0 4px 14px  rgba(var(--esther-texto-rgb), .06);
	--radio:        10px;
}

/**
 * Reparación de los tonos que los plugins derivan mal con esta paleta.
 * ────────────────────────────────────────────────────────────────────
 *
 * `:root:root` y no `:root` a propósito. Los plugins inyectan su bloque como
 * estilo en línea colgado de su propio handle, y quién queda antes en el DOM
 * depende del orden de encolado, que cambia al activar cualquier plugin. Con
 * la especificidad doble esto gana siempre, venga antes o después.
 *
 * Solo se toca lo que no cumple contraste. El resto de tonos derivados se
 * dejan tal cual los calcula el plugin: son correctos.
 */
:root:root {
	--kls-text-subtle: var(--esther-texto-subtle);
	--kls-c-subtle:    var(--esther-texto-subtle);
}