/*
 * Ponte verso i plugin TWC.
 *
 * I plugin leggono le variabili --twc-*. Qui le colleghiamo ai token del tema,
 * senza ricopiare nessun valore: cambiando palette in una variante di stile,
 * area account e prenotazioni seguono da sole.
 *
 * Perché in un file CSS e non in theme.json: WordPress riscrive le proprietà
 * di settings.custom con nomi propri (--wp--custom--*), quindi da theme.json
 * non si otterrebbe mai una variabile chiamata --twc-accent.
 *
 * Cascata: ripiego dei plugin :where(:root) [0] < questo file :root [0,1,0]
 * < scelta esplicita del ristoratore (inline sull'elemento). L'ultimo livello
 * deve vincere: se il ristoratore sceglie un colore, deve vederlo.
 * Per questo qui non c'è e non ci deve essere nessun !important.
 */

:root {
	/* Accento */
	--twc-accent: var(--wp--preset--color--accent-1);
	--twc-accent-soft: color-mix(in srgb, var(--wp--preset--color--accent-1) 14%, transparent);
	--twc-accent-glow: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);

	/* Sfondi */
	--twc-bg: var(--wp--preset--color--base);
	--twc-surface: var(--wp--preset--color--base);
	--twc-surface-alt: var(--wp--preset--color--base-2);

	/* Testo */
	--twc-ink: var(--wp--preset--color--contrast);
	--twc-muted: var(--wp--preset--color--contrast-2);

	/* Linee */
	--twc-line: var(--wp--preset--color--border);
	--twc-line-soft: color-mix(in srgb, var(--wp--preset--color--border) 55%, transparent);

	/* Stati */
	--twc-ok: var(--wp--custom--stato--ok);
	--twc-danger: var(--wp--custom--stato--pericolo);

	/* Forme */
	--twc-radius: var(--wp--custom--raggio--grande);
	--twc-radius-sm: var(--wp--custom--raggio--medio);

	/* Area minima cliccabile: mai sotto i 44px (WCAG 2.2). */
	--twc-tap: 44px;

	/*
	 * Dalla 0.10.0. Le variabili qui sopra non cambiano nome né valore:
	 * queste si aggiungono, per i plugin che vogliono seguire il tema anche
	 * in quello che prima dovevano inventarsi da soli. Un plugin le usa
	 * sempre con il suo ripiego, var(--twc-shadow, …): su un tema che non
	 * le definisce resta com'era.
	 */

	/* La scritta sopra un fondo nel colore dell'accento (pulsanti,
	 * cartellini) e l'accento al passaggio del mouse. */
	--twc-on-accent: var(--wp--preset--color--on-accent);
	--twc-accent-hover: var(--wp--preset--color--accent-2);
	--twc-detail: var(--wp--preset--color--accent-3);

	/* Superfici: la scheda che sta sopra la pagina e il velo dietro una
	 * finestra aperta. */
	--twc-surface-raised: var(--wp--preset--color--base);
	--twc-overlay: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);

	/* Il bordo dei campi da riempire: lo stesso dei moduli qui sotto, con
	 * un nome suo per chi lo vuole usare altrove (almeno 3:1). */
	--twc-line-strong: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, var(--wp--preset--color--base));

	/* Stati, in versione tenue per i fondi dei messaggi. */
	--twc-ok-soft: color-mix(in srgb, var(--wp--custom--stato--ok) 12%, transparent);
	--twc-danger-soft: color-mix(in srgb, var(--wp--custom--stato--pericolo) 12%, transparent);

	/* Anello del fuoco: il colore del testo, che si legge sul fondo. */
	--twc-focus: var(--wp--preset--color--contrast);

	/* Ombre: tre altezze, dalla riga appena staccata alla finestra. */
	--twc-shadow-sm: 0 1px 2px rgb(0 0 0 / 6%), 0 1px 1px rgb(0 0 0 / 4%);
	--twc-shadow: 0 6px 18px -6px rgb(0 0 0 / 16%), 0 2px 4px rgb(0 0 0 / 5%);
	--twc-shadow-lg: 0 18px 44px -14px rgb(0 0 0 / 26%);

	/* Altre forme: l'angolo piccolo e la pillola. */
	--twc-radius-xs: var(--wp--custom--raggio--piccolo);
	--twc-radius-pill: 999px;

	/* Caratteri: quello del testo e quello dei titoli del tema. */
	--twc-font-body: var(--wp--preset--font-family--body);
	--twc-font-heading: var(--wp--preset--font-family--heading);

	/* La durata dei movimenti. Chi ha chiesto meno animazioni la vede
	 * azzerata dal tema (style.css, prefers-reduced-motion). */
	--twc-transition: var(--wp--custom--transizione, 180ms ease);
}

/*
 * Il bordo dei campi dei moduli.
 *
 * Il bordo della palette è un filo leggero, giusto per separare le
 * sezioni: attorno a un campo da riempire non basta, perché il bordo è
 * l'unica cosa che dice "qui si scrive" (WCAG 1.4.11, almeno 3:1). Sui
 * campi la stessa variabile diventa più scura, mescolata dal colore del
 * testo: i plugin non cambiano, e il campo si vede in ogni palette.
 */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
	--twc-line: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, var(--wp--preset--color--base));
}

/*
 * color-mix() non è supportato dai browser più vecchi. Se in un tema serve
 * coprirli, si sostituiscono le tre righe qui sopra con valori espliciti
 * presi dalla palette, non con un secondo blocco :root.
 */