/* =========================================================================
 * QuoVadis Core v2 — Design Tokens
 * Variabili CSS, scala tipografica, spaziature, ombre, z-index.
 * Caricato per primo: tutti gli altri fogli stile dipendono da queste var.
 * ========================================================================= */

/* Font principale — Plus Jakarta Sans (300/400/500/600/700/800) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
	/* --- Palette brand ---------------------------------------------------- */
	/* Verde QuoVadis */
	--qv-green-50:  #f0fdf4;
	--qv-green-100: #dcfce7;
	--qv-green-200: #bbf7d0;
	--qv-green-300: #86efac;
	--qv-green-400: #4ade80;
	--qv-green-500: #22c55e;
	--qv-green-600: #16a34a; /* brand primario */
	--qv-green-700: #15803d;
	--qv-green-800: #166534;
	--qv-green-900: #14532d;

	/* Blu QuoVadis */
	--qv-blue-50:  #eff6ff;
	--qv-blue-100: #dbeafe;
	--qv-blue-200: #bfdbfe;
	--qv-blue-300: #93c5fd;
	--qv-blue-400: #60a5fa;
	--qv-blue-500: #3b82f6;
	--qv-blue-600: #0067D7; /* brand secondario */
	--qv-blue-700: #0052ad;
	--qv-blue-800: #003e83;
	--qv-blue-900: #002a59;

	/* Neutri */
	--qv-neutral-0:   #ffffff;
	--qv-neutral-50:  #fafafa;
	--qv-neutral-100: #f5f5f5;
	--qv-neutral-200: #e5e5e5;
	--qv-neutral-300: #d4d4d4;
	--qv-neutral-400: #a3a3a3;
	--qv-neutral-500: #737373;
	--qv-neutral-600: #525252;
	--qv-neutral-700: #404040;
	--qv-neutral-800: #262626;
	--qv-neutral-900: #171717;

	/* Stato */
	--qv-danger:   #dc2626;
	--qv-danger-bg:#fee2e2;
	--qv-success:  #16a34a;
	--qv-success-bg:#dcfce7;
	--qv-warning:  #d97706;
	--qv-warning-bg:#fef3c7;
	--qv-info:     #0067D7;
	--qv-info-bg:  #dbeafe;

	/* Alias semantici */
	--qv-bg:         var(--qv-neutral-0);
	--qv-bg-alt:     var(--qv-neutral-50);
	--qv-fg:         var(--qv-neutral-900);
	--qv-fg-muted:   var(--qv-neutral-600);
	--qv-border:     var(--qv-neutral-200);
	--qv-border-strong: var(--qv-neutral-300);
	--qv-link:       var(--qv-blue-600);
	--qv-link-hover: var(--qv-blue-700);

	/* --- Tipografia ------------------------------------------------------- */
	--qv-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--qv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Scala fluida — mobile first */
	--qv-fs-xs:   0.75rem;   /* 12px */
	--qv-fs-sm:   0.875rem;  /* 14px */
	--qv-fs-base: 1rem;      /* 16px */
	--qv-fs-md:   1.125rem;  /* 18px */
	--qv-fs-lg:   1.25rem;   /* 20px */
	--qv-fs-xl:   1.5rem;    /* 24px */
	--qv-fs-2xl:  1.875rem;  /* 30px */
	--qv-fs-3xl:  2.25rem;   /* 36px */
	--qv-fs-4xl:  3rem;      /* 48px */

	/* Pesi */
	--qv-fw-light:    300;
	--qv-fw-regular:  400;
	--qv-fw-medium:   500;
	--qv-fw-semibold: 600;
	--qv-fw-bold:     700;
	--qv-fw-extra:    800;

	/* Line height */
	--qv-lh-tight:  1.2;
	--qv-lh-snug:   1.35;
	--qv-lh-normal: 1.5;
	--qv-lh-relaxed:1.65;

	/* --- Spaziature (scala su 4px) ---------------------------------------- */
	--qv-sp-1: 0.25rem;  /* 4  */
	--qv-sp-2: 0.5rem;   /* 8  */
	--qv-sp-3: 0.75rem;  /* 12 */
	--qv-sp-4: 1rem;     /* 16 */
	--qv-sp-5: 1.5rem;   /* 24 */
	--qv-sp-6: 2rem;     /* 32 */
	--qv-sp-7: 3rem;     /* 48 */
	--qv-sp-8: 4rem;     /* 64 */

	/* --- Raggi ------------------------------------------------------------ */
	--qv-r-sm:   4px;
	--qv-r-md:   8px;
	--qv-r-lg:   16px;
	--qv-r-xl:   24px;
	--qv-r-full: 9999px;

	/* --- Ombre ------------------------------------------------------------ */
	--qv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--qv-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
	--qv-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.10);
	--qv-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.14);
	--qv-shadow-focus: 0 0 0 3px rgba(22, 163, 74, 0.30);
	--qv-shadow-focus-blue: 0 0 0 3px rgba(0, 103, 215, 0.30);

	/* --- Z-index ---------------------------------------------------------- */
	--qv-z-base:    1;
	--qv-z-sticky:  100;
	--qv-z-header:  200;
	--qv-z-overlay: 800;
	--qv-z-modal:   900;
	--qv-z-toast:   1000;

	/* --- Layout ----------------------------------------------------------- */
	--qv-container-max: 1200px;
	--qv-header-h: 64px;

	/* --- Transizioni ------------------------------------------------------ */
	--qv-tr-fast:   120ms ease;
	--qv-tr-normal: 200ms ease;
	--qv-tr-slow:   320ms ease;
}

