/* ============================================================
   ALPAMARINE — DESIGN TOKEN (fonte unica di colori/font/misure)
   Contratto M33b: ogni valore nel CSS referenzia un token di qui.
   Serve un valore nuovo → prima si aggiunge qui, poi si usa.
   Palette ufficiale: dichiarazione CEO 2026-08-24 (scheda-fatti §7).
   ============================================================ */

/* ---- Font self-hosted (DM Sans variabile, pesi 100-1000) ---- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../assets/font/dm-sans-variabile.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../assets/font/dm-sans-variabile-italic.woff2') format('woff2');
}

:root {
  /* ---- Colori brand (ufficiali) ---- */
  --blu:            #015E9F;  /* primario — CTA, titoli su chiaro, sfondi pieni */
  --turchese:       #54C7B2;  /* accento — SOLO decorativo o su fondo blu: su bianco non regge il contrasto testo (≈2,3:1) */
  --bianco:         #FFFFFF;

  /* ---- Derivati funzionali del blu (stessa tinta, ruoli diversi) ---- */
  --blu-scuro:      #024C81;  /* hover CTA primaria, gradienti hero */
  --blu-notte:      #062A44;  /* footer, overlay su foto, testo forte su turchese */
  --blu-velo:       #EDF5FB;  /* sfondi sezione alternati, card chiare */

  /* ---- Neutri ---- */
  --inchiostro:     #10222F;  /* testo principale su chiaro (contrasto >15:1) */
  --grigio:         #49606F;  /* testo secondario su chiaro (contrasto ≥7:1) */
  --linea:          #D9E4EC;  /* bordi, divisori */

  /* ---- Velature e superfici traslucide ---- */
  --velo-foto-alto:  rgba(6, 42, 68, 0.30);   /* gradiente hero, cima */
  --velo-foto-medio: rgba(6, 42, 68, 0.62);   /* gradiente hero, zona testo */
  --velo-foto-basso: rgba(6, 42, 68, 0.80);   /* gradiente hero, base */
  --vetro-chiaro:    rgba(255, 255, 255, 0.14); /* badge su foto */
  --vetro-bordo:     rgba(255, 255, 255, 0.35);
  --velo-pillola:    rgba(6, 42, 68, 0.72);      /* fondo pillole sulle foto */

  /* ---- Funzionali ---- */
  --stelle:         #E8A33D;  /* stelle recensioni (oro sobrio) */
  --whatsapp:       #128040;  /* bottoni WhatsApp — verde scurito per AA: 5,0:1 col testo bianco (misura 2026-08-24) */
  --whatsapp-scuro: #0E6B33;  /* hover (6,6:1) */
  --turchese-chiaro:#A8E5DA;  /* testo/link turchese SU FONDO BLU: 4,8:1 su --blu (il turchese pieno lì è 3,3:1 e non passa) */
  --errore:         #C0392B;  /* messaggi errore form */
  --ok:             #1E8A5A;  /* conferme */

  /* ---- Font ---- */
  --font-testo: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Sistema mono-famiglia (brand book §21): titoli bold/extrabold, corpo regular */
  --peso-corpo:     400;
  --peso-medio:     500;
  --peso-titolo:    700;
  --peso-forte:     800;

  /* ---- Scala tipografica fluida (mobile-first: base mai sotto 16px) ---- */
  --testo-xs:   0.8125rem;                            /* 13px — note legali, kicker */
  --testo-sm:   0.9375rem;                            /* 15px — meta, didascalie */
  --testo-base: 1rem;                                 /* 16px — corpo, campi form (≥16px = niente zoom iOS) */
  --testo-lg:   clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);   /* 17→19px — lead */
  --titolo-4:   clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem); /* 18→21px — titoli card */
  --titolo-3:   clamp(1.3125rem, 1.2rem + 0.8vw, 1.625rem);  /* 21→26px — H3 */
  --titolo-2:   clamp(1.625rem, 1.4rem + 1.4vw, 2.25rem);    /* 26→36px — H2 sezione */
  --titolo-1:   clamp(2rem, 1.6rem + 2.4vw, 3.25rem);        /* 32→52px — H1 hero */
  --interlinea-corpo:  1.6;
  --interlinea-titolo: 1.15;

  /* ---- Spaziature ---- */
  --spazio-2xs: 0.25rem;   /*  4px */
  --spazio-xs:  0.5rem;    /*  8px */
  --spazio-sm:  0.75rem;   /* 12px */
  --spazio-md:  1rem;      /* 16px */
  --spazio-lg:  1.5rem;    /* 24px */
  --spazio-xl:  2.25rem;   /* 36px */
  --spazio-2xl: 3.5rem;    /* 56px */
  --spazio-sezione: clamp(3rem, 2.2rem + 4vw, 5.5rem);  /* padding verticale sezioni */

  /* ---- Layout ---- */
  --larghezza-max:   72rem;    /* 1152px — container */
  --larghezza-testo: 42rem;    /* 672px — colonne di lettura */
  --altezza-header:  3.75rem;  /* 60px — header sticky */
  --altezza-ctabar:  4rem;     /* 64px — barra CTA sticky mobile */

  /* ---- Forma ---- */
  --raggio-sm:    8px;
  --raggio-md:    14px;
  --raggio-lg:    22px;
  --raggio-pieno: 999px;      /* bottoni pillola */

  /* ---- Ombre ---- */
  --ombra-card: 0 2px 10px rgba(6, 42, 68, 0.08);
  --ombra-alta: 0 8px 28px rgba(6, 42, 68, 0.16);
  --ombra-cta:  0 4px 14px rgba(1, 94, 159, 0.35);

  /* ---- Tap target (mobile-first, 99% smartphone) ---- */
  --tap-min: 2.75rem;         /* 44px minimo per ogni elemento toccabile */

  /* ---- Transizioni ---- */
  --transizione: 160ms ease;
}