/*
 * Fase 1 (fondamenta design): --blue/--blue-dark/--cream/--gold/--ink/--line/--muted/--white/
 * --font/--display/--container sono definite in base.css (copia esatta del prototipo,
 * "DESIGN BY CODEX/product-page/v1/base.css") e sono la fonte di verità del colore/tipografia.
 * Le --cb-* qui sotto restano gli ALIAS usati da main.css/header.css/shop.css/product.css/
 * cart.css/checkout.css: cambiano nome ma non rompono nulla di già scritto. I valori numerici
 * coincidevano già con il design (nessuna differenza visiva); --cb-container passa da 1200px
 * (provvisorio) a 1280px (valore vero del design, var(--container)) — pagine non ancora
 * rivestite guadagnano 80px di larghezza massima, effetto atteso e non un baco.
 * base.css va caricato PRIMA di questo foglio (dipendenza cb-tokens -> cb-base in functions.php).
 */
:root {
	/* colori: alias delle variabili del design */
	--cb-bg: var(--cream);
	--cb-surface: var(--white);
	--cb-ink: var(--ink);
	--cb-ink-soft: var(--muted);
	--cb-brand: var(--blue);
	--cb-brand-dark: var(--blue-dark);
	--cb-accent: var(--gold);
	--cb-line: var(--line);
	--cb-on-brand: var(--white);

	/* senza equivalente nel design (stati non coperti dal prototipo): invariati */
	--cb-ok: #2e7d32;
	--cb-err: #c62828;

	/*
	 * Stelle delle recensioni (20.09.2026, scelta di Stefan fra quattro gialli
	 * provati sulle card vere). Prima usavano --gold (#c98800), che sul fondo
	 * crema tende al marrone. NON si e' cambiato --gold: quel token e' usato 32
	 * volte in 15 fogli (contorni di fuoco, trattini degli occhielli, accenti) e
	 * toccarlo avrebbe cambiato mezzo sito. Le stelle hanno un colore loro, qui,
	 * cosi si cambia in un punto solo e vale su negozio, categorie, ricerca,
	 * home e scheda prodotto insieme.
	 */
	--cb-star: #f5b301;

	/* tipografia: alias delle variabili del design */
	--cb-font: var(--font);
	--cb-font-display: var(--display);
	--cb-text: 1rem;
	--cb-text-sm: .875rem;
	--cb-h1: clamp(1.6rem, 4vw, 2.5rem);
	--cb-h2: clamp(1.3rem, 3vw, 1.9rem);

	/* spazi e forme (non elencati fra le variabili da riconciliare: invariati) */
	--cb-gap: 1rem;
	--cb-gap-xs: .25rem;
	--cb-gap-sm: .5rem;
	--cb-gap-lg: 2rem;
	--cb-radius: 3px;
	--cb-stroke-w: 2px;
	--cb-dot: .55rem;
	--cb-shadow: 0 6px 16px -8px rgba(20, 17, 15, .35);
	--cb-container: var(--container);

	/* header/footer */
	--cb-icon: 1.5rem;
	--cb-logo-h: 3.25rem;
	--cb-badge: 1.25rem;
	--cb-dropdown-w: 12rem;
	--cb-z-dropdown: 20;
}