/* =====================================================================
   Design tokens – unica fonte di colori, raggi, ombre, durate, easing.
   Tema chiaro di default; scuro via [data-theme="dark"] o preferenza OS.
   ===================================================================== */

:root {
  /* Tipografia */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2rem;
  --lh-tight: 1.2;
  --lh: 1.5;

  /* Spaziature */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Raggi */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Movimento */
  --d-instant: 90ms;
  --d-fast: 150ms;
  --d: 200ms;
  --d-slow: 300ms;
  --d-slower: 380ms;
  /* Un solo linguaggio di movimento: decelerazione lunga e morbida, niente rimbalzi vistosi */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* expo-out: entrate, spostamenti */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);              /* uscite rapide */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);    /* micro-interazioni: overshoot appena percettibile */
  --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);      /* pannelli e modali: fluido, senza molla */
  --blur-overlay: 6px;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --content-max: 1440px;

  /* Colori – tema chiaro */
  --bg: #f6f7f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f7;
  --surface-3: #eceef2;
  --surface-hover: #f0f1f5;
  --border: #e5e7ec;
  --border-strong: #d4d7df;
  --text: #0e1120;
  --text-2: #4a5065;
  --text-3: #858b9e;
  --text-inverse: #ffffff;

  /* Brand Wenexia: viola prugna #995794 (primario) + azzurro #00B2D7 (secondario) */
  --brand-violet: #995794;
  --brand-cyan: #00b2d7;
  --brand-gradient: linear-gradient(135deg, #00b2d7 0%, #995794 100%);

  --accent: #995794;          /* testo bianco: contrasto 5,1:1 (AA) */
  --accent-hover: #874b83;
  --accent-active: #763f72;
  --accent-soft: #f6edf5;
  --accent-soft-2: #ecdaea;
  --accent-text: #7d4479;     /* su sfondo chiaro e su accent-soft: AA */
  --accent-ring: rgba(153, 87, 148, 0.32);

  --success: #0f9f6e;
  --success-soft: #e3f7ef;
  --warning: #d97706;
  --warning-soft: #fdf2e0;
  --danger: #e5484d;
  --danger-soft: #fdeceb;
  --info: #006f8c;            /* azzurro brand scurito per il testo (AA) */
  --info-soft: #e0f5fa;

  --sidebar-bg: #fbfbfc;
  --scrim: rgba(14, 17, 32, 0.38);
  --skeleton: #eceef2;
  --skeleton-shine: #f6f7f9;
  --grid-line: #eef0f3;
  --canvas-dot: #d9dce3;

  /* Ombre */
  --shadow-xs: 0 1px 2px rgba(16, 20, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 20, 40, 0.07), 0 1px 2px rgba(16, 20, 40, 0.04);
  --shadow: 0 4px 12px -2px rgba(16, 20, 40, 0.08), 0 2px 4px -2px rgba(16, 20, 40, 0.05);
  --shadow-lg: 0 16px 40px -8px rgba(16, 20, 40, 0.16), 0 4px 12px -4px rgba(16, 20, 40, 0.06);
  --shadow-xl: 0 28px 70px -12px rgba(16, 20, 40, 0.28);
  --shadow-drag: 0 22px 48px -10px rgba(16, 20, 40, 0.3), 0 6px 14px -4px rgba(16, 20, 40, 0.12);
  --ring: 0 0 0 3px var(--accent-ring);

  /* Palette categorica (tag, calendari, avatar) – coppie bg/fg */
  --c-violet-bg: #f4e9f3; --c-violet-fg: #84457f; --c-violet: #995794;
  --c-blue-bg: #def4f9;   --c-blue-fg: #00708c;   --c-blue: #00b2d7;
  --c-teal-bg: #ddf6f2;   --c-teal-fg: #0b7d6f;   --c-teal: #14b8a6;
  --c-green-bg: #e2f6e8;  --c-green-fg: #1c7a3c;  --c-green: #22a55a;
  --c-amber-bg: #fdf0d9;  --c-amber-fg: #a35a00;  --c-amber: #f0a020;
  --c-orange-bg: #fee9de; --c-orange-fg: #bb4a10; --c-orange: #f97316;
  --c-rose-bg: #fde7ec;   --c-rose-fg: #bf2148;   --c-rose: #f43f5e;
  --c-pink-bg: #fce8f6;   --c-pink-fg: #a8237f;   --c-pink: #d946ef;
  --c-slate-bg: #eceef3;  --c-slate-fg: #4a5065;  --c-slate: #64748b;

  --chart-1: #995794;
  --chart-2: #00b2d7;
  --chart-3: #f0a020;
  --chart-4: #f43f5e;
  --chart-5: #14b8a6;

  color-scheme: light;
}