/* =========================================================================
 * Reset minimo applicato solo dentro .qv-body (no global pollution).
 * ========================================================================= */
.qv-body,
.qv-body *,
.qv-body *::before,
.qv-body *::after {
	box-sizing: border-box;
}

.qv-body {
	font-family: var(--qv-font);
	font-size: var(--qv-fs-base);
	line-height: var(--qv-lh-normal);
	color: var(--qv-fg);
	background: var(--qv-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.qv-body img,
.qv-body picture,
.qv-body video,
.qv-body svg {
	max-width: 100%;
	height: auto;
	display: block;
}

.qv-body h1,
.qv-body h2,
.qv-body h3,
.qv-body h4,
.qv-body h5,
.qv-body h6 {
	font-family: var(--qv-font);
	font-weight: var(--qv-fw-bold);
	line-height: var(--qv-lh-tight);
	color: var(--qv-fg);
	margin: 0 0 var(--qv-sp-3);
}

.qv-body h1 { font-size: var(--qv-fs-3xl); }
.qv-body h2 { font-size: var(--qv-fs-2xl); }
.qv-body h3 { font-size: var(--qv-fs-xl);  }
.qv-body h4 { font-size: var(--qv-fs-lg);  }
.qv-body h5 { font-size: var(--qv-fs-md);  }
.qv-body h6 { font-size: var(--qv-fs-base);}

.qv-body p { margin: 0 0 var(--qv-sp-4); }

.qv-body a {
	color: var(--qv-link);
	text-decoration: none;
	transition: color var(--qv-tr-fast);
}

.qv-body a:hover,
.qv-body a:focus-visible {
	color: var(--qv-link-hover);
	text-decoration: underline;
}

.qv-body :focus-visible {
	outline: 2px solid var(--qv-green-600);
	outline-offset: 2px;
	border-radius: var(--qv-r-sm);
}

/* Tablet up */
@media (min-width: 768px) {
	.qv-body h1 { font-size: var(--qv-fs-4xl); }
	.qv-body h2 { font-size: var(--qv-fs-3xl); }
	.qv-body h3 { font-size: var(--qv-fs-2xl); }
}

/* =========================================================================
 * Container — wrapper centrato con padding laterale responsivo.
 * ========================================================================= */
.qv-container {
	width: 100%;
	max-width: var(--qv-container-max);
	margin-inline: auto;
	padding-inline: var(--qv-sp-4);
}

@media (min-width: 768px) {
	.qv-container {
		padding-inline: var(--qv-sp-5);
	}
}

@media (min-width: 1024px) {
	.qv-container {
		padding-inline: var(--qv-sp-6);
	}
}

/* =========================================================================
 * v2.2 — Token commerciali / premium (additivi, non-breaking)
 * ========================================================================= */
:root {
	/* Accento editoriale terracotta ligure (fiducia, non azione) */
	--qv-terracotta:        #C8643C;
	--qv-terracotta-dark:   #9E4B2A;
	--qv-terracotta-bg:     #FBEDE6;
	--qv-terracotta-border: rgba(200, 100, 60, 0.22);

	/* Colori tier */
	--qv-tier-ambassador:    #B8860B;
	--qv-tier-ambassador-bg: #FEF9E7;

	/* Display + tracking */
	--qv-fs-5xl: 3.75rem;
	--qv-tracking-tight: -0.02em;
	--qv-tracking-wide:  0.06em;

	/* Easing identitario */
	--qv-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--qv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}