/* ==========================================================================
   VARIABLES.CSS — design token (colori, font, spaziature)
   Cambia --accent per cambiare il colore principale del sito.
   ========================================================================== */

:root {
  /* ---- Tema chiaro ---- */
  --bg: #f6f8fa;
  --bg-grid: rgb(15 23 42 / 0.045);
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --border: #d8dee6;
  --border-strong: #b9c2ce;
  --text: #0d1117;
  --text-muted: #57606a;
  --text-faint: #8a94a0;

  --accent: #15803d;
  --accent-soft: rgb(21 128 61 / 0.1);
  --accent-contrast: #ffffff;
  --success: #16a34a;

  /* Colori "syntax highlighting" del box codice */
  --syn-key: #0369a1;
  --syn-string: #15803d;
  --syn-value: #b45309;
  --syn-keyword: #7c3aed;
  --syn-comment: #8a94a0;

  /* ---- Tipografia ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --fs-hero: clamp(2.6rem, 1.6rem + 4.6vw, 4.6rem);

  /* ---- Spaziature e forme ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-y: clamp(4rem, 3rem + 5vw, 7rem);
  --radius: 10px;
  --radius-sm: 6px;
  --container: 1120px;
  --header-h: 60px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(15 23 42 / 0.06);
  --transition: 180ms ease;
}

/* ---- Tema scuro ---- */
:root[data-theme="dark"] {
  --bg: #0a0d12;
  --bg-grid: rgb(255 255 255 / 0.035);
  --surface: #10141b;
  --surface-2: #151a23;
  --border: #222a36;
  --border-strong: #334055;
  --text: #e6edf3;
  --text-muted: #8b96a8;
  --text-faint: #5d6778;

  --accent: #4ade80;
  --accent-soft: rgb(74 222 128 / 0.1);
  --accent-contrast: #04120a;
  --success: #4ade80;

  --syn-key: #7dd3fc;
  --syn-string: #86efac;
  --syn-value: #fbbf24;
  --syn-keyword: #c4b5fd;
  --syn-comment: #5d6778;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.35);
}