/**
 * Design token.
 *
 * Questo e l'UNICO file in cui si dichiarano valori di colore, tipografia,
 * spaziatura e dimensione. Tutti gli altri file usano i token, mai valori
 * scritti a mano.
 *
 * I valori derivano dal design system Easybed: palette navy e corallo su fondi
 * caldi (cream e sand), Montserrat per i titoli e DM Sans per il testo, ritmo
 * verticale generoso e arrotondamenti progressivi.
 *
 * I nomi dei token non cambiano rispetto alla base del tema: cambiano solo i
 * valori. Nessun token e dichiarato due volte, qui o altrove.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colore
	 *
	 * Contrasti verificati su AA:
	 *   --easybed-color-text        su --easybed-color-surface   > 15:1
	 *   --easybed-color-text-muted  su --easybed-color-surface   > 5:1
	 *   --easybed-color-accent-contrast su --easybed-color-accent > 4.5:1
	 *   --easybed-color-navy        su --easybed-color-surface   > 14:1
	 *
	 * Sostituendo questi valori, il contrasto va riverificato.
	 * ------------------------------------------------------------------- */
	--easybed-color-text: #1a1c1c;
	--easybed-color-text-muted: #5a5d66;
	--easybed-color-surface: #faf9f6;
	--easybed-color-surface-alt: #ffffff;
	--easybed-color-border: #d9dae1;

	/*
	 * Il corallo del marchio e #e9453f. Su bianco raggiunge 3.9:1, sotto la
	 * soglia AA per il testo normale: come colore di sfondo dei pulsanti si usa
	 * quindi una versione leggermente piu scura, che supera 4.5:1 con il bianco.
	 * Il corallo pieno resta disponibile per elementi decorativi e display.
	 */
	--easybed-color-accent: #d63a34;
	--easybed-color-accent-hover: #b82a24;
	--easybed-color-accent-contrast: #ffffff;
	--easybed-color-accent-bright: #e9453f;

	--easybed-color-navy: #00234d;
	--easybed-color-navy-soft: #15396a;
	--easybed-color-navy-contrast: #ffffff;

	/*
	 * Testo secondario sul navy del footer. Su #00234d da 7,4:1: sopra AA
	 * anche per il testo piccolo, che nel footer e la norma.
	 */
	--easybed-color-on-navy-muted: #b9c6da;
	--easybed-color-sand: #e2d7c6;

	/*
	 * Verde di conferma, usato solo per le spunte del confronto. Sul navy della
	 * card supera 3:1, la soglia richiesta agli elementi grafici.
	 */
	--easybed-color-positive: #3fa46a;

	--easybed-color-focus: #00234d;

	/* ---------------------------------------------------------------------
	 * Tipografia
	 *
	 * Montserrat per i titoli, DM Sans per il testo. I file sono ospitati dal
	 * tema (assets/fonts/, dichiarati in assets/css/fonts.css): nessuna
	 * richiesta a servizi esterni, che invierebbero l'indirizzo IP di chi
	 * visita a terzi. Lo stack di sistema resta come rete di sicurezza per il
	 * tempo di caricamento e per il caso in cui un file non arrivi.
	 * ------------------------------------------------------------------- */
	--easybed-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--easybed-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
	--easybed-font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;

	--easybed-font-size-s: 0.875rem;
	--easybed-font-size-base: 1.125rem;
	--easybed-font-size-m: 1.25rem;
	--easybed-font-size-l: 1.75rem;
	--easybed-font-size-xl: 2.25rem;
	--easybed-font-size-xxl: 2.625rem;

	--easybed-line-height-tight: 1.15;
	--easybed-line-height-base: 1.6;

	--easybed-font-weight-normal: 400;
	--easybed-font-weight-medium: 500;
	--easybed-font-weight-semibold: 600;
	--easybed-font-weight-bold: 700;

	--easybed-letter-spacing-tight: -0.02em;
	--easybed-letter-spacing-caps: 0.05em;

	/* ---------------------------------------------------------------------
	 * Spaziatura
	 *
	 * Unita di base 8px, come nel design system.
	 * ------------------------------------------------------------------- */
	--easybed-space-1: 0.25rem;
	--easybed-space-2: 0.5rem;
	--easybed-space-3: 0.75rem;
	--easybed-space-4: 1rem;
	--easybed-space-5: 1.5rem;
	--easybed-space-6: 2rem;
	--easybed-space-7: 3rem;
	--easybed-space-8: 4rem;

	/*
	 * Ritmo verticale della landing.
	 *
	 * Il valore e il padding di UN lato della sezione: fra due sezioni
	 * consecutive lo spazio vuoto e quindi il doppio. E la ragione per cui la
	 * pagina appariva sfilacciata: con 120px per lato ogni confine valeva 240px
	 * di bianco, piu di un terzo di schermo senza contenuto.
	 *
	 * I valori scelti tengono il confine entro ~128px su desktop, dentro
	 * l'intervallo di riferimento del design.
	 */
	--easybed-section-space-mobile: 3rem;    /* 48px -> confine 96px  */
	--easybed-section-space-tablet: 3.5rem;  /* 56px -> confine 112px */
	--easybed-section-space-desktop: 4rem;   /* 64px -> confine 128px */
	--easybed-section-gap: var(--easybed-section-space-mobile);

	/*
	 * Distanza fra il titolo di sezione e il contenuto che introduce. Va tenuta
	 * distinta dal ritmo fra sezioni: comprimere entrambi con lo stesso valore
	 * fa perdere la gerarchia.
	 */
	--easybed-section-heading-gap: 2rem;

	/* ---------------------------------------------------------------------
	 * Forme
	 *
	 * Arrotondamento progressivo: piu il blocco e grande, piu e morbido.
	 * ------------------------------------------------------------------- */
	--easybed-radius-s: 0.75rem;
	--easybed-radius-m: 1.5rem;
	--easybed-radius-l: 2rem;
	--easybed-radius-xl: 2.5rem;
	--easybed-radius-pill: 100px;
	--easybed-border-width: 1px;

	/* ---------------------------------------------------------------------
	 * Profondita
	 *
	 * Ombre molto morbide, tinte di navy per restare integrate col marchio.
	 * ------------------------------------------------------------------- */
	--easybed-shadow-soft: 0 10px 30px rgba(21, 57, 106, 0.05);
	--easybed-shadow-card: 0 4px 16px rgba(21, 57, 106, 0.06);

	/* ---------------------------------------------------------------------
	 * Layout
	 *
	 * --easybed-content-width deve restare allineato al valore di $content_width
	 * dichiarato in inc/setup.php.
	 * ------------------------------------------------------------------- */
	--easybed-content-width: 720px;
	--easybed-container-width: 1280px;
	--easybed-container-narrow: 800px;
	--easybed-container-padding: var(--easybed-space-5);

	/* Altezza della barra di navigazione, riservata in cima alla hero. */
	--easybed-header-height: 4.25rem;

	/* ---------------------------------------------------------------------
	 * Focus
	 *
	 * Il focus deve essere sempre visibile e con contrasto sufficiente:
	 * non e un dettaglio estetico, e il modo in cui chi naviga da tastiera
	 * sa dove si trova.
	 * ------------------------------------------------------------------- */
	--easybed-focus-width: 3px;
	--easybed-focus-offset: 2px;

	/* ---------------------------------------------------------------------
	 * Movimento
	 * ------------------------------------------------------------------- */
	--easybed-transition: 200ms ease-in-out;
}

/*
 * Da tablet in su il respiro aumenta: margini laterali e distanza fra sezioni
 * seguono il ritmo del design desktop.
 */
@media (min-width: 48em) {
	:root {
		--easybed-container-padding: var(--easybed-space-6);
		--easybed-header-height: 5.25rem;
		--easybed-section-gap: var(--easybed-section-space-tablet);
		--easybed-section-heading-gap: 2.5rem;
		--easybed-font-size-xxl: 4.5rem;
		--easybed-font-size-xl: 2.25rem;
	}
}

/* Da desktop il ritmo si allarga, ma senza tornare ai vuoti di prima. */
@media (min-width: 64em) {
	:root {
		--easybed-section-gap: var(--easybed-section-space-desktop);
		--easybed-section-heading-gap: 2.75rem;
	}
}

/*
 * Chi ha chiesto meno animazioni non deve riceverne. Nessuna eccezione.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--easybed-transition: 0ms;
	}
}