/**
 * Palette «Smeraldo e glicine».
 *
 * Si carica solo quando è scelta in Aspetto → Personalizza → Palette colori,
 * ed è l'ultimo foglio in coda: riassegna i valori dei token che il tema usa
 * già, così template e contenuti restano identici e cambia solo il colore.
 * Togliendo la scelta torna la palette originale (carta e arancio).
 *
 * Il principio: lo smeraldo è un fondo, il glicine è il colore delle azioni.
 *
 * Contrasti misurati (WCAG 2.x):
 *   inchiostro su carta .................. 15,6:1
 *   inchiostro-tenue su carta .............  9,0:1
 *   glicine-profondo su carta .............  7,0:1  (testo, link, icone)
 *   carta su glicine-profondo .............  7,0:1  (testo dei pulsanti)
 *   glicine-profondo su glicine-velo ......  6,3:1
 *   carta su smeraldo-notte ............... 16,4:1
 *   testo-su-scuro-tenue su smeraldo-notte  10,4:1
 *   glicine su smeraldo-notte .............  9,8:1  (link e pulsanti su scuro)
 *   inchiostro su glicine .................  9,4:1  (testo dei pulsanti su scuro)
 * Il glicine chiaro non va mai su carta: lì sta a 2,6:1.
 *
 * @package nicole-michielin
 */

/*--------------------------------------------------------------
# Token — riserva sRGB, poi OKLCH dove il browser lo capisce
--------------------------------------------------------------*/

:root {
	--carta: #fbf4ed;
	--carta-2: #f3e5da;
	--inchiostro: #002119;
	--inchiostro-tenue: #314841;
	--smeraldo-notte: #001b17;
	--smeraldo-2: #023129;
	--smeraldo-medio: #023c32;
	--smeraldo-chiaro: #04614d;
	--smeraldo-luce: #04896a;
	--smeraldo-riflesso: #a3e9cd;
	--glicine: #e4adf1;
	--glicine-medio: #c57eda;
	--glicine-profondo: #8323a5;
	--glicine-profondo-hover: #640981;
	--glicine-velo: #f5e5f8;
	--testo-su-scuro-tenue: #b1cbc3;
}

@supports (color: oklch(0% 0 0)) {
	:root {
		--carta: oklch(97% 0.012 70);
		--carta-2: oklch(93% 0.022 60);
		--inchiostro: oklch(22% 0.045 175);
		--inchiostro-tenue: oklch(38% 0.03 175);
		--smeraldo-notte: oklch(20% 0.05 180);
		--smeraldo-2: oklch(28% 0.08 178);
		--smeraldo-medio: oklch(32% 0.09 177);
		--smeraldo-chiaro: oklch(44% 0.12 172);
		--smeraldo-luce: oklch(56% 0.14 170);
		--smeraldo-riflesso: oklch(88% 0.08 168);
		--glicine: oklch(82% 0.11 320);
		--glicine-medio: oklch(70% 0.15 318);
		--glicine-profondo: oklch(47% 0.2 315);
		--glicine-profondo-hover: oklch(38% 0.18 315);
		--glicine-velo: oklch(94% 0.03 320);
		--testo-su-scuro-tenue: oklch(82% 0.03 175);
	}
}

/*--------------------------------------------------------------
# Mappatura sui nomi già usati dal tema
--------------------------------------------------------------*/