/* Tema scuro: rispetta l'OS se l'utente non ha scelto esplicitamente */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c11;
    --bg-elevated: #15171f;
    --surface: #111319;
    --surface-2: #171a22;
    --surface-3: #1e212b;
    --surface-hover: #1a1d26;
    --border: #232733;
    --border-strong: #2f3442;
    --text: #eceef4;
    --text-2: #a7adbf;
    --text-3: #6f7689;
    --accent: #9e5896;
    --accent-hover: #ab64a3;
    --accent-active: #8f4f88;
    --accent-soft: #2b1a2a;
    --accent-soft-2: #3b2439;
    --accent-text: #e0aada;
    --accent-ring: rgba(200, 130, 192, 0.45);
    --success: #2fc58c; --success-soft: #0f2a21;
    --warning: #f0a53a; --warning-soft: #2c2111;
    --danger: #ff6369;  --danger-soft: #2f1517;
    --info: #33c6e6;    --info-soft: #0b2a33;
    --sidebar-bg: #0e1016;
    --scrim: rgba(0, 0, 0, 0.6);
    --skeleton: #1a1d26;
    --skeleton-shine: #222632;
    --grid-line: #1a1d25;
    --canvas-dot: #262a36;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 18px 44px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-xl: 0 30px 80px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-drag: 0 24px 56px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --c-violet-bg: #2e1b2c; --c-violet-fg: #e0aada;
    --c-blue-bg: #0b2b33;   --c-blue-fg: #5fd6ef;
    --c-teal-bg: #0e2e2b;   --c-teal-fg: #62dccb;
    --c-green-bg: #12301e;  --c-green-fg: #6fdc97;
    --c-amber-bg: #33260e;  --c-amber-fg: #f5c46b;
    --c-orange-bg: #3a1f10; --c-orange-fg: #ffa874;
    --c-rose-bg: #3a1520;   --c-rose-fg: #ff8fa3;
    --c-pink-bg: #36163a;   --c-pink-fg: #f0a0f5;
    --c-slate-bg: #222632;  --c-slate-fg: #a7adbf;
    --chart-1: #c27ab9;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0b0c11;
  --bg-elevated: #15171f;
  --surface: #111319;
  --surface-2: #171a22;
  --surface-3: #1e212b;
  --surface-hover: #1a1d26;
  --border: #232733;
  --border-strong: #2f3442;
  --text: #eceef4;
  --text-2: #a7adbf;
  --text-3: #6f7689;
  --accent: #9e5896;
  --accent-hover: #ab64a3;
  --accent-active: #8f4f88;
  --accent-soft: #2b1a2a;
  --accent-soft-2: #3b2439;
  --accent-text: #e0aada;
  --accent-ring: rgba(200, 130, 192, 0.45);
  --success: #2fc58c; --success-soft: #0f2a21;
  --warning: #f0a53a; --warning-soft: #2c2111;
  --danger: #ff6369;  --danger-soft: #2f1517;
  --info: #33c6e6;    --info-soft: #0b2a33;
  --sidebar-bg: #0e1016;
  --scrim: rgba(0, 0, 0, 0.6);
  --skeleton: #1a1d26;
  --skeleton-shine: #222632;
  --grid-line: #1a1d25;
  --canvas-dot: #262a36;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-xl: 0 30px 80px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-drag: 0 24px 56px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --c-violet-bg: #2e1b2c; --c-violet-fg: #e0aada;
  --c-blue-bg: #0b2b33;   --c-blue-fg: #5fd6ef;
  --c-teal-bg: #0e2e2b;   --c-teal-fg: #62dccb;
  --c-green-bg: #12301e;  --c-green-fg: #6fdc97;
  --c-amber-bg: #33260e;  --c-amber-fg: #f5c46b;
  --c-orange-bg: #3a1f10; --c-orange-fg: #ffa874;
  --c-rose-bg: #3a1520;   --c-rose-fg: #ff8fa3;
  --c-pink-bg: #36163a;   --c-pink-fg: #f0a0f5;
  --c-slate-bg: #222632;  --c-slate-fg: #a7adbf;
  --chart-1: #c27ab9;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms;
    --d-fast: 1ms;
    --d: 1ms;
    --d-slow: 1ms;
    --d-slower: 1ms;
  }
}