/* =====================================================================
   CENTRO SOFTWARE — Design Tokens (tema "cs-light")
   FONTE DI VERITÀ per il design system di CBK. Vedi MASTER.md.
   Palette sobria enterprise: blu primario, niente viola/rosa "AI".

   Regola: nei componenti usare SEMPRE var(--cs-*), mai hex hardcoded.
   Questo file va importato PRIMA di style.css (vedi main.js).
   ===================================================================== */

:root {
  /* --- Brand / Semantici --- */
  --cs-primary:        #2C7BE5;
  --cs-secondary:      #6E84A3;
  --cs-success:        #00D97E;
  --cs-info:           #39AFD1;
  --cs-warning:        #F6C343;
  --cs-danger:         #E63757;
  --cs-light:          #EDF2F9;
  --cs-dark:           #152E4D;

  /* Stati (hover/active) derivati dai semantici */
  --cs-primary-hover:  #1657AF;   /* = blue-600 */
  --cs-primary-active: #114386;   /* = blue-700 */
  --cs-success-hover:  #00B56A;
  --cs-danger-hover:   #C42E4A;
  --cs-warning-hover:  #D4A106;
  --cs-info-hover:     #2A93B0;

  /* Testo su superfici colorate */
  --cs-on-primary:     #FFFFFF;
  --cs-on-dark:        #EDF2F9;

  /* --- Superfici / Testo (theme-switchable, vedi .dark) --- */
  --cs-body-bg:        #F9FBFD;
  --cs-body-color:     #12263F;
  --cs-card-bg:        #FFFFFF;
  --cs-border-color:   #EDF2F9;
  --cs-input-bg:       #FFFFFF;
  --cs-input-border:   #BBC5D3;
  --cs-sidebar-bg:     #152E4D;
  --cs-header-bg:      #152E4D;
  --cs-text-muted:     #6E84A3;
  --cs-scrollbar-thumb:       #D0D7E2;
  --cs-scrollbar-thumb-hover: #B0BCCD;

  /* Alias di compatibilità (nomi già usati nel codebase) */
  --cs-card-border:    var(--cs-border-color);

  /* Overlay / scrim per modali e dropdown */
  --cs-overlay:        rgba(18, 38, 63, 0.45);
  --cs-scrim:          rgba(18, 38, 63, 0.14);
  --cs-focus-ring:     rgba(44, 123, 229, 0.45);

  /* --- Scala grigi --- */
  --cs-gray-100: #EDF2F9;
  --cs-gray-200: #BBC5D3;
  --cs-gray-300: #A5B2C5;
  --cs-gray-400: #99A7BD;
  --cs-gray-500: #899BB3;
  --cs-gray-600: #6E84A3;
  --cs-gray-700: #3B5578;
  --cs-gray-800: #152E4D;
  --cs-gray-900: #12263F;

  /* --- Blu (scala primaria per stati/hover/superfici) --- */
  --cs-blue-100: #E2EDFB;
  --cs-blue-300: #9EC2F3;
  --cs-blue-500: #2C7BE5;
  --cs-blue-600: #1657AF;
  --cs-blue-700: #114386;

  /* --- Raggi / Ombre --- */
  --cs-radius-sm:  0.25rem;
  --cs-radius:     0.375rem;
  --cs-radius-lg:  0.5rem;
  --cs-radius-pill: 999px;
  --cs-shadow-card:     0 0.75rem 1.5rem rgba(18, 38, 63, 0.04);
  --cs-shadow-dropdown: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.14);

  /* --- Tipografia --- */
  --cs-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cs-font-mono: SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;

  /* --- Sfondi "soft" per badge / stati / tag --- */
  --cs-soft-blue:   #D5E5FA;
  --cs-soft-green:  #CCF7E5;
  --cs-soft-yellow: #FDF3D9;
  --cs-soft-red:    #FAD7DD;
  --cs-soft-gray:   #E2E6ED;

  /* Testo leggibile (≥ 4.5:1) sopra gli sfondi soft */
  --cs-on-soft-blue:   #114386;
  --cs-on-soft-green:  #006B44;   /* scurito per contrasto ≥4.5:1 sul fondo soft-green */
  --cs-on-soft-yellow: #8A6200;
  --cs-on-soft-red:    #C0182F;
  --cs-on-soft-gray:   #3B5578;

  /* --- Breakpoint (riferimento; in CSS usare via media query) --- */
  --cs-bp-sm:   576px;
  --cs-bp-md:   768px;
  --cs-bp-lg:  1024px;
  --cs-bp-xl:  1280px;
  --cs-bp-xxl: 1440px;
}

/* =====================================================================
   Dark theme — rimappa gli stessi ruoli sulle superfici scure.
   Attivato dalla classe .dark sull'elemento radice.
   ===================================================================== */
.dark {
  color-scheme: dark;

  --cs-body-bg:      #12263F;
  --cs-body-color:   #EDF2F9;
  --cs-card-bg:      #152E4D;
  --cs-border-color: #1E3A5C;
  --cs-input-bg:     #1E3A5C;
  --cs-input-border: #1E3A5C;
  --cs-sidebar-bg:   #0B1A2E;
  --cs-header-bg:    #152E4D;
  --cs-text-muted:   #95AAC9;
  --cs-scrollbar-thumb:       #2A4D7A;
  --cs-scrollbar-thumb-hover: #3A5D8A;

  /* Ombre più marcate su fondo scuro */
  --cs-shadow-card:     0 0.75rem 1.5rem rgba(0, 0, 0, 0.30);
  --cs-shadow-dropdown: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
  --cs-overlay:         rgba(0, 0, 0, 0.55);

  /* Sfondi soft: versioni desaturate/scure per contrasto su superfici dark */
  --cs-soft-blue:   #16335C;
  --cs-soft-green:  #0B3A2A;
  --cs-soft-yellow: #3A2E10;
  --cs-soft-red:    #3E1620;
  --cs-soft-gray:   #1E3A5C;

  --cs-on-soft-blue:   #9EC2F3;
  --cs-on-soft-green:  #5FE9B0;
  --cs-on-soft-yellow: #F6C343;
  --cs-on-soft-red:    #FF7D96;
  --cs-on-soft-gray:   #C5D3E3;
}