/*
 * Design token — Pianeta 21
 *
 * I colori non sono scelti a tavolino: ciano e verde sono estratti dal logo
 * ufficiale (risorse/logo_pianeta21.png) e coincidono con quelli dell'handoff
 * Claude Design. Vedi docs/design-system.md per la verifica numerica.
 *
 *   logo #00A0C0 (hue 190°)  ->  handoff #00A7C6   ciano
 *   logo #80B018 (hue  79°)  ->  handoff #82B718   verde
 *
 * Le varianti scure esistono per il contrasto: il ciano e il verde puri non
 * raggiungono 4,5:1 su bianco e non vanno usati per il testo.
 */

:root {
	/* --- Marchio ------------------------------------------------------- */
	--p21-cyan: #00a7c6;          /* colore del logo: superfici, decorazioni */
	--p21-cyan-text: #007e96;     /* variante accessibile per il testo       */
	--p21-cyan-dark: #00657a;     /* hover e stati premuti                   */
	--p21-cyan-300: #8fd9e8;
	--p21-cyan-200: #b6e4ee;
	--p21-cyan-100: #d6eef4;
	--p21-cyan-50: #e6f6fa;

	--p21-green: #82b718;         /* colore del logo                         */
	--p21-green-text: #587c0e;    /* variante accessibile per il testo       */
	--p21-green-dark: #4c6b0c;
	--p21-green-900: #3d5609;
	--p21-green-50: #f1f7e3;

	/* --- Neutri --------------------------------------------------------- */
	--p21-ink: #14232b;           /* testo principale                        */
	--p21-ink-soft: #243642;
	--p21-grey-700: #3f5560;
	--p21-grey-600: #64737d;      /* testo secondario                        */
	--p21-grey-500: #8a98a0;
	--p21-grey-400: #a9b5bc;
	--p21-grey-300: #c9d4da;      /* bordi                                   */
	--p21-grey-200: #dee7eb;
	--p21-grey-100: #eef3f5;      /* fondi di sezione                        */
	--p21-grey-50: #f7fafb;
	--p21-white: #ffffff;

	/* --- Semantici ------------------------------------------------------ */
	--p21-error: #b3261e;
	--p21-warning: #8a5a00;
	--p21-success: var(--p21-green-text);

	/* --- Ruoli ---------------------------------------------------------- */
	--p21-text: var(--p21-ink);
	--p21-text-muted: var(--p21-grey-600);
	--p21-background: var(--p21-white);
	--p21-surface: var(--p21-grey-50);
	--p21-border: var(--p21-grey-300);
	--p21-link: var(--p21-cyan-text);
	--p21-link-hover: var(--p21-cyan-dark);

	/* --- Tipografia ----------------------------------------------------- */
	--p21-font-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--p21-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Scala fluida: si adatta alla viewport senza media query, evitando gli
	   scalini di dimensione fra un breakpoint e l'altro. */
	--p21-text-xs: 0.8125rem;
	--p21-text-sm: 0.9375rem;
	--p21-text-base: 1.0625rem;
	--p21-text-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
	--p21-text-xl: clamp(1.375rem, 0.8vw + 1.2rem, 1.625rem);
	--p21-text-2xl: clamp(1.625rem, 1.4vw + 1.35rem, 2.125rem);
	--p21-text-3xl: clamp(2rem, 2.4vw + 1.5rem, 2.875rem);
	--p21-text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);

	--p21-leading-tight: 1.12;
	--p21-leading-snug: 1.3;
	--p21-leading-normal: 1.6;
	--p21-tracking-tight: -0.02em;
	--p21-tracking-wide: 0.14em;

	/* --- Spaziatura (base 4/8 px) --------------------------------------- */
	--p21-space-1: 0.25rem;
	--p21-space-2: 0.5rem;
	--p21-space-3: 0.75rem;
	--p21-space-4: 1rem;
	--p21-space-5: 1.5rem;
	--p21-space-6: 2rem;
	--p21-space-7: 2.5rem;
	--p21-space-8: 3rem;
	--p21-space-9: 4rem;
	--p21-space-10: 5rem;
	--p21-space-11: 6.5rem;
	--p21-space-12: 8rem;
	--p21-section: clamp(3.5rem, 7vw, 7.5rem);

	/* --- Geometrie ------------------------------------------------------ */
	--p21-radius-xs: 4px;
	--p21-radius-sm: 10px;
	--p21-radius-md: 12px;
	--p21-radius-lg: 16px;
	--p21-radius-xl: 20px;
	--p21-radius-2xl: 24px;
	--p21-radius-pill: 999px;

	/* Ombre appena percettibili: nessun look da dashboard. */
	--p21-shadow-sm: 0 1px 2px rgba(20, 35, 43, 0.06);
	--p21-shadow-md: 0 4px 16px rgba(20, 35, 43, 0.07);
	--p21-shadow-lg: 0 12px 32px rgba(20, 35, 43, 0.09);

	/* --- Layout --------------------------------------------------------- */
	--p21-container: 1280px;
	--p21-container-narrow: 780px;
	--p21-gutter: clamp(1rem, 4vw, 2.5rem);

	/* --- Motion --------------------------------------------------------- */
	--p21-duration-fast: 200ms;
	--p21-duration-slow: 400ms;
	--p21-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* --- Accessibilita' -------------------------------------------------- */
	--p21-focus-ring: 3px solid var(--p21-cyan-dark);
	--p21-focus-offset: 2px;
	--p21-touch-target: 44px;
}

/*
 * Chi ha chiesto meno animazioni deve ottenerne davvero meno: si azzerano le
 * durate anziche' disabilitare le transizioni, cosi' gli stati finali restano
 * corretti e nulla resta a meta' strada.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--p21-duration-fast: 1ms;
		--p21-duration-slow: 1ms;
	}
}