/* ==========================================================================
   Mockly — design token
   Palette di Noah (D110): navy #16174F, blu #2070A1, azzurro #54A8BC,
   grigi neutri.
   Base chiara, pochi colori, nessun effetto: il sito deve far capire in
   fretta cosa offriamo, non stupire.
   Solo custom property, nessuna regola. Contrasti AA ricalcolati (D110).
   ========================================================================== */

:root {

  /* --- Colore: superfici ------------------------------------------------ */
  --color-background: #FFFFFF;
  --color-background-warm: #FFFFFF;        /* stesso tono: nessuna fascia a lavaggio diverso */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F4F4;            /* grigio chiarissimo, derivato da #E2E2E2 */
  --color-surface-inverse: #16174F;        /* navy: footer, pannelli scuri, intestazione */

  /* --- Colore: testo ---------------------------------------------------- */
  --color-text: #1D1D1D;                   /* 16.86 su bianco */
  --color-text-muted: #474747;             /* 9.7 su bianco */
  --color-heading: #16174F;                /* 16.54 su bianco */
  --color-text-inverse: #FFFFFF;           /* 16.54 su navy */
  --color-text-inverse-muted: #C4C4C4;     /* 9.48 su navy */

  /* --- Colore: bordi ---------------------------------------------------- */
  --color-border: #C4C4C4;                 /* decorativo, ben visibile */
  --color-border-strong: #8A8A8A;          /* 3.15 su bianco: bordi dei campi, mai testo */

  /* --- Colore: accento blu (link, focus, evidenze) ---------------------- */
  --color-accent: #2070A1;                 /* 5.39 su bianco */
  --color-accent-hover: #16174F;
  --color-accent-active: #0E0F3A;
  --color-accent-soft: #E4F1F5;            /* fondo tenue, derivato da #54A8BC */
  --color-text-inverse-on-accent: #FFFFFF; /* 5.39 su accento */

  /* --- Colore: stati semantici ------------------------------------------ */
  --color-success: #1F6B43;
  --color-error: #C1121F;                  /* 6.22 su bianco */
  --color-error-soft: #FBE6E8;

  /* --- Colore: velo del menu mobile ------------------------------------- */
  --color-overlay: rgba(22, 23, 79, 0.6);

  /* --- Tipografia: famiglie ---------------------------------------------
     Barlow Condensed per i titoli, Barlow per il testo (D133), ospitati in
     locale. Manrope resta solo per la parola "mockly" del logo. */
  --font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-logo: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Tipografia: scala (mobile -> desktop) ---------------------------
     H1 spinto oltre la "sicurezza" di prima (D90): su una base scura e
     cinematica il titolo deve dominare lo schermo, non solo essere grande
     a sufficienza per leggersi. */
  --font-size-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);       /* 36 -> 60 */
  --font-size-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);          /* 30 -> 48 */
  --font-size-h3: clamp(1.375rem, 1.18rem + 0.8vw, 1.75rem);    /* 22 -> 28 */
  --font-size-h4: clamp(1.125rem, 1.04rem + 0.34vw, 1.3125rem); /* 18 -> 21 */
  --font-size-lead: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --font-size-body: clamp(1.125rem, 1.09rem + 0.12vw, 1.1875rem);
  --font-size-small: 1.0625rem;
  --font-size-label: 0.9375rem;

  /* --- Tipografia: pesi ------------------------------------------------ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* --- Tipografia: interlinea --- */
  --line-height-h1: 1.12;
  --line-height-h2: 1.15;
  --line-height-h3: 1.25;
  --line-height-h4: 1.3;
  --line-height-lead: 1.55;
  --line-height-body: 1.65;
  --line-height-small: 1.45;

  /* --- Tipografia: crenatura (un font arrotondato non vuole tracciato stretto) --- */
  --letter-spacing-h1: -0.005em;
  --letter-spacing-h2: 0em;
  --letter-spacing-h3: 0em;
  --letter-spacing-label: 0.04em;

  /* --- Spaziatura (base 4) --------------------------------------------- */
  --space-3xsmall: 0.25rem;
  --space-2xsmall: 0.5rem;
  --space-xsmall: 0.75rem;
  --space-small: 1rem;
  --space-medium: 1.5rem;
  --space-large: 2rem;
  --space-xlarge: 3rem;
  --space-2xlarge: 4rem;
  --space-3xlarge: 6rem;

  /* --- Raggi: due soli valori, non tre sfumature dello stesso mezzo ------ */
  --radius-crisp: 4px;    /* tutto ciò che è ripetuto: bottoni, campi, card, badge — tagliato con precisione */
  --radius-soft: 28px;    /* solo il momento singolo per pagina: hero visual, pannello CTA finale, menu, footer */
  --radius-pill: 999px;   /* solo cerchi veri: pallini, avatar, icone rotonde */

  /* --- Bordi e focus ---------------------------------------------------- */
  --border-width-hairline: 1px;
  --border-width-medium: 2px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* --- Ombre: solo su ciò che galleggia davvero -------------------------- */
  --shadow-lift: 0 10px 24px rgba(29, 29, 29, 0.10);   /* hover di una card interattiva */
  --shadow-float: 0 20px 48px rgba(29, 29, 29, 0.16);  /* elementi davvero sospesi: menu, bottone WhatsApp, pannello hero */

  /* --- Layout ------------------------------------------------------------ */
  --container-width: 75rem;                /* 1200 */
  --container-width-narrow: 44rem;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-spacing: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);  /* sezioni vicine: la pagina scorre senza stacchi */
  --content-measure: 68ch;
  --header-height: clamp(3.75rem, 3.4rem + 1.5vw, 4.5rem);

  /* --- Piani di sovrapposizione ------------------------------------------ */
  --layer-header: 100;
  --layer-overlay: 150;
  --layer-menu: 200;
  --layer-back-to-top: 90;

  /* --- Motion ------------------------------------------------------------ */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-menu: 380ms;   /* solo il pannello mobile */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-menu: cubic-bezier(0.32, 0.72, 0, 1); /* scatto iOS: parte forte, atterra morbido */
}