/* =============================================================================
   AlfaMed — SKIN: solo i VALORI dei token del contratto (gvn-base/tokens.css).
   Nessun selettore nuovo, nessuna regola di componente: quelle stanno in site.css.

   Personalità: medicale sobria. Navy = identità, blu = accento (mai un azzurro
   "clinico" saturo). Titoli in serif, dati in mono. Ombre discrete, raggi
   moderati. Chiarezza prima dell'effetto.

   Nota: molti valori qui coincidono con i DEFAULT del contratto — e non è un
   caso: il contratto è stato scritto derivandolo proprio da AlfaMed. Li
   riscriviamo lo stesso, per intero, perché una skin deve dire cosa vuole:
   se domani i default cambiassero, AlfaMed non deve cambiare con loro.
   ========================================================================== */

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

	/* ---- Neutri (grigi freddi, intonati al navy) ---- */
	--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;

	/* ---- Identità: navy ---- */
	--color-primary:        #324158;
	--color-primary-hover:  #2a3648;
	--color-primary-subtle: #f0f3f7;
	--on-primary:           #ffffff;

	/* ---- Accento: blu ---- */
	--color-secondary:       #3e68b0;
	--color-secondary-hover: #355a98;
	--on-secondary:          #ffffff;

	/* ---- Azioni (CTA, link, focus) = il blu, non il navy ---- */
	--color-action:        #3e68b0;
	--color-action-hover:  #355a98;
	--color-action-subtle: #eef3fa;
	--on-action:           #ffffff;
	/* La base usa --accent-warm per i sopratitoli su fondo scuro (in Gulliver è
	   un arancione). AlfaMed non ha un accento caldo: sul navy il sopratitolo
	   schiarisce, non cambia tinta. Un arancione qui sarebbe fuori brand. */
	--accent-warm:         #8aa9d8;

	/* ---- Gradient: uno solo, e appena accennato ----
	   Il design system è esplicito: sfondi piatti, «un solo gradiente molto tenue
	   navy→bg nell'hero». Niente gradienti decorativi. */
	--gradient-primary:   linear-gradient(135deg, #3e68b0, #324158);
	--gradient-secondary: linear-gradient(135deg, #324158, #2a3648);
	--gradient-hero:      linear-gradient(160deg, #324158 0%, #2a3648 60%, #243040 100%);

	/* ---- Stati (esiti clinici: mai affidati al solo colore) ---- */
	--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-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);   /* #f7f8fa, non bianco */
	--surface-card:    var(--white);
	--surface-muted:   var(--neutral-100);
	--surface-sunken:  var(--color-primary-subtle);
	--surface-dark:    #324158;

	/* Il SECONDO navy: il footer del design system è più scuro della fascia CTA
	   (primary-900 contro primary-700). Il contratto della base ne prevede uno
	   solo; questo è di AlfaMed, e per questo porta il prefisso --am-. */
	--am-surface-deep: #1f2734;             /* il navy d'identità, non un nero */
	--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.16);
	--border-brand:   var(--color-action);
	--focus-ring-color: var(--color-action);
	--focus-ring-width: 3px;
	--focus-ring:       0 0 0 3px rgba(62, 104, 176, 0.40);

	/* ---- Layout ---- */
	--container:     1200px;   /* il design system dice 1200, non 1280 */
	--content-width: 720px;    /* larghezza di lettura */
	--header-h:      90px;     /* header più alto di Gulliver: c'è anche il telefono */
	--section-gap:    var(--space-24);  /* 96px: gap fra sezioni 64–96 */
	--section-gap-sm: var(--space-16);

	/* ---- Raggi: moderati, mai eccessivi ---- */
	--radius-sm:   4px;
	--radius-md:   8px;    /* il default del brand */
	--radius-lg:   12px;   /* le card */
	--radius-xl:   16px;
	--radius-full: 9999px;

	/* ---- Ombre: sobrie, mai drammatiche. Tinte di navy, non di nero ---- */
	--shadow-sm:         0 1px 2px rgba(31, 39, 52, 0.06);
	--shadow-md:         0 2px 8px rgba(31, 39, 52, 0.08);
	--shadow-lg:         0 8px 24px rgba(31, 39, 52, 0.10);
	--shadow-card:       0 2px 8px rgba(31, 39, 52, 0.08);
	--shadow-card-hover: 0 8px 24px rgba(31, 39, 52, 0.12);
	/* Nessun bagliore: sarebbe l'opposto della sobrietà che chiede il brand. */
	--shadow-glow:       none;

	/* ---- Tipografia ----
	   Il contratto mappa --font-display su --font-body. Qui lo si sposta sul
	   SERIF: è la scelta che dà ad AlfaMed la sua faccia (i titoli richiamano il
	   logotipo). Gli slug sans/serif/mono arrivano da theme.json. */
	--font-body:    var(--wp--preset--font-family--sans, Inter, system-ui, sans-serif);
	--font-display: var(--wp--preset--font-family--serif, "Source Serif 4", Georgia, serif);
	--font-mono:    var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
	--font-accent:  var(--font-mono);   /* sopratitoli e dati clinici */

	/* Scala base 16, ratio 1.250 */
	--fs-display: 3.75rem;  /* 60 */
	--fs-h1:      3rem;     /* 48 */
	--fs-h2:      2.25rem;  /* 36 */
	--fs-h3:      1.875rem; /* 30 */
	--fs-h4:      1.5rem;   /* 24 */
	--fs-body-lg: 1.125rem; /* 18 */
	--fs-body:    1rem;     /* 16 */
	--fs-caption: 0.875rem; /* 14 */
	/* La barra in cima sta fra i due gradini della scala: 15px. Non è un capriccio
	   del design — a 14px le voci di menu si leggono come didascalie, a 16px
	   pesano quanto il testo della pagina. Il contratto non ha questo gradino
	   perché serve a un solo posto: sta qui, con il prefisso del sito. */
	--am-fs-nav:  0.9375rem; /* 15 */

	/* ---- I PIOLI CHE MANCANO ALLA SCALA ----
	   La scala della base salta: … 24 · [32] · 40 … Il design di AlfaMed usa 28, 44
	   e 56 — misure che nel contratto non ci sono.

	   ⚠️ E NON LO DICE NESSUNO. `padding: var(--space-7) var(--space-6)` con
	   `--space-7` inesistente non è "28px mancato": il browser considera INVALIDA
	   l'intera dichiarazione e la BUTTA VIA. La card resta senza padding, e non
	   compare un errore da nessuna parte. Era successo in sette punti.

	   Portano il nome della scala, non un prefisso `--am-`, perché SONO la scala:
	   ne completano i buchi. Il giorno che un secondo sito ne ha bisogno, salgono
	   in tokens.css — è la regola di promozione di sempre. */
	--space-7:  28px;
	--space-11: 44px;
	--space-14: 56px;
	--fs-small:   0.875rem;
	--fs-micro:   0.75rem;  /* 12 */

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

	--leading-tight:  1.2;
	--leading-snug:   1.4;
	--leading-normal: 1.6;

	--tracking-tight: -0.01em;
	--tracking-wide:   0.02em;   /* più stretto di Gulliver: qui è misurato */

	/* ---- Movimento: discreto e funzionale ---- */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--duration-fast:   120ms;
	--duration-normal: 180ms;
	--duration-slow:   240ms;
}

/* I titoli sono semibold, non bold: il serif a 700 diventa pesante e "editoriale",
   mentre il brand vuole essere serio ma leggero. */
:where(h1, h2, h3, h4) { font-weight: var(--weight-semibold); }