/* ==========================================================================
   Antea · Design tokens
   Fonte unica dei valori di colore, tipografia, forma, spazio e movimento.
   Gli stessi valori sono dichiarati in theme.json per l'editor.
   ========================================================================== */

:root {
	/* ---- Palette del brand (linee guida 2026) ---- */
	--a-rose: #D7BEBF;          /* Dusty Rose */
	--a-silk: #EFEEEA;          /* Silk White */
	--a-obsidian: #202020;      /* Obsidian Black */
	--a-ink: #19191A;           /* inchiostro del logo */

	/* Scala del rosa: il 300 è il colore ufficiale; 600+ servono per testi leggibili su chiaro (AA). */
	--a-rose-50: #F9F3F4;
	--a-rose-100: #F3E8E8;
	--a-rose-200: #E9D8D9;
	--a-rose-300: #D7BEBF;
	--a-rose-400: #BF9B9D;
	--a-rose-500: #A97E80;
	--a-rose-600: #936264;
	--a-rose-700: #744E4F;
	--a-rose-800: #573D3E;
	--a-rose-900: #3B2B2B;

	/* Scala dei neutri */
	--a-white: #FFFFFF;
	--a-silk-2: #E7E5DF;
	--a-silk-3: #DCD9D1;
	--a-obsidian-2: #2A2A2B;
	--a-obsidian-3: #343436;
	--a-ink-soft: #4A4A4C;
	--a-ink-mute: #64646A;

	/* ---- Token semantici (tono chiaro) ---- */
	--a-bg: var(--a-silk);
	--a-bg-2: var(--a-silk-2);
	--a-fg: var(--a-ink);
	--a-fg-soft: var(--a-ink-soft);
	--a-fg-mute: var(--a-ink-mute);
	--a-surface: var(--a-white);
	--a-surface-2: var(--a-rose-50);
	--a-line: rgba(25, 25, 26, .10);
	--a-line-strong: rgba(25, 25, 26, .22);
	--a-accent: var(--a-rose-700);
	--a-accent-soft: var(--a-rose-100);
	--a-accent-strong: var(--a-rose-800);
	--a-on-accent: var(--a-white);
	--a-cta: var(--a-obsidian);
	--a-on-cta: var(--a-silk);
	--a-success: #3F6B4B;
	--a-success-soft: #E4EFE6;
	--a-warning: #8A6520;
	--a-warning-soft: #F6EBD2;
	--a-danger: #8E3B3B;
	--a-danger-soft: #F5E1E1;
	--a-focus: var(--a-rose-600);

	/* ---- Luce prismatica ---- */
	--a-prism-1: #FFD6DF;
	--a-prism-2: #FFF1C9;
	--a-prism-3: #D7F6E7;
	--a-prism-4: #D3E6FF;
	--a-prism-5: #ECDBFF;
	--a-prism: linear-gradient(100deg, var(--a-prism-1), var(--a-prism-2), var(--a-prism-3), var(--a-prism-4), var(--a-prism-5));
	--a-prism-conic: conic-gradient(from var(--a-angle, 0deg), var(--a-prism-1), var(--a-prism-2), var(--a-prism-3), var(--a-prism-4), var(--a-prism-5), var(--a-prism-1));

	/* ---- Vetro (Liquid Glass) ---- */
	--a-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .44) 100%);
	--a-glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .70) 100%);
	--a-glass-bg-soft: linear-gradient(135deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .22) 100%);
	--a-glass-border: rgba(255, 255, 255, .72);
	--a-glass-blur: blur(22px) saturate(170%);
	--a-glass-blur-strong: blur(32px) saturate(190%);
	--a-glass-highlight: rgba(255, 255, 255, .95);
	--a-glass-shadow:
		0 1px 0 rgba(255, 255, 255, .85) inset,
		0 -1px 0 rgba(25, 25, 26, .05) inset,
		0 24px 60px -28px rgba(25, 25, 26, .30);
	--a-glass-dark-bg: linear-gradient(135deg, rgba(32, 32, 32, .76) 0%, rgba(32, 32, 32, .52) 100%);
	--a-glass-dark-bg-strong: linear-gradient(135deg, rgba(32, 32, 32, .92) 0%, rgba(32, 32, 32, .78) 100%);
	--a-glass-dark-border: rgba(255, 255, 255, .14);
	--a-glass-dark-shadow:
		0 1px 0 rgba(255, 255, 255, .10) inset,
		0 -1px 0 rgba(0, 0, 0, .35) inset,
		0 30px 80px -30px rgba(0, 0, 0, .65);

	/* ---- Ombre ---- */
	--a-shadow-sm: 0 1px 2px rgba(25, 25, 26, .05), 0 6px 16px -10px rgba(25, 25, 26, .18);
	--a-shadow: 0 2px 4px rgba(25, 25, 26, .04), 0 18px 40px -22px rgba(25, 25, 26, .28);
	--a-shadow-lg: 0 4px 8px rgba(25, 25, 26, .04), 0 40px 90px -36px rgba(25, 25, 26, .38);

	/* ---- Tipografia ---- */
	--a-font-display: "Luxerie", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--a-font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--a-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--a-fs-2xs: .6875rem;
	--a-fs-xs: .75rem;
	--a-fs-sm: .875rem;
	--a-fs-md: 1rem;
	--a-fs-lg: 1.125rem;
	--a-fs-xl: 1.25rem;
	--a-fs-h4: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	--a-fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	--a-fs-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);
	--a-fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
	--a-fs-display: clamp(2.75rem, 1.5rem + 6vw, 7rem);

	--a-fw-light: 300;
	--a-fw-regular: 400;
	--a-fw-medium: 500;
	--a-fw-semibold: 600;

	--a-lh-tight: 1.02;
	--a-lh-snug: 1.22;
	--a-lh-normal: 1.5;
	--a-lh-relaxed: 1.65;

	--a-track-display: .06em;
	--a-track-wordmark: .32em;
	--a-track-eyebrow: .22em;
	--a-track-caps: .08em;

	/* ---- Forma ---- */
	--a-r-xs: 8px;
	--a-r-sm: 12px;
	--a-r: 18px;
	--a-r-lg: 26px;
	--a-r-xl: 36px;
	--a-pill: 999px;
	--a-border: 1px;

	/* ---- Spazio (base 4 px) ---- */
	--a-s-1: 4px;
	--a-s-2: 8px;
	--a-s-3: 12px;
	--a-s-4: 16px;
	--a-s-5: 20px;
	--a-s-6: 24px;
	--a-s-7: 32px;
	--a-s-8: 40px;
	--a-s-9: 48px;
	--a-s-10: 64px;
	--a-s-11: 80px;
	--a-s-12: 96px;

	/* ---- Layout ---- */
	--a-container: 1360px;
	--a-container-narrow: 820px;
	--a-container-wide: 1600px;
	--a-gutter: clamp(18px, 4vw, 48px);
	--a-section: clamp(64px, 9vw, 128px);
	--a-section-sm: clamp(40px, 6vw, 80px);
	--a-header-h: 72px;
	--a-header-h-compact: 58px;
	--a-header-inset: 12px;
	--a-header-total: calc(var(--a-header-h) + var(--a-header-inset) * 2);
	--a-sticky-offset: calc(var(--a-header-total) + 16px);

	/* ---- Movimento ---- */
	--a-ease: cubic-bezier(.2, .8, .2, 1);
	--a-ease-in: cubic-bezier(.4, 0, 1, 1);
	--a-spring: cubic-bezier(.34, 1.56, .64, 1);
	--a-dur-fast: 160ms;
	--a-dur: 320ms;
	--a-dur-slow: 640ms;
	--a-dur-prism: 40s;

	/* ---- Livelli ---- */
	--a-z-header: 100;
	--a-z-dropdown: 110;
	--a-z-drawer: 200;
	--a-z-overlay: 190;
	--a-z-toast: 300;

	color-scheme: light;
	accent-color: var(--a-rose-600);
}

