/* ============================================================
   tokens.css — IL CONTRATTO
   Palette, tipografia, spazi. Derivati dal marchio Fisiosport
   (navy profondo + oro/ambra + bianco). Niente rosso/verde:
   ogni distinzione è portata anche da testo/forma, mai dal
   solo colore (vincolo daltonismo rosso/verde).
   Nessun valore di stile vive inline: tutto passa da qui.
   ============================================================ */

:root {
  /* --- Palette marchio --- */
  --navy:        #122A4A; /* strutturale, hero, titoli forti */
  --navy-700:    #1B3A5E; /* superfici su fondo scuro */
  --navy-500:    #2C4E73; /* linee/bordi su fondo scuro */
  --navy-ink:    #0E2138; /* testo massimo contrasto */

  --gold:        #DDA01C; /* accento = valore, CTA, evidenza piena */
  --gold-700:    #B27F12; /* oro decorativo su chiaro / hover (background) */
  --gold-ink:    #8A6410; /* oro TESTO su chiaro: contrasto AA (>=4.5:1 sul paper) */
  --gold-soft:   #F3D690; /* riempimenti tenui */

  --paper:       #F5F8FB; /* fondo pagina (chiaro, medicale) */
  --surface:     #FFFFFF; /* card e pannelli */
  --surface-alt: #EEF3F8; /* fasce alternate */
  --line:        #D7E0EA; /* bordi su fondo chiaro */
  --media-bg:    #000000; /* fondo dei riquadri video/immagine (letterbox) */

  --text:        #16263B; /* corpo su chiaro (AA ampio) */
  --text-soft:   #46586E; /* secondario su chiaro (AA) */
  --on-navy:     #FFFFFF; /* testo su navy */
  --on-navy-soft:#C6D3E2; /* secondario su navy (AA) */

  /* Stati semantici — SEMPRE accoppiati a etichetta/forma, mai colore solo.
     Scelti fuori dall'asse rosso/verde. */
  --signal-strong: var(--gold);     /* forza piena */
  --signal-muted:  var(--navy-500); /* segmento vuoto / debole */

  /* --- Tipografia (system stack: zero dipendenze esterne) --- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2rem, 5vw, 3rem);
  --fs-h1:      clamp(1.85rem, 3.8vw, 2.4rem); /* alzato: resta sopra h2 anche a schermo stretto */
  --fs-h2:      1.7rem;   /* gradino netto sopra h3 (era 1.4) */
  --fs-h3:      1.3rem;   /* distinto dal corpo, non solo peso/colore (era 1.1) */
  --fs-body:    1.0625rem;  /* 17px */
  --fs-small:   0.875rem;   /* 14px */
  --fs-micro:   0.75rem;    /* 12px */

  --lh-tight: 1.2;
  --lh-body:  1.6;

  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;

  --track-label: 0.08em; /* lettere spaziate per micro-etichette */

  /* --- Spazi (base 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ritmo verticale unico tra macro-sezioni (padding sopra/sotto: lo stacco
     tra due sezioni consecutive vale 2x, con l'eventuale divisore al centro) */
  --section-gap: var(--sp-7);
  --divider: 1px solid var(--line); /* UN solo stile di linea, ai confini di sezione */

  /* --- Forma --- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(14, 33, 56, 0.06);
  --shadow:    0 6px 24px rgba(14, 33, 56, 0.10);
  --shadow-lg: 0 18px 48px rgba(14, 33, 56, 0.16);

  --maxw: 980px;       /* larghezza contenuto leggibile */
  --maxw-wide: 1180px; /* larghezza fasce */

  --transition: 220ms ease;
}