/*
 * Design token del tema.
 *
 * FONTE DEI VALORI
 * - Colori e font: Elementor > Impostazioni sito > Colori globali / Font globali.
 *   Qui ci sono solo alias verso le variabili che Elementor stampa da sé.
 *   Per cambiare un colore si cambia in Elementor, mai in questo file.
 * - Larghezza e padding del contenitore: Elementor > Impostazioni sito > Layout.
 *   Arrivano da inc/design-tokens.php, che sovrascrive i valori di riserva qui sotto.
 * - Scala tipografica, spaziature, raggi: vivono solo qui. In Elementor si usano
 *   con le classi di helpers.css e styles.css (.title-big, .section-default-padding…).
 * - Breakpoint: quelli di Elementor (mobile fino a 767px, tablet fino a 1024px).
 *   Le media query CSS non accettano variabili: nei file sono scritti in chiaro.
 *
 * PERCHÉ body E NON :root
 * Elementor definisce le sue variabili globali sulla classe del Kit, che sta
 * su <body>. Un alias dichiarato in :root non le vedrebbe e resterebbe vuoto.
 * Per questo gli alias di colori e font sono su body; il resto è in :root.
 */

body {
	/* Colori: alias dei colori globali di Elementor ---------------------- */
	--primary: var(--e-global-color-primary);
	--secondary: var(--e-global-color-secondary);
	--text-color: var(--e-global-color-text);
	--accent: var(--e-global-color-accent);

	/* Colori personalizzati del Kit (ID fissi: primarydark, secondarydark, lightbg).
	   Se il Kit non li definisce si calcolano dal colore base. */
	--primary-dark: var(--e-global-color-primarydark, oklch(from var(--primary) calc(l * 0.85) c h));
	--secondary-dark: var(--e-global-color-secondarydark, oklch(from var(--secondary) calc(l * 0.85) c h));
	--gray-light: var(--e-global-color-lightbg, #f7f7f5);

	/* Superficie scura: menu a tutto schermo, footer, sezioni .bg-dark. */
	--surface-dark: var(--accent);
	--on-dark: #fff;

	/* Grigi neutri, indipendenti dal brand. */
	--gray: #757474;
	--gray-dark: #4a4a4a;

	/* Font: alias dei font globali di Elementor --------------------------- */
	--base-font-family: var(--e-global-typography-text-font-family, system-ui), sans-serif;
	--header-font-family: var(--e-global-typography-primary-font-family, system-ui), sans-serif;
	--button-font-family: var(--e-global-typography-accent-font-family, system-ui), sans-serif;

	/* Swiper: colori degli slider di Elementor e dei widget Floriani. */
	--swiper-theme-color: var(--primary);
	--swiper-navigation-color: var(--secondary);
}

:root {
	--base-font-size: 16px;

	/* Scala tipografica fluida (min a 320px, max a 1600px) ---------------- */
	--text-12-14: clamp(12px, 10px + 0.3125vw, 14px);
	--text-12-16: clamp(12px, 11px + 0.3125vw, 16px);
	--text-14-16: clamp(14px, 12px + 0.3125vw, 16px);
	--text-14-18: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);
	--text-16-20: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);
	--text-18-25: clamp(18px, 16.25px + 0.5469vw, 25px);
	--text-20-30: clamp(20px, 17.5px + 0.7813vw, 30px);
	--text-20-35: clamp(20px, 16.25px + 1.1719vw, 35px);
	--text-25-45: clamp(25px, 20px + 1.5vw, 45px);
	--text-30-50: clamp(30px, 25px + 1.5625vw, 50px);
	--text-30-60: clamp(30px, 22.5px + 2.3438vw, 60px);
	--text-42-80: clamp(42px, 32.5px + 2.9688vw, 80px);
	--text-48-100: clamp(48px, 35px + 4.0625vw, 100px);

	/* Nomi d'uso: sono questi da usare nel CSS. */
	--text-xs: var(--text-12-14);
	--text-sm: var(--text-12-16);
	--text-base: var(--text-14-16);
	--text-lg: var(--text-16-20);
	--text-xl: var(--text-18-25);
	--text-2xl: var(--text-20-30);
	--text-3xl: var(--text-20-35);
	--text-4xl: var(--text-30-50);
	--text-5xl: var(--text-30-60);
	--text-6xl: var(--text-42-80);
	--text-7xl: var(--text-48-100);

	--title-base: var(--text-lg);
	--title-big: var(--text-3xl);
	--title-bigger: var(--text-4xl);

	/* Interlinea ---------------------------------------------------------- */
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* Spaziature fluide --------------------------------------------------- */
	--space-xs: clamp(10px, 8.75px + 0.3906vw, 15px);
	--space-1: clamp(15px, 12.5px + 0.7813vw, 25px);
	--space-2: clamp(25px, 18.75px + 1.9531vw, 50px);
	--space-3: clamp(50px, 37.5px + 3.9063vw, 100px);
	--space-4: clamp(75px, 56.25px + 5.8594vw, 150px);
	--section-padding-block: var(--space-4);

	/* Raggi --------------------------------------------------------------- */
	--radius-sm: 1rem;
	--radius-lg: 50px;
	--radius: var(--radius-lg);
	--input-radius: 0;

	/* Layout: valori di riserva, quelli veri arrivano dal Kit Elementor. */
	--container-width: 1200px;
	--container-padding-inline: 30px;
	--header-height: 100px;

	/* Swiper: forma dei pallini di paginazione --------------------------- */
	--swiper-pagination-bullet-inactive-color: var(--gray);
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 0.4rem;
	--swiper-pagination-bullet-width: 1.4rem;
	--swiper-pagination-bullet-height: 0.6rem;
	--swiper-pagination-bullet-border-radius: 5px;

	/* Aree sicure dei dispositivi con notch. */
	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
}