:root {
	--paper: var(--carta);
	--paper-2: var(--carta-2);
	--paper-card: color-mix(in oklch, white 45%, transparent);
	--ink: var(--inchiostro);
	--muted: var(--inchiostro-tenue);
	--accent: var(--glicine-profondo);
	--accent-wash: var(--glicine-velo);
	--line: color-mix(in oklch, var(--inchiostro) 16%, transparent);
	--line-strong: color-mix(in oklch, var(--inchiostro) 32%, transparent);

	--dark: var(--smeraldo-notte);
	--dark-2: var(--smeraldo-2);
	--on-dark: var(--carta);
	--muted-dark: var(--testo-su-scuro-tenue);
	--accent-dark: var(--glicine);
	--line-dark: color-mix(in oklch, var(--carta) 18%, transparent);
	--line-dark-strong: color-mix(in oklch, var(--carta) 34%, transparent);

	--shadow-card: 0 16px 40px -28px color-mix(in oklch, var(--inchiostro) 45%, transparent);
	--shadow-float: 0 40px 90px -45px color-mix(in oklch, var(--inchiostro) 55%, transparent);

	/* Niente aloni sulla carta: tinti di glicine e smeraldo sporcavano il
	   fondo, e quello della pagina creava una giuntura con la barra in alto.
	   La luce in questa palette sta solo nel gradiente smeraldo. */
	--glow-warm: transparent;
	--glow-cool: transparent;
	--glow-warm-dark: transparent;
	--glow-cool-dark: transparent;

	/* La luce arriva sempre dall'angolo in alto a destra; il testo sta a
	   sinistra, sulla parte scura. */
	--gradiente-smeraldo:
		radial-gradient(35% 55% at 92% 6%, color-mix(in oklch, var(--smeraldo-riflesso) 50%, transparent) 0%, transparent 60%),
		radial-gradient(70% 110% at 90% 8%, var(--smeraldo-luce) 0%, color-mix(in oklch, var(--smeraldo-chiaro) 65%, transparent) 35%, transparent 72%),
		linear-gradient(135deg, var(--smeraldo-notte) 0%, var(--smeraldo-2) 45%, color-mix(in oklch, var(--smeraldo-chiaro) 90%, var(--smeraldo-notte)) 100%);
}

/* Su schermo stretto il testo occupa tutta la larghezza e finirebbe sopra
   la zona chiara: si abbassa il riflesso invece di spostare il testo. */
@media (max-width: 40rem) {
	:root {
		--gradiente-smeraldo:
			radial-gradient(35% 40% at 96% 2%, color-mix(in oklch, var(--smeraldo-riflesso) 18%, transparent) 0%, transparent 60%),
			radial-gradient(70% 70% at 96% 4%, color-mix(in oklch, var(--smeraldo-luce) 60%, transparent) 0%, color-mix(in oklch, var(--smeraldo-chiaro) 40%, transparent) 35%, transparent 72%),
			linear-gradient(135deg, var(--smeraldo-notte) 0%, var(--smeraldo-2) 55%, var(--smeraldo-medio) 100%);
	}
}

/*--------------------------------------------------------------
# Ritmo della home
#
# Quattro fasce scure di fila sullo stesso gradiente si ripetevano come una
# carta da parati, e invito finale e piè di pagina si fondevano in un blocco
# solo. Qui ogni fascia ha un ruolo diverso:
#   metodo ............ smeraldo illuminato (l'unico con la luce)
#   verifiche ......... smeraldo quieto, senza punto luce
#   invito finale ..... glicine velo, chiaro: è l'azione, non un fondo
#   piè di pagina ..... smeraldo notte piatto, la base della pagina
--------------------------------------------------------------*/

.section--dark,
.site-footer {
	background-color: var(--smeraldo-notte);
	background-image: linear-gradient(160deg, var(--smeraldo-notte) 0%, var(--smeraldo-2) 100%);
}

.method-section {
	background-image: var(--gradiente-smeraldo);
}

/* L'intestazione centrata cade verso la luce del gradiente, dove glicine
   e testo tenue scendevano a 4,3:1 su telefono. Qui salgono di un tono:
   glicine velo per l'etichetta (6,3:1), carta per l'introduzione (7:1). */
.method-section .section-head .u-label {
	color: var(--glicine-velo);
}

.method-section .section-head__text {
	color: var(--carta);
}

.site-footer {
	background-image: none;
}

/* Gli aloni delle fasce scure si spengono: la luce, dove c'è, è già nel
   gradiente, e due luci nella stessa sezione si contraddirebbero. */
.section--dark.section-tone::before {
	background: none;
}

.section--dark {
	--bg-card: color-mix(in oklch, var(--carta) 6%, transparent);
}

/*--------------------------------------------------------------
# Invito finale su glicine velo
# Nel markup resta una fascia scura: qui si riassegnano i ruoli a quelli
# chiari, così tutti i componenti interni seguono senza regole proprie.
#   inchiostro su glicine-velo ........ 14,2:1
#   inchiostro-tenue su glicine-velo ..  8,2:1
#   glicine-profondo su glicine-velo ..  6,3:1
--------------------------------------------------------------*/

