/*
 * Abello Restyling — design token (direzione A "L'insegna").
 * Unica fonte dei valori grafici del tema: colori, tipografia, spazi, raggi, ombre, durate.
 * Regola: negli altri CSS del tema si usano solo queste variabili (vedi CLAUDE.md del progetto).
 * Font ospitati nel tema, licenza SIL Open Font License 1.1: Libre Caslon Display (titoli), Hanken Grotesk (testo).
 */

/* ---------------------------------------------------------------- Font */
/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-display-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/libre-caslon-display-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-italic-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-italic-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-normal-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-normal-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Token */
:root {
	/* Colori: tavolozza di base (valori grezzi: nei componenti si usano i ruoli più sotto) */
	--ab-ghisa: #23261F;          /* insegna in ghisa della vetrina */
	--ab-ottone: #C9AE74;         /* filetti e lettere dell'insegna */
	--ab-luserna: #E6E7E1;        /* pietra di Luserna dei marciapiedi torinesi */
	--ab-carta: #F5F6F2;          /* carta */
	--ab-bianco: #FFFFFF;
	--ab-inchiostro: #1E211C;     /* testo */
	--ab-grigio: #5B5F57;         /* testo secondario */
	--ab-verde: #006E28;          /* verde del logo */
	--ab-verde-scuro: #00501D;    /* verde del logo scurito: hover e fasce */
	--ab-giallo: #FFE600;         /* giallo del logo */
	--ab-nebbia: #DEDBD0;         /* testo chiaro su ghisa e su verde scuro */
	--ab-linea: #C9CBC2;          /* divisori decorativi su carta (1,5:1: mai come unico bordo di un campo) */
	--ab-errore: #A12B1F;         /* messaggi di errore */
	--ab-nero: #000000;

	/* Colori: ruoli semantici (da usare nei componenti) */
	--ab-color-bg: var(--ab-carta);                 /* fondo pagina */
	--ab-color-surface: var(--ab-bianco);           /* pannelli, campi dei moduli */
	--ab-color-stage: var(--ab-luserna);            /* fondale delle foto prodotto */
	--ab-color-text: var(--ab-inchiostro);          /* 15,0:1 su carta */
	--ab-color-text-muted: var(--ab-grigio);        /* 6,0:1 su carta */
	--ab-color-border: var(--ab-linea);
	--ab-color-border-strong: var(--ab-inchiostro);
	--ab-color-border-field: var(--ab-grigio);      /* bordo dei campi dei moduli: 6,0:1 su carta, 6,5:1 su bianco */
	--ab-color-selection: var(--ab-giallo);         /* selezione del testo */
	--ab-color-link: var(--ab-verde);               /* 5,9:1 su carta */
	--ab-color-link-hover: var(--ab-inchiostro);
	--ab-color-action: var(--ab-verde);             /* pulsanti principali: testo bianco 6,4:1 */
	--ab-color-action-hover: var(--ab-verde-scuro); /* testo bianco 9,7:1 */
	--ab-color-on-action: var(--ab-bianco);
	--ab-color-success: var(--ab-verde);
	--ab-color-error: var(--ab-errore);             /* 6,7:1 su carta */
	--ab-color-focus: var(--ab-verde);              /* anello del focus su fondi chiari */
	--ab-color-focus-on-dark: var(--ab-giallo);     /* anello del focus su ghisa e verde scuro: 12,1:1 */
	--ab-color-dark: var(--ab-ghisa);               /* insegna: header, hero, footer */
	--ab-color-on-dark: var(--ab-bianco);           /* 15,4:1 su ghisa */
	--ab-color-on-dark-muted: var(--ab-nebbia);     /* 11,1:1 su ghisa */
	--ab-color-accent-on-dark: var(--ab-ottone);    /* filetti e link su ghisa: 7,2:1 */
	--ab-color-band: var(--ab-verde-scuro);         /* fasce di colore nei contenuti (testo bianco 9,7:1; nebbia 7,0:1) */

	/* Tipografia: famiglie */
	--ab-font-display: "Libre Caslon Display", "Big Caslon", "Times New Roman", serif; /* solo titoli da 28 px in su; un solo peso (400) */
	--ab-font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Tipografia: scala (Elements of Typographic Style: 12 14 16 18 21 24 36 48 60 72, estesa a 100) */
	--ab-text-xs: 0.75rem;                                  /* 12 — solo note legali */
	--ab-text-sm: 0.875rem;                                 /* 14 — meta, didascalie */
	--ab-text-ui: 1rem;                                     /* 16 — interfaccia e campi dei moduli (mai meno) */
	--ab-text-md: 1.125rem;                                 /* 18 — testo corrente */
	--ab-text-lg: 1.3125rem;                                /* 21 — paragrafi introduttivi */
	--ab-text-xl: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem); /* 21→24 — H4 */
	--ab-text-2xl: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);  /* 28→36 — H3 */
	--ab-text-3xl: clamp(2.25rem, 1.75rem + 1.6vw, 3rem);   /* 36→48 — H2 */
	--ab-text-4xl: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);  /* 40→60 — H1 delle pagine */
	--ab-text-5xl: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem);   /* 40→72 — H1 delle hero di categoria */
	--ab-text-6xl: clamp(2.75rem, 1.3rem + 5.2vw, 6.25rem); /* 44→100 — hero principali */

	--ab-weight-regular: 400;
	--ab-weight-medium: 500;      /* Hanken: menu, schede; per i titoli il Caslon ha un solo peso e resta a 400 */
	--ab-weight-semibold: 600;    /* Hanken: pulsanti, nomi prodotto, voce di menu attiva */

	--ab-leading-display: 0.98;   /* hero */
	--ab-leading-title: 1.12;     /* titoli */
	--ab-leading-snug: 1.35;      /* nomi prodotto, liste brevi, interfaccia */
	--ab-leading-text: 1.6;       /* testo corrente */

	--ab-tracking-display: -0.01em;
	--ab-tracking-ui: 0.01em;

	--ab-measure: 68ch;           /* lunghezza massima delle righe di testo */

	/* Spazi: scala su base 4 px */
	--ab-space-1: 0.25rem;  /* 4 */
	--ab-space-2: 0.5rem;   /* 8 */
	--ab-space-3: 0.75rem;  /* 12 */
	--ab-space-4: 1rem;     /* 16 */
	--ab-space-5: 1.5rem;   /* 24 */
	--ab-space-6: 2rem;     /* 32 */
	--ab-space-7: 3rem;     /* 48 */
	--ab-space-8: 4rem;     /* 64 */
	--ab-space-9: 6rem;     /* 96 */
	--ab-space-10: 8rem;    /* 128 */
	--ab-gutter: clamp(1rem, 4vw, 3.5rem);          /* margine laterale: 16→56 */
	--ab-section: clamp(3.5rem, 2rem + 6vw, 7rem);  /* spazio verticale tra sezioni: 56→112 */

	/* Larghezze */
	--ab-width-text: 45rem;    /* 720 — colonne di testo */
	--ab-width-wide: 77.5rem;  /* 1240 — griglie e contenuti larghi */
	--ab-width-max: 90rem;     /* 1440 — header, hero */

	/* Raggi */
	--ab-radius-0: 0;
	--ab-radius-1: 2px;        /* pulsanti, campi, card: angoli quasi vivi come le cornici della vetrina */
	--ab-radius-2: 4px;        /* badge, etichette, pillole delle categorie */
	--ab-radius-round: 50%;    /* elementi circolari */

	/* Bordi */
	--ab-border-hair: 1px;
	--ab-border-rule: 2px;     /* filetto del cartellino delle card */

	/* Ombre: poche e basse, mai decorative */
	--ab-shadow-1: 0 1px 2px rgba(30, 33, 28, 0.08);
	--ab-shadow-2: 0 8px 24px rgba(30, 33, 28, 0.12), 0 1px 2px rgba(30, 33, 28, 0.08);

	/* Movimento */
	--ab-duration-fast: 150ms;
	--ab-duration: 250ms;
	--ab-duration-slow: 400ms;
	--ab-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

	/* Livelli */
	--ab-z-header: 9999;       /* come il tema genitore */
	--ab-z-overlay: 10000;

	/* Navigazione (2026-10-03): trasparente e sovrapposta alle hero, nera all'80% dopo lo scroll */
	--ab-color-nav-scrolled: color-mix(in srgb, var(--ab-nero) 80%, transparent);
	--ab-nav-shade: linear-gradient(180deg, color-mix(in srgb, var(--ab-nero) 75%, transparent) 0%, color-mix(in srgb, var(--ab-nero) 40%, transparent) 55%, transparent 100%);   /* ombra in cima alla foto: tiene leggibile il menu trasparente */

	/* Interfaccia: misure di controlli e dettagli */
	--ab-tap: 44px;               /* area minima toccabile (WCAG 2.5.5) */
	--ab-tap-lg: 48px;            /* pulsanti principali su mobile, hamburger */
	--ab-focus-ring: 3px;         /* spessore dell'anello del focus */
	--ab-focus-offset: 3px;
	--ab-underline-offset: 0.2em; /* distanza della sottolineatura dei link */
	--ab-icon: 1.625rem;          /* icone dell'header (carrello) */
	--ab-icon-line: 1.75rem;      /* lunghezza delle righe dell'hamburger */
	--ab-badge: 1.25rem;          /* contatore del carrello */
	--ab-check: 1.125rem;         /* caselle dei filtri */
	--ab-field-xs: 6rem;          /* campi corti (prezzo min/max) */
	--ab-sidebar: 16rem;          /* colonna dei filtri nello Shop */
	--ab-summary: 24rem;          /* colonna del riepilogo in carrello e checkout */
	--ab-card-min: 9.25rem;       /* larghezza minima di una card prodotto (2 per riga a 360 px) */
	--ab-vh: 100vh;               /* altezza della finestra (pannelli a tutta altezza) */
	--ab-bleed: calc(50% - 50vw); /* margine negativo per uscire a tutta larghezza da un contenitore centrato */
	--ab-measure-title: 12ch;     /* titoli delle hero */
	--ab-measure-short: 30ch;     /* sottotitoli delle hero */

	/* Header ("insegna") e logo sulla targa */
	--ab-header-h: 96px;          /* altezza dell'header desktop (anche lo spazio sotto, .spacer) */
	--ab-header-h-compact: 72px;  /* header desktop dopo lo scroll */
	--ab-header-h-mobile: 72px;   /* header sotto i 1190 px */
	--ab-logo-h: 92px;            /* logo nel medaglione, desktop (proposta B, 2026-10-03) */
	--ab-logo-h-compact: 52px;    /* dopo lo scroll */
	--ab-logo-h-mobile: 60px;
	--ab-medal-pad: 14px 16px 16px;        /* margine interno del medaglione */
	--ab-medal-pad-compact: 8px 10px 10px;
	--ab-medal-radius: 0 0 6px 6px;        /* angoli in basso: l'etichetta "pende" dalla nav */
	--ab-shadow-medal: 0 10px 24px rgba(0, 0, 0, 0.28);

	/* Hero a vetrina: quota del pannello di testo a sinistra (desktop) */
	--ab-hero-panel: 42%;
	--ab-hero-min-h: min(78vh, 760px);
	--ab-hero-foto-h: min(62vw, 520px);   /* foto della hero quando è impilata sopra il testo (< 1024 px) */
	--ab-hero-copy: 34rem;                /* larghezza massima del testo della hero */
	/* Velo sulle foto delle hero (proposta A, opacità dimezzata su richiesta il 2026-10-03): più scuro a sinistra dove sta il testo */
	--ab-hero-veil: linear-gradient(90deg, color-mix(in srgb, var(--ab-color-dark) 44%, transparent) 0%, color-mix(in srgb, var(--ab-color-dark) 27.5%, transparent) 45%, transparent 80%);
	--ab-hero-veil-mobile: linear-gradient(0deg, color-mix(in srgb, var(--ab-color-dark) 46%, transparent) 0%, color-mix(in srgb, var(--ab-color-dark) 30%, transparent) 55%, color-mix(in srgb, var(--ab-color-dark) 10%, transparent) 100%);
	--ab-hero-cat-min-h: min(56vh, 520px);   /* hero di Shop e categorie */
	/* Fascia promozionale in Home (2026-10-06) */
	--ab-promo-min-h: min(70vh, 640px);
	--ab-promo-min-h-mobile: min(80vh, 560px);
	--ab-promo-veil: linear-gradient(90deg, color-mix(in srgb, var(--ab-color-dark) 92%, transparent) 0%, color-mix(in srgb, var(--ab-color-dark) 80%, transparent) 45%, color-mix(in srgb, var(--ab-color-dark) 30%, transparent) 75%, transparent 100%);
	--ab-promo-veil-mobile: linear-gradient(0deg, color-mix(in srgb, var(--ab-color-dark) 94%, transparent) 0%, color-mix(in srgb, var(--ab-color-dark) 82%, transparent) 65%, color-mix(in srgb, var(--ab-color-dark) 40%, transparent) 100%);
	/* velo più coprente per Shop e categorie: le foto sono prodotti su fondo bianco e il testo (descrizione, pillole) è più lungo */
	--ab-hero-veil-cat: linear-gradient(90deg, color-mix(in srgb, var(--ab-color-dark) 47%, transparent) 0%, color-mix(in srgb, var(--ab-color-dark) 43%, transparent) 50%, color-mix(in srgb, var(--ab-color-dark) 27.5%, transparent) 75%, color-mix(in srgb, var(--ab-color-dark) 17.5%, transparent) 100%);
	--ab-hero-veil-cat-mobile: linear-gradient(0deg, color-mix(in srgb, var(--ab-color-dark) 47%, transparent) 0%, color-mix(in srgb, var(--ab-color-dark) 41%, transparent) 65%, color-mix(in srgb, var(--ab-color-dark) 22.5%, transparent) 100%);
	--ab-hero-media: 18rem;               /* immagine nella hero di categoria */
	--ab-hero-media-sm: 10rem;
	/* titolo della hero a vetrina: la parola più lunga ("Erboristeria", ~5,3 em) deve stare nel pannello */
	--ab-hero-title: min(var(--ab-text-6xl), calc(7.4vw - 1.25rem));

	/* Alias usati dalle regole del tema genitore */
	--site-bg: var(--ab-color-bg);
	--site-text-color: var(--ab-color-text);
	--link-color: var(--ab-color-link);
	--link-color-hover: var(--ab-color-link-hover);
}

/*
 * Breakpoint — le variabili CSS non funzionano nelle media query: usare SOLO questi valori.
 *   sm       560px   telefoni → telefoni grandi
 *   md       782px   colonne dei blocchi WordPress (core)
 *   lg      1024px   tablet orizzontale
 *   header  1190px   header desktop del tema: (min-width: 1190px) / (max-width: 1189.98px)
 *   xl      1440px   schermi larghi
 */

@media (prefers-reduced-motion: reduce) {
	:root {
		--ab-duration-fast: 0ms;
		--ab-duration: 0ms;
		--ab-duration-slow: 0ms;
	}
}