/* Redesign 2026 – design token
   Fonte: file Figma "Niew Website - Site restyling", area "Proposta Claude" → 02 · Fondamenta
   (collezioni di variabili NiEW · Primitivi / Colori / Spaziature / Raggi e stili di testo NiEW/*).
   Le dimensioni tipografiche passano in modo fluido dal valore mobile (390 px) a quello desktop (1440 px). */

:root {
  /* ---------- Colori primitivi ---------- */
  --niew-nero: #000000;
  --niew-inchiostro: #001114;
  --niew-petrolio-900: #00485a;
  --niew-ciano-700: #007a99;
  --niew-ciano-500: #009ec4;
  --niew-cielo-50: #f3f8ff;
  --niew-cielo-25: #fafcff;
  --niew-grigio-600: #5b6b70;
  --niew-grigio-300: #bebdbd;
  --niew-grigio-200: #d9d9d9;
  --niew-grigio-100: #ebebeb;
  --niew-bianco: #ffffff;
  --niew-ambra-400: #ffb414;
  --niew-rosso-600: #d92d20;

  /* ---------- Colori semantici ---------- */
  --sfondo-pagina: var(--niew-bianco);
  --sfondo-tenue: var(--niew-cielo-50);
  --sfondo-tenue-chiaro: var(--niew-cielo-25);
  --sfondo-scuro: var(--niew-inchiostro);
  --sfondo-accento: var(--niew-ciano-500);
  --sfondo-segnaposto: var(--niew-grigio-200);
  --testo-primario: var(--niew-nero);
  --testo-secondario: var(--niew-grigio-600);
  --testo-inverso: var(--niew-bianco);
  --testo-accento: var(--niew-ciano-700);          /* testi piccoli e link su chiaro: contrasto 4,9:1 */
  --testo-accento-grande: var(--niew-ciano-500);   /* solo testi grandi, numeri, su scuro */
  --testo-petrolio: var(--niew-petrolio-900);
  --azione-primaria: var(--niew-nero);
  --azione-accento: var(--niew-ciano-500);
  --azione-inversa: var(--niew-bianco);
  --bordo-neutro: var(--niew-grigio-100);
  --bordo-medio: var(--niew-grigio-300);
  --bordo-accento: var(--niew-ciano-500);
  --valutazione: var(--niew-ambra-400);
  --stato-errore: var(--niew-rosso-600);
  --velatura: rgb(0 17 20 / 62%);                  /* velatura uniforme hero case study */

  /* ---------- Spaziature ---------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 56px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* ---------- Layout e griglia ----------
     Desktop: 12 colonne in 1200 px, margini 120, spazio colonne 24.
     Mobile: 4 colonne, margini 20, spazio colonne 16.
     Breakpoint (in media query si usano i valori letterali): 768px tablet, 1024px desktop, 1440px desktop largo. */
  --layout-larghezza-max: 1440px;
  --layout-contenuto: 1200px;
  --layout-testo: 800px;
  --layout-margine-mobile: 20px;
  --layout-margine-desktop: 120px;
  --layout-margine: clamp(var(--layout-margine-mobile), calc(20px + 100 * ((100vw - 390px) / 1050)), var(--layout-margine-desktop));
  --layout-colonne-gap: clamp(16px, calc(16px + 8 * ((100vw - 390px) / 1050)), 24px);
  --layout-sezione-mobile: 48px;
  --layout-sezione-desktop: 80px;
  --layout-sezione: clamp(var(--layout-sezione-mobile), calc(48px + 48 * ((100vw - 390px) / 1050)), 96px);

  /* ---------- Raggi ---------- */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-pillola: 100px;

  /* ---------- Ombre ---------- */
  --ombra: 0 18px 31px rgb(10 81 99 / 22%);

  /* ---------- Tipografia ---------- */
  --font-titoli: "Volkhov", Georgia, serif;
  --font-testo: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  --peso-regolare: 400;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* fluida tra 390 e 1440 px: min + (max − min) × (100vw − 390px) / 1050px */
  --fluid: ((100vw - 390px) / 1050);
  --fs-h1: clamp(36px, calc(36px + 12 * var(--fluid)), 48px);
  --lh-h1: clamp(44px, calc(44px + 14 * var(--fluid)), 58px);
  --fs-h2: clamp(30px, calc(30px + 10 * var(--fluid)), 40px);
  --lh-h2: clamp(38px, calc(38px + 10 * var(--fluid)), 48px);
  --fs-h3: clamp(26px, calc(26px + 6 * var(--fluid)), 32px);
  --lh-h3: clamp(32px, calc(32px + 8 * var(--fluid)), 40px);
  --fs-h3-maiuscolo: clamp(24px, calc(24px + 8 * var(--fluid)), 32px);
  --lh-h3-maiuscolo: clamp(30px, calc(30px + 10 * var(--fluid)), 40px);
  --fs-h4: clamp(22px, calc(22px + 6 * var(--fluid)), 28px);
  --lh-h4: clamp(28px, calc(28px + 6 * var(--fluid)), 34px);
  --fs-h5: clamp(20px, calc(20px + 4 * var(--fluid)), 24px);
  --lh-h5: clamp(26px, calc(26px + 4 * var(--fluid)), 30px);
  --fs-card: clamp(18px, calc(18px + 2 * var(--fluid)), 20px);
  --lh-card: clamp(24px, calc(24px + 2 * var(--fluid)), 26px);
  --fs-dato: clamp(44px, calc(44px + 20 * var(--fluid)), 64px);
  --lh-dato: clamp(52px, calc(52px + 20 * var(--fluid)), 72px);
  --fs-lead: clamp(18px, calc(18px + 2 * var(--fluid)), 20px);
  --lh-lead: clamp(28px, calc(28px + 2 * var(--fluid)), 30px);
  --fs-corpo-l: clamp(17px, calc(17px + 1 * var(--fluid)), 18px);
  --lh-corpo-l: clamp(26px, calc(26px + 2 * var(--fluid)), 28px);
  --fs-corpo-m: 16px;   --lh-corpo-m: 24px;
  --fs-corpo-s: 14px;   --lh-corpo-s: 20px;
  --fs-didascalia: 12px; --lh-didascalia: 16px;
  --fs-etichetta: 13px; --lh-etichetta: 16px; --ls-etichetta: 0.08em;
  --fs-link: 14px;      --lh-link: 20px;      --ls-link: 0.16em;
  --fs-pulsante-l: 16px; --lh-pulsante-l: 20px; --ls-pulsante-l: 0.04em;
  --fs-pulsante-s: 14px; --lh-pulsante-s: 18px;
  --fs-menu: 16px;      --lh-menu: 20px;
  --fs-footer: 15px;    --lh-footer: 22px;

  /* ---------- Interazione ---------- */
  --focus-anello: 0 0 0 3px var(--sfondo-pagina), 0 0 0 5px var(--niew-ciano-700);
  --transizione: 160ms ease;
}