.closing.section--dark {
	--bg: var(--glicine-velo);
	--bg-card: color-mix(in oklch, white 50%, transparent);
	--fg: var(--inchiostro);
	--fg-muted: var(--inchiostro-tenue);
	--brand: var(--glicine-profondo);
	--rule: color-mix(in oklch, var(--glicine-profondo) 22%, transparent);
	--rule-strong: color-mix(in oklch, var(--glicine-profondo) 40%, transparent);

	background-color: var(--glicine-velo);
	background-image: none;
	color: var(--inchiostro);
}

.closing.section--dark :focus-visible {
	outline-color: var(--glicine-profondo);
}

.closing .btn--invert {
	background-color: var(--glicine-profondo);
	color: var(--carta);
}

.closing .btn--invert:hover,
.closing .btn--invert:focus-visible {
	background-color: var(--glicine-profondo-hover);
	color: var(--carta);
}

.closing .btn--invert:focus-visible {
	box-shadow: 0 0 0 3px var(--glicine-velo);
}

.closing a:not([class*="btn"]):hover {
	color: var(--glicine-profondo-hover);
}

/*--------------------------------------------------------------
# Riquadro della norma (28 giugno 2025)
# I suoi colori erano pensati per un fondo scuro e finivano chiari su
# carta chiara. Qui diventa una scheda sabbia, senza bordo.
#   glicine-profondo su carta-2 .......  6,2:1
#   inchiostro su carta-2 ............. 13,8:1
#   inchiostro-tenue su carta-2 .......  8,0:1
--------------------------------------------------------------*/

.law__grid {
	background-color: var(--carta-2);
	border-color: transparent;
}

.law__date {
	color: var(--glicine-profondo);
}

.law__title {
	color: var(--inchiostro);
}

.law__text {
	color: var(--inchiostro-tenue);
}

.law :focus-visible {
	outline-color: var(--glicine-profondo);
}

/*--------------------------------------------------------------
# Intestazione
# Sempre carta piena, mai trasparente: sopra le fasce verdi la carta
# velata diventava grigio-verde, e in cima si confondeva con l'apertura.
# Scorrendo compare solo la riga sottile.
--------------------------------------------------------------*/

.site::before {
	content: none;
}

.site-header,
.site-header.is-scrolled {
	background-color: var(--carta);
	backdrop-filter: none;
}

.site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--line);
}

.main-nav .menu-item-cta a {
	background-color: var(--glicine-profondo);
	color: var(--carta);
}

.main-nav .menu-item-cta a:hover,
.main-nav .menu-item-cta a:focus-visible {
	background-color: var(--glicine-profondo-hover);
	color: var(--carta);
}

/*--------------------------------------------------------------
# Pulsanti — il glicine è il colore delle azioni
--------------------------------------------------------------*/

.btn--primary {
	background-color: var(--glicine-profondo);
	color: var(--carta);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--glicine-profondo-hover);
	color: var(--carta);
}

.btn--ghost {
	border: 2px solid currentColor;
	color: var(--glicine-profondo);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: currentColor;
	color: var(--glicine-profondo-hover);
}

/* Su smeraldo il pieno è il glicine chiaro, con il testo in inchiostro. */
.btn--invert,
.section--dark .btn--primary,
.site-footer .btn--primary {
	background-color: var(--glicine);
	color: var(--inchiostro);
}

.btn--invert:hover,
.btn--invert:focus-visible,
.section--dark .btn--primary:hover,
.section--dark .btn--primary:focus-visible,
.site-footer .btn--primary:hover,
.site-footer .btn--primary:focus-visible {
	background-color: var(--carta);
	color: var(--inchiostro);
}

.btn--invert:focus-visible {
	box-shadow: 0 0 0 3px var(--smeraldo-notte);
}

.section--dark .btn--ghost,
.site-footer .btn--ghost {
	color: var(--glicine);
}

.section--dark .btn--ghost:hover,
.section--dark .btn--ghost:focus-visible,
.site-footer .btn--ghost:hover,
.site-footer .btn--ghost:focus-visible {
	color: var(--carta);
}

/*--------------------------------------------------------------
# Link e focus
--------------------------------------------------------------*/

a:hover {
	color: var(--glicine-profondo-hover);
}

.section--dark:not(.closing) a:not([class*="btn"]):hover,
.site-footer a:not([class*="btn"]):hover {
	color: var(--carta);
}

:focus-visible {
	outline-color: var(--glicine-profondo);
}

.section--dark:not(.closing) :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--glicine);
}