/* Angolo animabile della luce prismatica (browser senza @property: luce ferma). */
@property --a-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes a-angle {
	to { --a-angle: 360deg; }
}

/* Tono scuro: sezioni editoriali su Obsidian. Si attiva con .a-dark o data-tone="dark". */
.a-dark,
[data-tone="dark"] {
	--a-bg: var(--a-obsidian);
	--a-bg-2: var(--a-obsidian-2);
	--a-fg: var(--a-silk);
	--a-fg-soft: #CFCEC9;
	--a-fg-mute: #A6A5A0;
	--a-surface: var(--a-obsidian-2);
	--a-surface-2: var(--a-obsidian-3);
	--a-line: rgba(255, 255, 255, .12);
	--a-line-strong: rgba(255, 255, 255, .26);
	--a-accent: var(--a-rose-300);
	--a-accent-soft: rgba(215, 190, 191, .14);
	--a-accent-strong: var(--a-rose-200);
	--a-on-accent: var(--a-ink);
	--a-cta: var(--a-silk);
	--a-on-cta: var(--a-ink);
	--a-focus: var(--a-rose-300);
	--a-glass-bg: var(--a-glass-dark-bg);
	--a-glass-bg-strong: var(--a-glass-dark-bg-strong);
	--a-glass-bg-soft: linear-gradient(135deg, rgba(32, 32, 32, .55) 0%, rgba(32, 32, 32, .30) 100%);
	--a-glass-border: var(--a-glass-dark-border);
	--a-glass-highlight: rgba(255, 255, 255, .35);
	--a-glass-shadow: var(--a-glass-dark-shadow);
	--a-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .5);
	--a-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .7);
	--a-shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 40px 90px -36px rgba(0, 0, 0, .8);
	color-scheme: dark;
	background-color: var(--a-bg);
	color: var(--a-fg);
}

/* Tono rosa: superfici morbide per sezioni di servizio. */
.a-tone-rose,
[data-tone="rose"] {
	--a-bg: var(--a-rose-200);
	--a-bg-2: var(--a-rose-100);
	--a-surface: var(--a-rose-50);
	--a-line: rgba(25, 25, 26, .10);
	background-color: var(--a-bg);
	color: var(--a-fg);
}

/* Tono bianco: la vetrina dei prodotti, dove i packshot si fondono con la superficie. */
.a-tone-white,
[data-tone="white"] {
	--a-bg: var(--a-white);
	--a-bg-2: var(--a-silk);
	background-color: var(--a-bg);
	color: var(--a-fg);
}