/* =====================================================================
   Design tokens — colori, spaziature, tipografia, ombre, raggi.
   Il tema si commuta cambiando [data-theme] su <html>.
   ===================================================================== */
:root {
  /* Brand (sovrascrivibile in branding.css) */
  --brand:            #6d5efc;
  --brand-600:        #5a4be0;
  --brand-700:        #4a3dc4;
  --brand-contrast:   #ffffff;

  /* Scala neutra (tema chiaro di default) */
  --bg:               #f5f6fa;
  --bg-elev:          #ffffff;
  --surface:          #ffffff;
  --surface-2:        #f0f1f6;
  --border:           #e3e5ee;
  --border-strong:    #cfd2e0;

  --text:             #1c1f2b;
  --text-muted:       #5b6072;
  --text-faint:       #8a8fa3;

  /* Stati */
  --success:          #17a673;
  --success-bg:       #e3f6ee;
  --warning:          #d9922b;
  --warning-bg:       #fbf0dd;
  --danger:           #e0483d;
  --danger-bg:        #fbe4e2;
  --info:             #2f80ed;
  --info-bg:          #e5f0fd;

  /* Raggi */
  --radius-sm: 7px;
  --radius:    12px;
  --radius-lg: 18px;

  /* Ombre */
  --shadow-sm: 0 1px 2px rgba(20, 22, 40, .06);
  --shadow:    0 4px 16px rgba(20, 22, 40, .08);
  --shadow-lg: 0 12px 32px rgba(20, 22, 40, .14);

  /* Spaziature */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Tipografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;

  --sidebar-w: 248px;
  --topbar-h:  60px;
}

/* Tema scuro */
:root[data-theme="dark"] {
  --bg:            #0f1117;
  --bg-elev:       #161922;
  --surface:       #171a24;
  --surface-2:     #1f2330;
  --border:        #262b3a;
  --border-strong: #333a4d;

  --text:          #e7e9f2;
  --text-muted:    #9aa0b4;
  --text-faint:    #6b7185;

  --success-bg: #10281f;
  --warning-bg: #2a2110;
  --danger-bg:  #2a1512;
  --info-bg:    #10203a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
}