/* Agorà — token di design: unica fonte di colori, spazi, tipografia, forme e movimento.
   Componenti e pagine usano SOLO queste variabili, mai valori letterali.

   Accento: `--accent` è iniettato dalla shell (branding.accent) su <html>; tutte le
   sfumature derivate (hover, soft, testo) sono calcolate con color-mix, così un solo
   colore scelto dall'amministrazione ricolora l'intera interfaccia in entrambi i temi.
   Tema: segue il sistema, oppure data-theme="light|dark" su <html> (ui/theme.js). */

:root {
  color-scheme: light;

  /* Superfici e testo (neutri caldi) */
  --bg: #f6f4ef;
  --bg-elevated: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --surface-3: #e8e5dd;
  --surface-hover: #f4f2ec;
  --border: #e3e0d8;
  --border-strong: #cfcbc0;
  --text: #1c1b19;
  --text-muted: #5f5c55;
  --text-subtle: #8c887f;
  --overlay: rgb(28 27 25 / 0.45);

  /* Accento (configurabile) e derivati */
  --accent: #4f46e5;
  --accent-hover: color-mix(in oklab, var(--accent) 86%, black);
  --accent-active: color-mix(in oklab, var(--accent) 76%, black);
  --accent-soft: color-mix(in oklab, var(--accent) 10%, var(--surface));
  --accent-soft-2: color-mix(in oklab, var(--accent) 20%, var(--surface));
  --accent-text: color-mix(in oklab, var(--accent) 92%, black);
  --accent-ring: color-mix(in oklab, var(--accent) 35%, transparent);
  --on-accent: #ffffff;
  --focus: var(--accent);

  /* Stati */
  --danger: #b4281e;
  --danger-soft: #fbebe8;
  --success: #2a7a4b;
  --success-soft: #e4f3ea;
  --warning: #8a5a00;
  --warning-soft: #fbf1da;
  --info: #1f5f8b;
  --info-soft: #e3eff8;

  /* Tipografia */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", 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;
  --text-3xl: 2.375rem;
  --leading-tight: 1.2;
  --leading: 1.55;
  --leading-loose: 1.7;

  /* Spazi (scala 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;
  --space-16: 64px;

  /* Forme ed elevazione */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(28 27 25 / 0.06);
  --shadow: 0 2px 8px rgb(28 27 25 / 0.08), 0 1px 2px rgb(28 27 25 / 0.05);
  --shadow-md: 0 6px 18px rgb(28 27 25 / 0.1), 0 2px 4px rgb(28 27 25 / 0.06);
  --shadow-lg: 0 14px 36px rgb(28 27 25 / 0.16), 0 3px 8px rgb(28 27 25 / 0.08);
  --ring: 0 0 0 3px var(--accent-ring);

  /* Layout */
  --sidebar-width: 264px;
  --sidebar-collapsed: 72px;
  --topbar-height: 60px;
  --bottombar-height: 60px;
  --content-max: 1200px;
  --content-pad: var(--space-6);

  /* Movimento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 320ms;

  /* Livelli */
  --z-sticky: 10;
  --z-drawer: 40;
  --z-popover: 50;
  --z-dialog: 60;
  --z-toast: 70;
}

/* ── Tema scuro ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121214;
    --bg-elevated: #17171a;
    --surface: #1b1b1f;
    --surface-2: #222227;
    --surface-3: #2b2b31;
    --surface-hover: #26262c;
    --border: #2e2e35;
    --border-strong: #41414a;
    --text: #ebe9e4;
    --text-muted: #a8a59e;
    --text-subtle: #7b7872;
    --overlay: rgb(0 0 0 / 0.6);
    --accent-hover: color-mix(in oklab, var(--accent) 82%, white);
    --accent-active: color-mix(in oklab, var(--accent) 70%, white);
    --accent-soft: color-mix(in oklab, var(--accent) 20%, var(--surface));
    --accent-soft-2: color-mix(in oklab, var(--accent) 32%, var(--surface));
    --accent-text: color-mix(in oklab, var(--accent) 62%, white);
    --accent-ring: color-mix(in oklab, var(--accent) 45%, transparent);
    --danger: #ff8d82;
    --danger-soft: #3b1f1d;
    --success: #74cf9a;
    --success-soft: #16301f;
    --warning: #f1c46b;
    --warning-soft: #33280f;
    --info: #7fc1ee;
    --info-soft: #142a3a;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 8px rgb(0 0 0 / 0.45);
    --shadow-md: 0 6px 18px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121214;
  --bg-elevated: #17171a;
  --surface: #1b1b1f;
  --surface-2: #222227;
  --surface-3: #2b2b31;
  --surface-hover: #26262c;
  --border: #2e2e35;
  --border-strong: #41414a;
  --text: #ebe9e4;
  --text-muted: #a8a59e;
  --text-subtle: #7b7872;
  --overlay: rgb(0 0 0 / 0.6);
  --accent-hover: color-mix(in oklab, var(--accent) 82%, white);
  --accent-active: color-mix(in oklab, var(--accent) 70%, white);
  --accent-soft: color-mix(in oklab, var(--accent) 20%, var(--surface));
  --accent-soft-2: color-mix(in oklab, var(--accent) 32%, var(--surface));
  --accent-text: color-mix(in oklab, var(--accent) 62%, white);
  --accent-ring: color-mix(in oklab, var(--accent) 45%, transparent);
  --danger: #ff8d82;
  --danger-soft: #3b1f1d;
  --success: #74cf9a;
  --success-soft: #16301f;
  --warning: #f1c46b;
  --warning-soft: #33280f;
  --info: #7fc1ee;
  --info-soft: #142a3a;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.45);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.6);
}

/* Riduzione del movimento: le durate collassano (base.css azzera le transizioni). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}