/*
 * Design token di Operazione Nostalgia.
 *
 * Ponte con Elementor: i colori e i font si decidono nel kit (Impostazioni del sito).
 * Questo è l'unico file che nomina le variabili --e-global-*: il valore dopo la virgola
 * è quello del prototipo e vale solo se il kit non c'è.
 * Sta su body e non su :root perché Elementor dichiara le sue variabili su .elementor-kit-N,
 * che è una classe del body: su :root il ponte leggerebbe sempre la riserva.
 */

body {
	/* Colori di brand (Global Colors del kit) */
	--on-green: var(--e-global-color-primary, #008d33);
	--on-black: var(--e-global-color-secondary, #0e0e0e);
	--on-ink: var(--e-global-color-text, #171717);
	--on-green-ink: var(--e-global-color-on_verde_inchiostro, #0a5a26);
	--on-paper: var(--e-global-color-on_carta, #f1efe8);
	--on-paper-2: var(--e-global-color-on_carta2, #e9e6dd);
	--on-white: var(--e-global-color-on_bianco, #fff);
	--on-ink-2: var(--e-global-color-on_inchiostro2, #5e5c55);
	--on-night: var(--e-global-color-on_notte, #070605);
	--on-ink-inv: var(--e-global-color-on_testo_foto, #e6e3da);
	--on-ink-inv-2: var(--e-global-color-on_testo2_nero, #cfcbc0);
	--on-muted: var(--e-global-color-on_spento, #a7a59e);
	--on-cream: var(--e-global-color-on_crema, #f3eddd);

	/* Famiglie (Global Fonts del kit) */
	--on-font-display: var(--e-global-typography-secondary-font-family, "Tusker Grotesk 7700"), "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
	--on-font-cond: var(--e-global-typography-primary-font-family, "Tusker Grotesk 4700"), "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
	--on-font-text: var(--e-global-typography-text-font-family, "Archivo"), system-ui, -apple-system, "Segoe UI", sans-serif;
	--on-font-tv: "VT323", ui-monospace, "Courier New", monospace;
	--on-font-marker: "Permanent Marker", "Comic Sans MS", cursive;
}

:root {
	/* Colori decorativi del mondo ON: non sono di brand, non vanno nel kit */
	--on-line: rgba(14, 14, 14, .14);
	--on-line-inv: rgba(255, 255, 255, .18);
	--on-placeholder: #dad6cb;
	--on-card-back: #efe6cf;
	--on-marker-blue: #243a8a;
	--on-marker-red: #b3261e;
	--on-tv-green: #00ff41;
	--on-tv-yellow: #ffd400;
	--on-tv-cyan: #00e5ff;
	--on-tv-magenta: #ff5fd7;
	--on-tv-red: #f44;
	--on-tv-black: #000;
	/* Nero pieno per ombre, velature e pieghe (barra, sciarpa): sempre dentro color-mix() */
	--on-shade: #000;
	--on-film: #e8a33a;
	--on-table: #160e07;
	--on-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .78) 100%);

	/* Scala tipografica: estremi in rem, così cresce con il testo scelto dall'utente */
	--on-fs-mega: clamp(5.625rem, 1rem + 21vw, 25rem);
	--on-fs-display-xl: clamp(4.5rem, 1.5rem + 11vw, 13.75rem);
	--on-fs-display: clamp(3.5rem, 1rem + 7.6vw, 9.375rem);
	--on-fs-hero: clamp(3.75rem, 1.5rem + 7vw, 7.5rem);
	--on-fs-display-2: clamp(3rem, 1rem + 5.6vw, 6.75rem);
	--on-fs-number-xl: clamp(4.5rem, 2rem + 7vw, 8.25rem);
	--on-fs-number: clamp(2.75rem, 1rem + 5.2vw, 6rem);
	/* Titoli di sezione: 5,8vw come il prototipo (83,52 px a 1440), così le testate di negozio, album e newsletter coincidono */
	--on-fs-h2: clamp(2.5rem, 5.8vw, 5.75rem);
	--on-fs-h2-s: clamp(1.875rem, 1rem + 2.8vw, 3.5rem);
	--on-fs-h3: clamp(1.875rem, 1.25rem + 2vw, 2.875rem);
	--on-fs-h4: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
	--on-fs-h5: clamp(1.25rem, 1.1rem + .8vw, 1.625rem);
	--on-fs-lede: clamp(1rem, .9rem + .4vw, 1.1875rem);
	--on-fs-body: 1rem;
	--on-fs-small: .875rem;
	--on-fs-nav: .9375rem;
	--on-fs-label: .875rem;
	--on-fs-micro: .75rem;
	--on-fs-tv: clamp(1.125rem, .9rem + 1vw, 1.75rem);
	--on-fs-marker: clamp(1.1875rem, 1rem + .9vw, 1.75rem);

	--on-lh-display: 1.02;
	--on-lh-title: 1.1;
	--on-lh-number: .9;
	--on-lh-body: 1.6;
	--on-lh-lede: 1.55;
	--on-lh-prose: 1.7;

	--on-ls-display: -.012em;
	--on-ls-label: .1em;
	--on-ls-nav: .12em;
	--on-ls-button: .08em;

	/* Spaziature */
	--on-space-1: .25rem;
	--on-space-2: .5rem;
	--on-space-3: .75rem;
	--on-space-4: 1rem;
	--on-space-5: 1.25rem;
	--on-space-6: 1.5rem;
	--on-space-7: 2rem;
	--on-space-8: 3rem;
	--on-space-9: 4rem;
	--on-space-10: 6rem;
	--on-gutter: clamp(1.25rem, 3.2vw, 3rem);
	--on-space-section: clamp(3.5rem, 11vw, 11rem);
	--on-space-section-m: clamp(3.5rem, 8vw, 7.5rem);
	--on-space-section-s: clamp(2.5rem, 5vw, 4.5rem);
	--on-space-head: clamp(1.5rem, 5vw, 4.5rem);
	--on-space-gap: clamp(1.5rem, 3vw, 3rem);
	--on-space-gap-l: clamp(1.5rem, 4vw, 4rem);
	--on-space-gap-xl: clamp(2rem, 6vw, 6rem);
	--on-container: 1392px;
	--on-col: 680px;
	--on-bar-h: 86px;
	/* Striscia del Televideo in cima alla barra: 30 px più la riga (56 telefono, 72 desktop) fanno --on-bar-h */
	--on-bar-tv-h: 30px;
	--on-btn-pad: 15px 22px 13px;
	--on-btn-pad-s: 10px 18px 8px;

	/* Forme, profondità, movimento */
	--on-radius-xs: 2px;
	--on-radius-s: 4px;
	--on-radius-m: 6px;
	--on-radius-pill: 999px;
	--on-shadow-card: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 24px -12px rgba(0, 0, 0, .45);
	--on-shadow-object: drop-shadow(0 18px 24px rgba(0, 0, 0, .45));
	--on-z-raised: 2;
	--on-z-sticky: 20;
	--on-z-menu: 39;
	--on-z-header: 40;
	--on-z-grain: 50;
	--on-z-modal: 60;
	--on-z-skip: 100;
	--on-ease-out: cubic-bezier(.16, 1, .3, 1);
	--on-ease-soft: cubic-bezier(.2, .7, .2, 1);
	--on-ease-flip: cubic-bezier(.55, 0, .2, 1);
	--on-dur-1: .2s;
	--on-dur-2: .3s;
	--on-dur-3: .5s;
	--on-dur-4: .8s;

	/* Texture */
	--on-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--on-photo-filter: saturate(.92) contrast(1.04) sepia(.06);
}

@media (min-width: 901px) {
	:root {
		--on-bar-h: 102px;
	}
}