/*
 * Pelle BRASH — The Brash.
 *
 * The Brash vende un pettine per la laminazione delle ciglia: un oggetto solo,
 * di acciaio, venduto a professioniste. La pelle segue quello che il marchio fa
 * gia' da se': fondo chiaro, inchiostro caldo quasi nero, e un giallo acido che
 * compare poco e quando compare grida. Il giallo NON e' il colore dei pulsanti:
 * e' il colore delle cose che cambiano - lo sconto, la promozione, il badge. Un
 * pulsante giallo su fondo chiaro non si legge, e soprattutto smette di
 * segnalare qualcosa nel momento in cui e' ovunque.
 *
 * I valori arrivano dai Colori globali di Elementor, quindi la stessa pelle su
 * un altro Kit cambia colore da sola. I ripieghi scritti qui sotto NON sono
 * segnaposto neutri come in Nenella: la palette di questo sito e' decisa e
 * verificata sul Kit 6 dello staging (Principale #2C2528, Secondario #B8A9AF,
 * Testo #2C2528, In risalto #E4EE06). Servono a far somigliare il sito a se
 * stesso anche se un giorno il Kit venisse svuotato per errore.
 *
 * Restano fuori di proposito i colori personalizzati del Kit - il magenta
 * #E61158 dell'header e i due verdi. Sono identificati da id generati
 * (--e-global-color-625b0e9) che valgono per QUESTO Kit e per nessun altro:
 * scriverli qui incollerebbe la pelle a un singolo database.
 *
 * Regola che vale per tutte le pelli: qui si toccano SOLO i --fm-theme-*, che
 * sono i ripieghi in fondo alla catena. Definire qui un --fm-<componente>-* lo
 * scriverebbe sull'elemento e batterebbe il valore che il Kit mette sul body,
 * cioe' disattiverebbe il controllo dell'utente in Elementor.
 *
 * Nota di scoping: i token stanno sul body e non su :root, perche' i
 * --e-global-color-* di Elementor esistono sul body. Su :root risolverebbero a
 * valori invalidi e si cadrebbe nei ripieghi.
 *
 * Il selettore NON usa :where(). E' la lezione pagata due volte su Atelier fra
 * la 3.6.47 e la 3.6.48: il CSS dei moduli viene emesso anche come <style>
 * inline piu' in basso nella pagina, e fra regole di pari specificita' vince
 * l'ultima, quindi a specificita' zero la base scavalca la pelle - senza
 * nessun errore, solo i colori sbagliati.
 *
 * Il foglio e' autosufficiente: dichiara anche i valori base, perche' il CSS
 * del carosello galleria - dove i valori base vivono da sempre - esce solo
 * dove quel modulo lavora.
 */

body.fm-theme-brash,
[class*="fm-wpgc-theme-brash"] {

	/*
	 * Superfici. Il bianco pieno e non un panna: le foto del prodotto sono
	 * scontornate su bianco e qualunque tinta sotto si vedrebbe come un alone.
	 * La superficie morbida usa il Secondario, che e' un malva grigiato e regge
	 * il testo scuro senza chiedere un secondo colore.
	 */
	--fm-theme-surface: #ffffff;
	--fm-theme-surface-soft: color-mix(in srgb, var(--e-global-color-secondary, #B8A9AF) 22%, #fff);

	/* Testo. */
	--fm-theme-ink: var(--e-global-color-text, #2C2528);
	--fm-theme-muted: color-mix(in srgb, var(--e-global-color-text, #2C2528) 58%, #fff);
	--fm-theme-line: color-mix(in srgb, var(--e-global-color-text, #2C2528) 16%, transparent);

	/*
	 * Azione. Inchiostro pieno, testo bianco, e al passaggio si scurisce
	 * invece di schiarirsi: su fondo chiaro uno stato hover piu' chiaro
	 * sembra un pulsante che si spegne.
	 */
	--fm-theme-action: var(--e-global-color-primary, #2C2528);
	--fm-theme-action-text: #ffffff;
	--fm-theme-action-hover: color-mix(in srgb, var(--e-global-color-primary, #2C2528) 84%, #000);
	--fm-theme-button: var(--e-global-color-primary, #2C2528);
	--fm-theme-button-text: #ffffff;

	/*
	 * Quattro pixel, che e' il raggio gia' usato dal Kit di questo sito nella
	 * maggior parte dei suoi bottoni. La pelle non e' il posto dove cambiare
	 * idea sul disegno: e' il posto dove smettere di ripeterlo a mano.
	 */
	--fm-theme-radius: 4px;

	/* Pannelli e velo dei drawer. */
	--fm-theme-panel: #ffffff;
	--fm-theme-panel-ink: var(--e-global-color-text, #2C2528);
	--fm-theme-overlay: color-mix(in srgb, var(--e-global-color-text, #2C2528) 64%, transparent);

	/*
	 * Etichette. Qui vive il giallo: e' l'unico colore vivo della pelle ed e'
	 * riservato agli stati che cambiano. Sul giallo il testo va scuro, non
	 * bianco - #E4EE06 con testo bianco sta sotto ogni soglia di contrasto e
	 * diventa illeggibile proprio sull'unica cosa che doveva farsi notare.
	 */
	--fm-theme-badge: var(--e-global-color-accent, #E4EE06);
	--fm-theme-badge-text: var(--e-global-color-text, #2C2528);
	--fm-theme-badge-soft: color-mix(in srgb, var(--e-global-color-secondary, #B8A9AF) 28%, #fff);
	--fm-theme-badge-soft-text: var(--e-global-color-text, #2C2528);
	--fm-theme-badge-sale: var(--e-global-color-accent, #E4EE06);
	--fm-theme-badge-sale-text: var(--e-global-color-text, #2C2528);

	/*
	 * Il carattere dei componenti segue quello del corpo del sito, che il Kit
	 * imposta a Hepta Slab. Non si nomina il font qui: nominarlo vorrebbe dire
	 * che cambiare carattere dal Kit non basta piu'.
	 */
	--fm-theme-font: inherit;
}