/* Token di design: unica fonte di colori, spazi, tipografia e forme.
   Componenti e pagine usano solo queste variabili, mai valori letterali.
   Tema: segue il sistema, oppure data-theme="light|dark" su <html>. */

:root {
  color-scheme: light;

  /* Superfici e testo */
  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --surface-3: #e7e4dc;
  --border: #e0ddd5;
  --border-strong: #c9c5bb;
  --text: #1a1c21;
  --text-muted: #5b606b;
  --text-subtle: #868b95;

  /* Azione e stati */
  --accent: #1f3f8f;
  --accent-hover: #183275;
  --accent-soft: #e6ebf7;
  --on-accent: #ffffff;
  --focus: #3b6fe0;
  --danger: #b3261e;
  --danger-soft: #fbeae8;
  --success: #2c7a4b;
  --success-soft: #e5f3ea;
  --warning: #8a5a00;
  --warning-soft: #fbf1dc;
  --info: #1f5f8b;
  --info-soft: #e4f0f8;

  /* Tricolore (solo dettagli decorativi) */
  --flag-green: #138a4a;
  --flag-white: #f4f4f4;
  --flag-red: #c62a2f;

  /* Tipografia */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --leading-tight: 1.25;
  --leading: 1.55;

  /* Spazi (scala da 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Forme ed elevazione */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(20 22 28 / 0.06);
  --shadow: 0 2px 8px rgb(20 22 28 / 0.08), 0 1px 2px rgb(20 22 28 / 0.05);
  --shadow-lg: 0 12px 32px rgb(20 22 28 / 0.16), 0 2px 6px rgb(20 22 28 / 0.08);

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 68px;
  --topbar-height: 60px;
  --content-max: 1180px;

  /* Movimento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  --z-sticky: 10;
  --z-drawer: 40;
  --z-popover: 50;
  --z-toast: 70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1d2128;
    --surface-3: #262b34;
    --border: #2a2f39;
    --border-strong: #3a404c;
    --text: #e8e9ec;
    --text-muted: #a1a7b2;
    --text-subtle: #747b88;
    --accent: #86a6ff;
    --accent-hover: #a3bcff;
    --accent-soft: #1d2847;
    --on-accent: #0f1115;
    --focus: #86a6ff;
    --danger: #ff8a80;
    --danger-soft: #3a1d1c;
    --success: #6fcf97;
    --success-soft: #16301f;
    --warning: #f2c46d;
    --warning-soft: #33280f;
    --info: #7cc0ef;
    --info-soft: #132a3a;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 8px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #171a20;
  --surface-2: #1d2128;
  --surface-3: #262b34;
  --border: #2a2f39;
  --border-strong: #3a404c;
  --text: #e8e9ec;
  --text-muted: #a1a7b2;
  --text-subtle: #747b88;
  --accent: #86a6ff;
  --accent-hover: #a3bcff;
  --accent-soft: #1d2847;
  --on-accent: #0f1115;
  --focus: #86a6ff;
  --danger: #ff8a80;
  --danger-soft: #3a1d1c;
  --success: #6fcf97;
  --success-soft: #16301f;
  --warning: #f2c46d;
  --warning-soft: #33280f;
  --info: #7cc0ef;
  --info-soft: #132a3a;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
}