/* ==========================================================================
   Design tokens — Movesion Mobility Plus landing
   Fonti: variabili Figma (8J03FX0BRF8FzV2SP8Mnvg) + CSS sito attuale (verificati combacianti)
   ========================================================================== */

:root {
  /* ---- Colori: neutrali ---- */
  --color-text: #4a5559;        /* testo body/heading default (grey/32) */
  --color-text-strong: #111012; /* nero quasi puro (grey/7) */
  --color-text-muted: #585858;  /* grey/35 */
  --color-white: #ffffff;
  --color-surface: #ffffff;     /* Surfaces/Primary */
  --color-surface-2: #eaeaea;   /* Surfaces/Secondary (grey/92) */
  --color-surface-3: #ededed;   /* grey/93 */
  --color-border: #cccccc;      /* Border color/Default */

  /* ---- Colori: on-color (testo su sfondi scuri/gradienti) ---- */
  --color-on-color: #ffffff;
  --color-on-color-85: #ffffffd9;

  /* ---- Accenti / stati ---- */
  --color-success: #00a86b;     /* Icons/Success */
  --color-info: #37b1d3;        /* Icons/Info */
  --color-info-hover: #1c98ba;

  /* ---- Accenti tematici (stop esatti dal sito attuale) ---- */
  --color-lime: #ddf160;
  --color-people: #9f8be7;
  --color-cyan: #6ae3f8;
  --color-blue: #4cc0ff;
  --color-red: #e30134;
  --color-yellow: #fcc400;
  /* Gradienti tematici */
  --grad-consulting: linear-gradient(135deg, #ea405d 0%, #f35355 50%, #fd8c4e 100%);

  /* ---- Tipografia ---- */
  --font-sans: "Funnel Display", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (px desktop di riferimento Figma; fluidizzata dove serve via clamp nei componenti) */
  --fs-h1: clamp(2.75rem, 1.5rem + 4vw, 5rem);      /* 80px */
  --fs-h2: clamp(2rem, 1.3rem + 2.2vw, 3rem);       /* 48px */
  --fs-h3: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);     /* 32px */
  --fs-p28: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);  /* 28px */
  --fs-p22: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);/* 22px */
  --fs-p20: 1.25rem;   /* 20px */
  --fs-body: 1rem;     /* 16px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-13: 0.8125rem;  /* 13px */
  --fs-12: 0.75rem;    /* 12px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-h1: 1.05;   /* 84/80 */
  --lh-h2: 1.05;   /* 50.4/48 */
  --lh-h3: 1.15;   /* 36.8/32 */
  --lh-body: 1.4;
  --ls-tight: -0.0125em; /* -1 su 80px */

  /* ---- Spacing ---- */
  --space-section: 80px;      /* tra sezioni */
  --space-title-text: 24px;   /* titolo -> paragrafo */
  --space-text-cta: 32px;     /* testo -> button */
  --space-card: 40px;         /* padding card */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 48px;

  /* ---- Radius ---- */
  --radius-section: 36px;
  --radius-image: 36px;
  --radius-pill: 80px;

  /* ---- Layout ---- */
  --container-max: 1600px;
  --container-pad: clamp(1rem, 0.5rem + 2.5vw, 4rem);
}