/*
 * AiBacco design tokens — fonte canonica: DESIGN.md
 *
 * Regole guida:
 *  - mai #000 / #fff: i neutri sono tinti verso bordeaux
 *  - oro = accento singolo (CTA, highlight); mai gradient text, mai grandi fill
 *  - magenta antico = decorativo, non funzionale
 *  - bordeaux profondo è identità: hero, anti-claim, footer, CTA banner
 */

:root {
	/* Palette */
	--ai-bordeaux:        #3F012A; /* primary dark — hero, header, anti-claim, footer, CTA banner */
	--ai-magenta:         #A03B6B; /* decorative — hover, "ai" letterforms */
	--ai-oro:             #DFBC1F; /* active accent — CTA, highlight */
	--ai-crema:           #F8F1E9; /* warm neutral — section background */
	--ai-nero-vino:       #1A0D14; /* body text */
	--ai-bordeaux-60:     #7A4760; /* secondary text */
	--ai-bordeaux-12:     #EAD6DE; /* hairline / card border */
	--ai-rosa-polvere:    #F4DDE6; /* tag, chip, note background */
	--ai-verde-bottiglia: #2F5D3F; /* confirm, organic/biodynamic badge */

	/* Tipografia */
	--ai-font-display: "Calistoga", Georgia, serif;
	--ai-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ai-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Scala tipografica mobile-first (≥1024px scala via @media nei file di sezione) */
	--ai-h1: 2.5rem;   /* 40 / 1.05 — Calistoga 400 */
	--ai-h2: 1.75rem;  /* 28 / 1.15 — Calistoga 400 */
	--ai-h3: 1.25rem;  /* 20 / 1.25 — DM Sans 600 */
	--ai-body: 1.0625rem; /* 17 / 1.55 — DM Sans 400 */
	--ai-caption: 0.875rem; /* 14 / 1.4 — DM Sans 500 */
	--ai-cta: 1rem;    /* 16 / 1 — DM Sans 600, tracking 0.02em */

	/* Spaziatura sezioni */
	--ai-section-pad-mobile: 4rem;     /* 64px default mobile */
	--ai-section-pad-desktop: 7rem;    /* 112px default desktop, varia 96–128 */
	--ai-section-pad-tight: 4rem;      /* anti-claim, FAQ */

	/* Misure */
	--ai-measure: 70ch; /* body cap 65–75ch */
	--ai-radius-sm: 0.375rem;
	--ai-radius-md: 0.75rem;

	/* Motion */
	--ai-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ai-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
	--ai-dur-hover: 180ms;
	--ai-dur-reveal: 480ms;
}

/* Base globali */
html {
	color: var(--ai-nero-vino);
	background: var(--ai-crema);
	font-family: var(--ai-font-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
	html { font-size: 18px; }
	:root {
		--ai-h1: 4rem;     /* fino a 64px */
		--ai-h2: 2.5rem;   /* fino a 40px */
	}
}

h1, h2, .ai-display {
	font-family: var(--ai-font-display);
	font-weight: 400;
	color: var(--ai-bordeaux);
	letter-spacing: -0.005em;
}

h1 { font-size: var(--ai-h1); line-height: 1.05; }
h2 { font-size: var(--ai-h2); line-height: 1.15; }
h3 {
	font-family: var(--ai-font-body);
	font-weight: 600;
	font-size: var(--ai-h3);
	line-height: 1.25;
	color: var(--ai-bordeaux);
}

p { max-width: var(--ai-measure); }

a { color: var(--ai-bordeaux); text-decoration-color: var(--ai-bordeaux-12); transition: color var(--ai-dur-hover) var(--ai-ease-out-quart); }
a:hover { color: var(--ai-magenta); }

/* CTA primaria oro — utility minima, le sezioni custom possono estenderla */
.ai-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ai-font-body);
	font-weight: 600;
	font-size: var(--ai-cta);
	letter-spacing: 0.02em;
	padding: 0.875rem 1.5rem;
	background: var(--ai-oro);
	color: var(--ai-bordeaux);
	border: none;
	border-radius: var(--ai-radius-sm);
	cursor: pointer;
	transition: transform var(--ai-dur-hover) var(--ai-ease-out-expo),
	            background-color var(--ai-dur-hover) var(--ai-ease-out-quart);
}
.ai-cta:hover { transform: translateY(-1px); background: #E8C835; }

/* Reveal-on-scroll: usato da template-parts custom via IntersectionObserver */
.ai-reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--ai-dur-reveal) var(--ai-ease-out-expo),
	            transform var(--ai-dur-reveal) var(--ai-ease-out-expo);
}
.ai-reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.ai-reveal { opacity: 1; transform: none; transition: none; }
	.ai-cta:hover { transform: none; }
}