/**
 * PowerUp LMS - Theme Variables
 * 
 * File centralizzato per la gestione di colori, font e stili del tema.
 * Modificando questo file si applicano i cambiamenti a tutto il progetto.
 * 
 * Questo file DEVE essere caricato PRIMA di nice-admin-pro/assets/css/style.css
 * per sovrascrivere correttamente le variabili del tema.
 */

:root {
  /* ============================================
     FONT FAMILIES
     ============================================ */
  
  /* Font principale per il testo del corpo */
  --font-default: 'HostGrotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  /* Font per i titoli e gli heading */
  --font-primary: 'HostGrotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  /* Font secondario per elementi speciali */
  --font-secondary: 'HostGrotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;


  /* ============================================
     COLORI BRAND PRIMARI
     ============================================ */
  /* blu: 0540f2 bianco: f7f7f7 nero: 191614 celeste: 19baf9 */
  /* Colore primario principale del brand */
  --color-primary: #0540f2;
  --color-primary-rgb: 65, 84, 241;
  --color-primary-light: #B9CAFE;
  --color-primary-dark: #191614;
  --color-primary-bg: #f6f6fe;
  
  /* Colore secondario del brand */
  --color-secondary: #19baf9;
  --color-secondary-rgb: 1, 41, 112;
  --color-secondary-light: #19baf91c;
  --color-secondary-dark: #001d4a;
  
  /* Colore terziario */
  --color-tertiary: #2c384e;
  --color-tertiary-rgb: 44, 56, 78;
  
  /* Colore di accento */
  --color-accent: #ff771d;
  --color-accent-rgb: 255, 119, 29;
  --color-accent-bg: #ffecdf;


  /* ============================================
     COLORI DI TESTO
     ============================================ */
  
  /* Colore del testo principale */
  --color-text-default: #191614;
  --color-text-muted: #191614;
  --color-text-light: #a3a3a3;
  
  /* Colore dei link */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-secondary);


  /* ============================================
     COLORI DI SFONDO
     ============================================ */
  
  /* Colore di sfondo principale */
  --color-bg-body: #f7f7f7;
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f9fa;
  
  /* Colore di sfondo per i card */
  --color-bg-card: #ffffff;
  
  /* Colore di sfondo per elementi hover */
  --color-bg-hover: #f6f6fe;


  /* ============================================
     COLORI SEMANTICI (Feedback)
     ============================================ */
  
  /* Successo (Verde) */
  --color-success: #28a745;
  --color-success-rgb: 40, 167, 69;
  --color-success-light: #2eca6a;
  --color-success-bg: #e0f8e9;
  
  /* Errore/Pericolo (Rosso) */
  --color-danger: #dc3545;
  --color-danger-rgb: 220, 53, 69;
  --color-danger-bg: #ffe5e8;
  
  /* Avviso (Giallo) */
  --color-warning: #ffc107;
  --color-warning-rgb: 255, 193, 7;
  --color-warning-light: #ffbb2c;
  --color-warning-bg: #fff6e5;
  
  /* Informazione (Blu) */
  --color-info: #17a2b8;
  --color-info-rgb: 23, 162, 184;
  --color-info-light: #20c997;
  --color-info-bg: #e7f9fc;


  /* ============================================
     COLORI ESTESI
     ============================================ */
  
  --color-blue: #007bff;
  --color-indigo: #6610f2;
  --color-purple: #6f42c1;
  --color-pink: #e83e8c;
  --color-red: #dc3545;
  --color-orange: #fd7e14;
  --color-yellow: #ffc107;
  --color-green: #28a745;
  --color-teal: #20c997;
  --color-cyan: #17a2b8;
  --color-brown: #7b4f2c;
  --color-gray: #6c757d;
  --color-gray-dark: #343a40;
  --color-white: #ffffff;
  --color-black: #000000;


  /* ============================================
     COLORI DASHBOARD CARDS
     ============================================ */
  
  /* Card Vendite/Sales */
  --card-sales-color: var(--color-primary);
  --card-sales-bg: var(--color-primary-bg);
  
  /* Card Revenue/Entrate */
  --card-revenue-color: var(--color-success-light);
  --card-revenue-bg: var(--color-success-bg);
  
  /* Card Clienti/Customers */
  --card-customers-color: var(--color-accent);
  --card-customers-bg: var(--color-accent-bg);
  
  /* Card Avvisi/Warning */
  --card-warning-color: var(--color-warning-light);
  --card-warning-bg: var(--color-warning-bg);


  /* ============================================
     DIMENSIONI FONT
     ============================================ */
  
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  
  /* Heading sizes */
  --font-size-h1: 32px;
  --font-size-h2: 28px;
  --font-size-h3: 24px;
  --font-size-h4: 20px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;


  /* ============================================
     SPACING (Spaziature)
     ============================================ */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;


  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-pill: 50rem;


  /* ============================================
     SHADOWS (Ombre)
     ============================================ */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* Shadow specifiche per i card */
  --card-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
  --card-shadow-hover: 0px 0 30px rgba(1, 41, 112, 0.2);


  /* ============================================
     TRANSITION
     ============================================ */
  
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.5s ease;


  /* ============================================
     SIDEBAR
     ============================================ */
  
  --sidebar-width: 300px;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e4e4e4;
  
  /* Sidebar navigation */
  --sidebar-nav-link-color: #012970;
  --sidebar-nav-link-hover-bg: #f6f9ff;
  --sidebar-nav-link-hover-color: var(--color-primary);
  --sidebar-nav-link-active-bg: #f6f9ff;
  --sidebar-nav-link-active-color: var(--color-primary);


  /* ============================================
     HEADER
     ============================================ */
  
  --header-height: 60px;
  --header-bg: #ffffff;
  --header-border: #e4e4e4;
  --header-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);


  /* ============================================
     FORM ELEMENTS
     ============================================ */
  
  --input-border: #ced4da;
  --input-border-focus: var(--color-primary);
  --input-bg: #ffffff;
  --input-disabled-bg: #e9ecef;


  /* ============================================
     BUTTONS
     ============================================ */

  --btn-primary-bg: var(--color-primary);
  --btn-primary-border: var(--color-primary);
  --btn-primary-hover-bg: var(--color-secondary);
  --btn-primary-hover-border: var(--color-secondary);
  
  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-border: var(--color-secondary);
  --btn-secondary-hover-bg: var(--color-secondary-light);
  --btn-secondary-hover-border: var(--color-secondary-light);


  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}


/* ============================================
   DARK MODE (Opzionale - commentato di default)
   ============================================ */
/*
[data-theme="dark"],
.dark-mode {
  --color-bg-body: #1a1d26;
  --color-bg-card: #242731;
  --color-bg-white: #242731;
  --color-text-default: #e4e6eb;
  --color-text-muted: #b0b3b8;
  
  --header-bg: #242731;
  --sidebar-bg: #242731;
  
  --card-shadow: 0px 0 30px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0px 0 30px rgba(0, 0, 0, 0.7);
}
*/