/* Tema «luhn».

   Palette presa dal modello grafico fornito (C:\tmp.ai\18\template.png):
   ardesia #334155 per le barre, crema #F4F1EB / #FFFDF8 per sfondi e card,
   salvia #7A8F78 come colore d'azione, terracotta #D89B7D come accento,
   azzurro polvere #E6EDF4 per le superfici tenui. Dal sito Nimbus Intelligence
   (caratteristiche, non il marchio) gli angoli piu' morbidi e l'accento caldo.

   Ritocchi per il contrasto (WCAG AA, >= 4,5:1, calcolati):
   - la salvia dell'immagine con testo bianco sta a 3,5:1 → primario #566B54
     (5,8:1); la salvia originale resta come tono chiaro della scala;
   - la terracotta con testo bianco sta a 2,4:1 → la si usa per accenti, bordi
     e sfondi tenui, mai come fondo di un testo.

   Chiaro su :root:not(.dark), scuro su :root.dark: con un :root semplice
   questo foglio batterebbe .dark e lo scuro mostrerebbe i colori chiari. */

:root {
  /* Carattere: l'immagine usa un sans-serif umanista di sistema (Verdana /
     Tahoma). Proxima Nova del sito e' commerciale e non si distribuisce. */
  --tema-font: "Segoe UI", Tahoma, Verdana;

  /* Scala del colore d'azione (porta nomi «blue» per storia dei token). */
  --cs-blue-100: #E3EAE2;
  --cs-blue-300: #A9B8A7;
  --cs-blue-500: #566B54;
  --cs-blue-600: #46593F;
  --cs-blue-700: #374632;

  --cs-secondary: #7A746A;
  --cs-success:   #4F7F4F;
  --cs-success-hover: #3F6A3F;
  --cs-danger:    #B5483A;
  --cs-danger-hover: #963A2E;
  --cs-warning:   #C98A3B;
  --cs-warning-hover: #A8722E;
  --cs-info:      #B5795A;
  --cs-info-hover: #9A6449;
  --cs-light:     #F4F1EB;
  --cs-dark:      #334155;
  --cs-on-dark:   #F4F1EB;

  /* Angoli piu' morbidi, come l'immagine (card ~12px) e il sito. */
  --cs-radius-sm: 0.375rem;
  --cs-radius:    0.5rem;
  --cs-radius-lg: 0.75rem;

  /* Grigi caldi, dalla carta dell'immagine all'ardesia. */
  --cs-gray-100: #F4F1EB;
  --cs-gray-200: #E9E1D6;
  --cs-gray-300: #D8D1C7;
  --cs-gray-400: #B8B0A4;
  --cs-gray-500: #9A9286;
  --cs-gray-600: #7A746A;
  --cs-gray-700: #5C564E;
  --cs-gray-800: #3D4A5C;
  --cs-gray-900: #334155;

  /* Pagina di accesso: velo ardesia invece che blu notte, accento terracotta. */
  --accesso-velo-alto:  rgba(31, 39, 51, .45);
  --accesso-velo-basso: rgba(31, 39, 51, .72);
  --accesso-accento:    #D89B7D;
}

:root:not(.dark) {
  --cs-primary:        #566B54;
  --cs-primary-hover:  #46593F;
  --cs-primary-active: #374632;
  --cs-on-primary:     #FFFFFF;
  --cs-focus-ring:     rgba(86, 107, 84, 0.45);

  --cs-body-bg:      #F4F1EB;
  --cs-body-color:   #2E3B34;
  --cs-card-bg:      #FFFDF8;
  --cs-border-color: #E9E1D6;
  --cs-input-bg:     #FFFDF8;
  --cs-input-border: #D8D1C7;
  --cs-sidebar-bg:   #334155;
  --cs-header-bg:    #334155;
  --cs-text-muted:   #6E6860;
  --cs-scrollbar-thumb:       #D8D1C7;
  --cs-scrollbar-thumb-hover: #B8B0A4;
  --cs-overlay: rgba(46, 59, 52, 0.45);
  --cs-scrim:   rgba(46, 59, 52, 0.14);
  --cs-shadow-card:     0 0.75rem 1.5rem rgba(51, 65, 85, 0.05);
  --cs-shadow-dropdown: 0 0.75rem 1.5rem rgba(51, 65, 85, 0.14);

  --cs-soft-blue:   #E6EDF4;
  --cs-soft-green:  #EEF3EF;
  --cs-soft-yellow: #F7E6DC;
  --cs-soft-red:    #F6DCD8;
  --cs-soft-gray:   #ECE7DF;
  --cs-on-soft-blue:   #486581;
  --cs-on-soft-green:  #4E634C;
  --cs-on-soft-yellow: #8A4F33;
  --cs-on-soft-red:    #9E2F2F;
  --cs-on-soft-gray:   #5C564E;
}

/* Lo scuro, che l'immagine non ha: derivato dall'ardesia dell'intestazione. */
:root.dark {
  --cs-primary:        #9DB39A;
  --cs-primary-hover:  #B3C6B0;
  --cs-primary-active: #C7D6C5;
  --cs-on-primary:     #1E2733;
  --cs-focus-ring:     rgba(157, 179, 154, 0.45);

  --cs-body-bg:      #1E2733;
  --cs-body-color:   #EDE8DF;
  --cs-card-bg:      #273241;
  --cs-border-color: #36435A;
  --cs-input-bg:     #2C394B;
  --cs-input-border: #3E4C63;
  --cs-sidebar-bg:   #18202B;
  --cs-header-bg:    #273241;
  --cs-text-muted:   #A9B1A8;
  --cs-scrollbar-thumb:       #3E4C63;
  --cs-scrollbar-thumb-hover: #52627C;
  --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);

  --cs-soft-blue:   #2A3A4F;
  --cs-soft-green:  #2B3A2E;
  --cs-soft-yellow: #45322A;
  --cs-soft-red:    #47282A;
  --cs-soft-gray:   #36435A;
  --cs-on-soft-blue:   #A9C1D9;
  --cs-on-soft-green:  #B5CBB2;
  --cs-on-soft-yellow: #E8B89E;
  --cs-on-soft-red:    #F2A39A;
  --cs-on-soft-gray:   #CFC8BD;
}

/* Nello scuro il testo sui bottoni salvia e' scuro (--cs-on-primary), ma la
   barra laterale usa lo stesso token per le voci attive, che stanno su un
   fondo scuro: li' resta chiaro. Specificita' piu' alta perche' questo foglio
   si carica prima di app.css. */
:root.dark .lato-link.attivo,
:root.dark .lato-link:hover,
:root.dark .storia button.on,
:root.dark .albero .rep.on,
:root.dark .albero .riga.bersaglio { color: var(--cs-on-dark); }

/* Login senza il logo aziendale: resta solo la card di accesso. */
:root .accesso-logo { display: none; }

/* Il marchio Luhn (riquadro rame) e il nome: un po' di respiro fra i due. */
:root .accesso .marchio { gap: 1rem; }