/**
 * GOYN — design token
 *
 * Fonte: src/styles.css:1-15 del progetto React originale.
 *
 * Questo file NON contiene regole di stile, soltanto variabili. È il punto unico
 * in cui cambiare la palette e le costanti del progetto.
 *
 * ⚠️ I dieci colori e le quattro famiglie sono registrati ANCHE come Global
 *    Colors / Global Fonts nel Kit di Elementor. Non da codice: sono scritti nel
 *    database del sito (impostazioni del documento Kit), perché scriverli da un
 *    hook sovrascriverebbe a ogni caricamento le scelte fatte dal cliente
 *    nell'editor.
 *
 *    Le variabili qui sotto restano la fonte di verità per il CSS scritto a
 *    mano; i Global servono ai controlli dell'editor. Corrispondenza:
 *
 *      --goyn-petrol       → Colore globale "GOYN Petrol"      (primary)
 *      --goyn-peach        → "GOYN Pesca"                      (secondary)
 *      --goyn-ink          → "GOYN Inchiostro"                 (text)
 *      --goyn-rust         → "GOYN Ruggine"                    (accent)
 *      --goyn-petrol-deep  → "GOYN Petrol profondo"   var: --e-global-color-goynpetroldeep
 *      --goyn-petrol-abyss → "GOYN Petrol abisso"     var: --e-global-color-goynpetrolabyss
 *      --goyn-cream        → "GOYN Crema"             var: --e-global-color-goyncream
 *      --goyn-cream-2      → "GOYN Crema chiara"      var: --e-global-color-goyncreamtwo
 *      --goyn-gold         → "GOYN Oro"               var: --e-global-color-goyngold
 *      --goyn-muted        → "GOYN Grigio spento"     var: --e-global-color-goynmuted
 *
 *      --goyn-font-display → Font globale "GOYN Titoli (Anton)"     (primary)
 *      --goyn-font-label   → "GOYN Etichette (Oswald)"              (secondary)
 *      --goyn-font-body    → "GOYN Testo (Barlow)"                  (text)
 *      --goyn-font-accent  → "GOYN Accento (Playfair)"              (accent)
 *
 *    I due elenchi vanno tenuti allineati a mano: se cambi un valore qui,
 *    aggiornalo in Elementor → Impostazioni sito → Colori globali.
 */

:root {
	/* ---------- palette ---------- */
	--goyn-petrol: #1f535d;
	--goyn-petrol-deep: #163e46;
	--goyn-petrol-abyss: #0c2429;
	--goyn-cream: #e9e5d9;
	--goyn-cream-2: #efebe0;
	--goyn-peach: #e8c39f;
	--goyn-gold: #d3ab63;
	--goyn-rust: #c0603c;
	--goyn-ink: #1a2c30;
	--goyn-muted: #5e6e6e;

	/* ---------- palette: varianti trasparenti ricorrenti ----------
	   Nell'originale erano scritte a mano come rgba() in decine di punti.
	   Centralizzarle evita che divergano. */
	--goyn-cream-90: rgba(233, 229, 217, 0.9);
	--goyn-cream-85: rgba(233, 229, 217, 0.85);
	--goyn-cream-72: rgba(233, 229, 217, 0.72);
	--goyn-cream-50: rgba(233, 229, 217, 0.5);
	--goyn-cream-12: rgba(233, 229, 217, 0.12);
	--goyn-cream-05: rgba(233, 229, 217, 0.05);
	--goyn-petrol-22: rgba(31, 83, 93, 0.22);
	--goyn-petrol-16: rgba(31, 83, 93, 0.16);
	--goyn-petrol-14: rgba(31, 83, 93, 0.14);
	--goyn-peach-40: rgba(232, 195, 159, 0.4);
	--goyn-peach-16: rgba(232, 195, 159, 0.16);
	--goyn-gold-22: rgba(211, 171, 99, 0.22);
	--goyn-gold-35: rgba(211, 171, 99, 0.35);

	/* ---------- tipografia ---------- */
	--goyn-font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
	--goyn-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--goyn-font-label: 'Oswald', 'Barlow Condensed', system-ui, sans-serif;
	--goyn-font-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;

	/* ---------- spaziature e misure ---------- */
	--goyn-pad: clamp(22px, 5vw, 80px); /* padding orizzontale di sezione */
	--goyn-wrap: 1360px; /* larghezza massima contenuto */
	--goyn-wrap-narrow: 1240px;

	/* ---------- movimento ---------- */
	--goyn-ease: cubic-bezier(0.22, 1, 0.36, 1); /* easing dominante, ~90% del sito */
	--goyn-ease-curtain: cubic-bezier(0.76, 0, 0.24, 1); /* sipario intro, menu mobile */
	--goyn-dur-fast: 0.35s;
	--goyn-dur: 0.5s;
	--goyn-dur-slow: 0.9s;

	/* ---------- z-index: scala dichiarata ----------
	   Nell'originale erano numeri sparsi nel JSX. Qui sono ordinati e commentati,
	   così un nuovo overlay non finisce per caso sopra o sotto quello sbagliato.
	   NOTA: i pannelli dell'editor Elementor stanno oltre 100000, quindi non
	   entrano in conflitto con questa scala. */
	--goyn-z-sticky: 50; /* barra checkout */
	--goyn-z-header: 60; /* header fissa */
	--goyn-z-progress: 70; /* barra di avanzamento pagina */
	--goyn-z-drawer-veil: 90; /* velo del pannello carrello */
	--goyn-z-drawer: 95; /* pannello carrello, overlay ricerca */
	--goyn-z-intro: 200; /* sipario d'apertura */
	--goyn-z-grain: 9998; /* grana */
	--goyn-z-cursor: 9999; /* cursore custom */
}

/**
 * Breakpoint — documentati qui, applicati nei singoli fogli.
 *
 * Le media query non possono usare le variabili CSS, quindi i valori sono
 * ripetuti letteralmente nei file. Questa è la tabella di riferimento:
 *
 *   ≤ 1080px  tablet orizzontale / laptop piccolo
 *   ≤  860px  mobile (soglia usata ANCHE da JavaScript, vedi assets/js/*.js)
 *   ≤  560px  mobile piccolo
 *
 * ⚠️ Non coincidono con i default di Elementor (1024 / 767). Vanno impostati
 *    come breakpoint personalizzati in Elementor → Impostazioni sito → Layout
 *    → Breakpoint. Procedura in docs/INSTALLATION.md.
 *
 * ⚠️ 860px è replicata in JavaScript (`GOYN.MOBILE`): se cambi il valore,
 *    cambialo in entrambi i posti o il manifesto e la navigazione commutano
 *    in punti diversi.
 */