/* design-tokens.css — generato da Content Model Builder */
:root {

  /* Font families */
  --font-display: 'Clear Pro Pan Euro', 'Noto Sans', sans-serif; /* self-hosted: genera @font-face nel tema */
  --font-body: 'Noto Sans', sans-serif;
  --font-body_ja: 'Noto Sans JP', 'Noto Sans', sans-serif;
  --font-body_ko: 'Noto Sans KR', 'Noto Sans', sans-serif;

  /* Tipografia fluida (clamp tra 375px e 1440px di viewport) */
  --font-size-display: clamp(48px, 32.5070px + 4.1315vw, 92px);
  --line-height-display: 0.95;
  --letter-spacing-display: -0.02em;
  --font-weight-display: 800;
  --font-size-h2: clamp(32px, 23.5493px + 2.2535vw, 56px);
  --line-height-h2: 1.02;
  --letter-spacing-h2: -0.015em;
  --font-weight-h2: 800;
  --font-size-h3: clamp(22px, 19.1831px + 0.7512vw, 30px);
  --line-height-h3: 1.15;
  --font-weight-h3: 700;
  --font-size-statement: clamp(26px, 19.6620px + 1.6901vw, 44px);
  --line-height-statement: 1.15;
  --letter-spacing-statement: -0.01em;
  --font-weight-statement: 700;
  --font-size-lead: clamp(17px, 15.5915px + 0.3756vw, 21px);
  --line-height-lead: 1.5;
  --font-weight-lead: 400;
  --font-size-body: clamp(15px, 14.6479px + 0.0939vw, 16px);
  --line-height-body: 1.65;
  --font-weight-body: 400;
  --font-size-label: clamp(12px, 11.6479px + 0.0939vw, 13px);
  --line-height-label: 1.2;
  --letter-spacing-label: 0.1em;
  --font-weight-label: 700;
  --font-size-stat: clamp(44px, 34.1408px + 2.6291vw, 72px);
  --line-height-stat: 1;
  --letter-spacing-stat: -0.02em;
  --font-weight-stat: 800;

  /* Colori */
  --color-violet: #7901FF;
  --color-violet-bright: #A815FF;
  --color-purple-deep: #512580;
  --color-purple-night: #2A1342;
  --color-cyan: #64D0FF;
  --color-cyan-100: #C1E7F8;
  --color-cyan-050: #EBF7FC;
  --color-paper: #FFFFFF;
  --color-ink: #1A0B2E;
  --color-ink-inverse: #FFFFFF;

  /* Spaziature (unità attiva: px — l'altra è riportata come commento) */
  --space-3xs: 4px; /* ≈ 0.25rem */
  --space-2xs: 8px; /* ≈ 0.5rem */
  --space-xs: 12px; /* ≈ 0.75rem */
  --space-sm: 16px; /* ≈ 1rem */
  --space-md: 24px; /* ≈ 1.5rem */
  --space-lg: 32px; /* ≈ 2rem */
  --space-xl: 48px; /* ≈ 3rem */
  --space-2xl: 64px; /* ≈ 4rem */
  --space-3xl: 96px; /* ≈ 6rem */
  --space-4xl: 128px; /* ≈ 8rem */
}

/* Breakpoint di riferimento — usa questi valori nelle @media (i custom properties non funzionano dentro le media query) */
/* Mobile: min-width 0px */
/* Small: min-width 640px */
/* Medium: min-width 900px */
/* Large: min-width 1400px */