/* =============================================================================
   GVN Base — CONTRATTO DEI DESIGN TOKEN
   -----------------------------------------------------------------------------
   Questo file definisce l'INTERFACCIA grafica: i nomi delle variabili che TUTTI
   i componenti usano. I valori qui sono un default NEUTRO: ogni skin (tema
   figlio) ridefinisce solo i valori in un proprio file (es. skin.css), senza
   toccare i componenti. Regola d'oro: i componenti usano SOLO var(--…) di questo
   contratto, mai colori/misure hard-coded.

   Riconciliazioni chiave (evitano rotture tra brand diversi):
   - --color-action è DISACCOPPIATO da --color-primary: l'identità del brand e il
     colore delle azioni/CTA sono ruoli distinti (in un brand la CTA è il primario,
     in un altro il secondario). I bottoni usano --color-action.
   - --focus-ring è una box-shadow pronta all'uso; --focus-ring-color è il colore.
   - --shadow-md è SEMPRE elevazione; l'effetto "glow" di brand è --shadow-glow.
   - i gradient hanno un fallback piatto, così i brand "flat" non restano vuoti.

   Nota editor: i token sono definiti anche su .editor-styles-wrapper perché il
   block editor "scopa" i CSS del tema sotto quel contenitore; senza, le
   variabili su :root non si applicherebbero nell'anteprima dei blocchi.
   ========================================================================== */

:root, body, .editor-styles-wrapper {

	/* ---- Neutri (default freddo; le skin li ridefiniscono) ---- */
	--neutral-50:  #f7f8fa;
	--neutral-100: #eef0f3;
	--neutral-200: #dde1e7;
	--neutral-300: #c2c8d1;
	--neutral-400: #9aa3b0;
	--neutral-500: #6f7989;
	--neutral-600: #515b6b;
	--neutral-700: #3b4350;
	--neutral-800: #272d37;
	--neutral-900: #161a20;
	--white:       #ffffff;

	/* ---- Brand: identità (primario) ---- */
	--color-primary:        #324158;
	--color-primary-hover:  #2a3648;
	--color-primary-subtle: #f0f3f7;
	--on-primary:           #ffffff;

	/* ---- Brand: accento/profondità (secondario) ---- */
	--color-secondary:       #3e68b0;
	--color-secondary-hover: #355a98;
	--on-secondary:          #ffffff;

	/* ---- Ruolo AZIONE (CTA, link, focus) — distinto dall'identità ---- */
	--color-action:        #3e68b0;
	--color-action-hover:  #355a98;
	--color-action-subtle: #eef3fa;
	--on-action:           #ffffff;
	/* Variante "calda" dell'accento, per i kicker/eyebrow su fondo scuro.
	   Default = colore azione; la skin può darne una tinta più calda. */
	--accent-warm:         var(--color-action);

	/* ---- Gradient (fallback piatto per brand "flat") ---- */
	--gradient-primary:   var(--color-primary);
	--gradient-secondary: var(--color-secondary);
	--gradient-hero:      var(--color-primary);

	/* ---- Stati ---- */
	--color-success:    #1f9d57;  --color-success-bg: #e8f6ee;
	--color-warning:    #d98c1f;  --color-warning-bg: #fcf4e4;
	--color-error:      #d64545;  --color-error-bg:   #fbe9e7;
	--color-info:       #3e68b0;  --color-info-bg:    #eef3fa;

	/* ---- Testo ---- */
	--text-primary:   #1f2734;
	--text-secondary: var(--neutral-600);
	--text-muted:     var(--neutral-500);
	--text-on-primary: var(--on-primary);
	--text-on-dark:    #ffffff;
	--text-link:       var(--color-action);
	--text-link-hover: var(--color-action-hover);
	--text-accent:     var(--color-secondary);

	/* ---- Superfici ---- */
	--surface-page:   var(--neutral-50);
	--surface-card:   var(--white);
	--surface-muted:  var(--neutral-100);
	--surface-sunken: var(--color-primary-subtle);
	--surface-dark:   var(--neutral-900);
	--surface-brand:  var(--color-primary);
	--on-surface-dark: #ffffff;

	/* ---- Bordi & focus ---- */
	--border-default:     var(--neutral-200);
	--border-strong:      var(--neutral-300);
	--divider:            var(--neutral-100);
	--border-on-dark:     rgba(255, 255, 255, 0.18);
	--border-brand:       var(--color-action);
	--border-width:        1px;
	--border-width-strong: 2px;
	--focus-ring-color:   var(--color-action);
	--focus-ring-width:   3px;
	--focus-ring:         0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 40%, transparent);

	/* ---- Spaziatura (scala 4/8) ---- */
	--space-0: 0;
	--space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
	--space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
	--space-32: 128px;

	/* ---- Layout ---- */
	--container:      1280px;
	--content-width:  760px;
	--measure:        70ch;
	--gutter:         var(--space-6);
	--section-gap:    var(--space-20);
	--section-gap-sm: var(--space-12);

	/* ---- Raggi ---- */
	--radius-sm:   6px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-xl:   28px;
	--radius-full: 9999px;

	/* ---- Ombre (md = elevazione; glow = effetto di brand, separato) ---- */
	--shadow-sm:         0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow-md:         0 2px 8px rgba(16, 24, 40, 0.08);
	--shadow-lg:         0 8px 24px rgba(16, 24, 40, 0.10);
	--shadow-card:       0 4px 24px -8px rgba(16, 24, 40, 0.16);
	--shadow-card-hover: 0 8px 32px -8px rgba(16, 24, 40, 0.22);
	--shadow-glow:       0 0 0 rgba(0, 0, 0, 0);

	/* ---- Tipografia: famiglie (font gestiti da WordPress via theme.json) ----
	   Le skin registrano i loro font in theme.json (slug "sans"/"mono"), che
	   WordPress espone come --wp--preset--font-family--*. Qui li mappiamo ai
	   ruoli con fallback di sistema, così la base funziona anche da sola. */
	--font-body:    var(--wp--preset--font-family--sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	--font-display: var(--font-body);
	--font-mono:    var(--wp--preset--font-family--mono, ui-monospace, "Courier New", Courier, monospace);
	--font-accent:  var(--font-mono);

	/* ---- Tipografia: scala per ruolo ---- */
	--fs-display: 3.5rem;
	--fs-h1:      2.75rem;
	--fs-h2:      2.125rem;
	--fs-h3:      1.5rem;
	--fs-h4:      1.25rem;
	--fs-body-lg: 1.125rem;
	--fs-body:    1rem;
	--fs-caption: 0.875rem;
	--fs-small:   0.875rem;
	--fs-micro:   0.75rem;

	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	--leading-none:   1;
	--leading-tight:  1.15;
	--leading-snug:   1.3;
	--leading-normal: 1.6;

	--tracking-tight:  -0.01em;
	--tracking-normal: 0;
	--tracking-wide:   0.06em;

	/* ---- Movimento ---- */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast:   120ms;
	--duration-normal: 200ms;
	--duration-slow:   320ms;

	/* ---- Livelli (z-index) ---- */
	--z-header:  1000;
	--z-drawer:  1200;
	--z-overlay: 1100;
	--z-toast:   1500;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-normal: 0ms;
		--duration-slow: 0ms;
	}
}