/* =========================================================
   CAI Sales Dashboard - VARIABILI CSS CENTRALI
   
   Tutti i colori e i valori riutilizzabili sono qui.
   Modifica un valore in questo file e tutta la dashboard si aggiorna.
   
   ORDINE DI CARICAMENTO: questo file viene caricato per primo
   grazie al prefisso "00-". Le variabili sono disponibili in
   tutti gli altri file CSS.
   ========================================================= */

:root {
  /* ===== BRAND - colori principali del cliente ===== */
  --brand-primary:        #FFCC00;  /* colore principale CAI (giallo) */
  --brand-primary-dark:   #CC9900;  /* variante scura per gradient/hover */
  --brand-primary-light:  #FFD633;  /* variante chiara per gradient/highlight */
  --brand-on-primary:     #212121;  /* testo SOPRA il colore primario (per leggibilita') */

  /* ===== ACCENT - colori funzionali UI (verde "dashboard") ===== */
  --accent-primary:       #2E7D32;  /* verde principale: KPI, chart, bottoni */
  --accent-dark:          #1B5E20;  /* verde scuro per hover/active */
  --accent-darker:        #0d3d10;  /* verde molto scuro per active state */
  --accent-light:         #4CAF50;  /* verde chiaro per gradient */
  --accent-bg-light:      #E8F5E9;  /* sfondo chiaro tipo highlight verde */
  --accent-bg-border:     #C8E6C9;  /* bordo per highlights verdi */
  --on-accent:            #FFFFFF;  /* testo SOPRA il colore accent */

  /* ===== STATI - rosso (errore/persi) e oro (attenzione) ===== */
  --danger:               #C62828;
  --danger-dark:          #B71C1C;
  --danger-bg-light:      #FFEBEE;
  --danger-bg-border:     #FFCDD2;
  --warning:              #F9A825;
  --warning-bg-light:     #FFF8E1;
  --warning-bg-border:    #FFE082;
  --warning-text:         #F57F17;

  /* ===== NEUTRI - sfondi, testi, bordi ===== */
  --bg-page:              #F5F7F4;
  --bg-card:              #FFFFFF;
  --text-primary:         #212121;
  --text-secondary:       #424242;
  --text-muted:           #616161;
  --text-light:           #9E9E9E;
  --border-default:       #E0E0E0;
  --hover-overlay:        rgba(0,0,0,0.05);

  /* ===== ESPERIENZA SULL'HEADER (sopra il colore brand) =====
     Variabili calcolate per leggibilita' sul colore brand. */
  --header-button-bg:     rgba(0,0,0,0.08);
  --header-button-hover:  rgba(0,0,0,0.15);
  --header-button-border: rgba(0,0,0,0.2);
}