// Design tokens condivisi da apps/public e apps/private.
// I valori vivono come custom properties CSS (:root, generate in _base.scss): i componenti usano var(--…).
// Le mappe SCSS servono per generarle e per i breakpoint (le media query non accettano var()).

// --- Colori ---
// Palette: blu acqua (brand, coerente con le email: #0b5c7a), verde sostenibilità, ambra energia solare.
$colors: (
  // Brand
  'primary': #0b5c7a,
  'primary-strong': #08445b,
  'primary-soft': #e6f2f6,
  'secondary': #1f7a4d,
  'secondary-soft': #e8f5ee,
  'accent': #f2a900,
  'accent-soft': #fff6dc,
  // Macro-aree (badge, icone, bordi)
  'area-acqua': #0e7fa6,
  'area-energia': #c98a00,
  'area-comfort': #c2410c,
  'area-mobilita': #1f7a4d,
  'area-industria': #475569,
  // Neutri
  'ink': #12212b,
  'ink-muted': #4a5a66,
  'line': #d9e1e6,
  'surface': #ffffff,
  'surface-alt': #f4f7f9,
  'on-primary': #ffffff,
  'on-accent': #12212b,
  // Stati
  'success': #1f7a4d,
  'warning': #9a6700,
  'danger': #b42318,
  'focus': #f2a900,
);

// --- Tipografia ---
// Font di sistema: nessuna richiesta a servizi esterni (GDPR, prestazioni). Si potrà adottare un font self-hosted.
$font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
$font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Consolas, monospace;

// Scala tipografica fluida (mobile → desktop)
$font-sizes: (
  'xs': 0.8125rem,
  'sm': 0.875rem,
  'md': 1rem,
  'lg': 1.125rem,
  'xl': clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem),
  '2xl': clamp(1.5rem, 1.3rem + 1vw, 2rem),
  '3xl': clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem),
  '4xl': clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem),
);

$line-heights: (
  'tight': 1.2,
  'snug': 1.35,
  'normal': 1.6,
);

$font-weights: (
  'regular': 400,
  'medium': 500,
  'semibold': 600,
  'bold': 700,
);

// --- Spaziature (scala 4px) ---
$spaces: (
  '0': 0,
  '1': 0.25rem,
  '2': 0.5rem,
  '3': 0.75rem,
  '4': 1rem,
  '5': 1.5rem,
  '6': 2rem,
  '7': 3rem,
  '8': 4rem,
  '9': 6rem,
);

// --- Forme ed effetti ---
$radii: (
  'sm': 4px,
  'md': 8px,
  'lg': 16px,
  'pill': 999px,
);

$shadows: (
  'sm': 0 1px 2px rgb(18 33 43 / 8%),
  'md': 0 4px 12px rgb(18 33 43 / 10%),
  'lg': 0 12px 32px rgb(18 33 43 / 14%),
);

// --- Layout ---
$container-max: 1200px;
$header-height: 64px;

// Breakpoint mobile-first (min-width)
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px,
);