/**
 * Design token — Adriatic Dive
 *
 * Trascrizione diretta di design-system-e-shop-layout/project/Adriatic Dive v2.dc.html.
 * Questo file è la sola fonte dei valori: nessun colore, font-size o raggio va scritto
 * a mano altrove nel tema. Se un valore manca qui, si aggiunge qui.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colore — blu
	 * ------------------------------------------------------------------- */
	--ad-blue-900: #06293c; /* topbar, footer */
	--ad-blue-800: #072e44;
	--ad-blue-700: #0B3D5C; /* dominante: header, testo, bottoni secondari */
	--ad-blue-600: #08415C;
	--ad-blue-500: #14607f; /* gradienti hero */
	--ad-blue-400: #0a4f74; /* campo ricerca su header */
	--ad-blue-300: #1d6a92; /* bordi su fondo scuro */
	--ad-blue-200: #2b6280;

	/* Colore — accento e CTA */
	--ad-teal: #1B9AAA; /* eyebrow, link, badge novità */
	--ad-teal-alt-1: #2E8FA8; /* varianti previste dal design doc */
	--ad-teal-alt-2: #12798A;
	--ad-coral: #F26440; /* SOLO CTA e underline attivi */
	--ad-coral-alt-1: #E2552F;
	--ad-coral-alt-2: #D9764A;
	--ad-coral-tint: #FDEFEA; /* fondo del cuore quando il prodotto è salvato */

	/* Colore — sfondi chiari */
	--ad-bg: #F1EDE4; /* sfondo pagina */
	--ad-surface: #FAF7F1; /* superficie contenitori */
	--ad-surface-raised: #ffffff; /* card */
	--ad-sand: #EDE4D3; /* bande: trust bar, sezioni alternate */
	--ad-surface-selected: #F7FAFB; /* riga o metodo scelto al checkout */
	--ad-surface-glass: rgba(255, 255, 255, 0.92); /* cuore appoggiato sulla foto (2C mobile) */

	/* Colore — testo */
	--ad-text: var(--ad-blue-700);
	--ad-text-body: #2c4a5c;
	--ad-text-body-2: #3c5462; /* corpo su banda sabbia */
	--ad-text-lead: #4d6371; /* sottotitolo/introduzione su banda sabbia */
	--ad-text-muted: #6d7f8b;
	--ad-text-muted-2: #5f6f77;
	--ad-text-faint: #9aa7ad;
	--ad-text-faint-2: #8b98a0;
	--ad-text-disabled: #b3aa99; /* varianti esaurite, azioni non disponibili */
	--ad-text-on-dark: #E8DCC8;
	--ad-text-on-dark-2: #A9C7D6;
	--ad-text-on-dark-3: #C3D8E3;
	--ad-text-on-dark-4: #8FB4C6;
	--ad-text-on-dark-5: #9FC3D4;

	/* Colore — bordi */
	--ad-border: #DCD2BF;
	--ad-border-light: #E4DBCB;
	--ad-border-lighter: #E3DACA; /* bordo card nelle pagine editoriali */
	--ad-border-lightest: #EFE8DB; /* separatori orizzontali leggeri */
	--ad-border-faint: #F4EEE4; /* righe di tabella, ancora più leggere */
	--ad-border-input: #E0D6C4;
	--ad-border-strong: #D9CFBC; /* bordo 1.5px, elementi interattivi */
	--ad-border-sand: #d6c9b0;
	--ad-border-sand-dark: #C9BDA6; /* quadrato dei preferiti in scheda prodotto */
	--ad-sand-deep: #D8CDB8; /* cifre del 404 su fondo chiaro (8A) */

	/* Colore — stati */
	--ad-in-stock: #2e7d5b; /* ● Pronta consegna */
	--ad-backorder: #a06a2c; /* ● Su ordinazione */

	/* ---------------------------------------------------------------------
	 * Tipografia
	 * ------------------------------------------------------------------- */
	--ad-font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
	--ad-font-body: "Inter", system-ui, -apple-system, sans-serif;
	--ad-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Scala tipografica — dal design desktop 1440 */
	--ad-fs-hero: 64px; /* h1 homepage */
	--ad-fs-h1: 40px; /* h1 shop e prodotto */
	--ad-fs-h1-lg: 46px; /* h1 delle pagine con intestazione sabbia estesa (5E) */
	--ad-fs-h2: 36px; /* titolo sezione */
	--ad-fs-h2-sm: 30px;
	--ad-fs-h3: 20px;
	--ad-fs-lead: 18px;
	--ad-fs-body: 16px;
	--ad-fs-sm: 15px;
	--ad-fs-xs: 14px;
	--ad-fs-2xs: 13px;
	--ad-fs-3xs: 12px;
	--ad-fs-4xs: 11px;

	--ad-lh-tight: 1.05;
	--ad-lh-heading: 1.1;
	--ad-lh-snug: 1.3;
	--ad-lh-body: 1.6;
	--ad-lh-relaxed: 1.7;

	--ad-ls-hero: -0.025em; /* titoli grandi */
	--ad-ls-heading: -0.02em;
	--ad-ls-eyebrow: 0.24em; /* occhiello di sezione */
	--ad-ls-label: 0.18em; /* label filtri */
	--ad-ls-caps: 0.14em;
	--ad-ls-badge: 0.1em;
	--ad-ls-button: 0.06em;
	--ad-ls-nav: 0.04em;

	/* ---------------------------------------------------------------------
	 * Forma
	 * ------------------------------------------------------------------- */
	--ad-radius-xs: 6px; /* badge dei metodi di pagamento */
	--ad-radius-sm: 10px; /* bottoni, input, chip quadrati */
	--ad-radius-ms: 12px; /* miniature, righe di scelta, riquadri interni */
	--ad-radius-md: 16px; /* card categoria */
	--ad-radius-lg: 18px; /* card prodotto e articolo */
	--ad-radius-xl: 20px; /* galleria prodotto */
	--ad-radius-2xl: 22px; /* contenitori di sezione */
	--ad-radius-sheet: 24px; /* pannello che sale dal basso: filtri shop (2C) */
	--ad-radius-pill: 100px; /* badge */

	/* Velatura sopra la pagina quando il pannello dei filtri è aperto (2C). */
	--ad-scrim: rgba(11, 61, 92, 0.55);

	--ad-shadow-card: 0 1px 2px rgba(11, 61, 92, 0.04), 0 12px 32px rgba(11, 61, 92, 0.08);
	--ad-shadow-card-sm: 0 1px 2px rgba(11, 61, 92, 0.04), 0 10px 28px rgba(11, 61, 92, 0.07);
	--ad-shadow-soft: 0 10px 28px rgba(11, 61, 92, 0.07);
	--ad-shadow-card-lg: 0 1px 2px rgba(11, 61, 92, 0.04), 0 14px 40px rgba(11, 61, 92, 0.09); /* riepilogo carrello */
	--ad-shadow-container: 0 34px 90px rgba(6, 41, 60, 0.16);

	/* ---------------------------------------------------------------------
	 * Spaziatura e layout
	 * ------------------------------------------------------------------- */
	--ad-gutter: 48px; /* padding orizzontale di sezione, desktop */
	--ad-gutter-mobile: 18px;
	--ad-section-y: 72px; /* padding verticale di sezione */
	--ad-container-max: 1440px;
	--ad-sidebar-w: 268px; /* sidebar filtri shop */
	/* Altezza dell'header, che resta in cima mentre si scorre: la usano gli
	   elementi appiccicati e i salti alle ancore, per non finirci sotto. */
	--ad-header-h: 78px;

	--ad-gap-xs: 8px;
	--ad-gap-sm: 12px;
	--ad-gap-md: 16px;
	--ad-gap-lg: 20px;
	--ad-gap-xl: 24px;
	--ad-gap-2xl: 32px;

	/* ---------------------------------------------------------------------
	 * Gradienti
	 * ------------------------------------------------------------------- */
	/* Sfondo dell'hero quando non c'è una foto: l'ultimo strato è opaco. */
	--ad-gradient-hero:
		radial-gradient(90% 70% at 62% 18%, rgba(27, 154, 170, 0.35) 0%, rgba(27, 154, 170, 0) 60%),
		linear-gradient(180deg, rgba(6, 41, 60, 0.25) 0%, rgba(8, 65, 92, 0.72) 52%, rgba(5, 34, 50, 0.97) 100%),
		radial-gradient(130% 110% at 25% 0%, #14607f 0%, #0B3D5C 55%, #062a3e 100%);

	/* Velo sopra la foto dell'hero: stessi colori, ma senza lo strato opaco,
	   altrimenti l'immagine non si vedrebbe. Tiene il titolo bianco leggibile. */
	--ad-hero-overlay:
		radial-gradient(90% 70% at 62% 18%, rgba(27, 154, 170, 0.30) 0%, rgba(27, 154, 170, 0) 60%),
		linear-gradient(180deg, rgba(6, 41, 60, 0.45) 0%, rgba(8, 65, 92, 0.70) 52%, rgba(5, 34, 50, 0.92) 100%);
	--ad-gradient-band: linear-gradient(140deg, #08415C, #06293c);
	/* Intestazione scura del blog (3A). */
	--ad-gradient-blog:
		radial-gradient(80% 120% at 80% 0%, rgba(27, 154, 170, 0.28) 0%, rgba(27, 154, 170, 0) 60%),
		linear-gradient(150deg, #08415C, #062a3e);

	/* Riquadro scuro di servizio: nota di aiuto nel carrello. */
	--ad-gradient-note: radial-gradient(90% 90% at 20% 0%, #14607f, #0B3D5C 60%, #062a3e);
	/* Riquadro del carrello vuoto (6A): stessi blu della nota, ma il chiaro
	   parte più a sinistra perché il riquadro è largo quanto la pagina. */
	--ad-gradient-empty-cart: radial-gradient(90% 130% at 12% 0%, #14607f, #0B3D5C 62%, #062a3e);
	--ad-gradient-placeholder: radial-gradient(120% 100% at 30% 0%, #14607f 0%, #0B3D5C 55%, #072e44 100%);

	/* Velo sulla foto della 404 (8A): in diagonale sul desktop, dall'alto sul
	   telefono, dove il numero è appoggiato in basso sulla fascia. */
	--ad-404-overlay: linear-gradient(200deg, rgba(6, 41, 60, 0.35), rgba(6, 41, 60, 0.75));
	--ad-404-overlay-mobile: linear-gradient(180deg, rgba(6, 41, 60, 0.45), rgba(6, 41, 60, 0.8));
}

/* Mobile: il design di riferimento è 390px. */
@media (max-width: 782px) {
	:root {
		--ad-gutter: var(--ad-gutter-mobile);
		--ad-header-h: 60px;
		--ad-section-y: 26px;
		--ad-fs-hero: 34px;
		--ad-fs-h1: 28px;
		--ad-fs-h1-lg: 30px;
		--ad-fs-h2: 24px;
		--ad-fs-h2-sm: 20px;
	}
}