/**
 * ============================================
 * TEMA COLORI VOISMART - Sistema Unificato
 * ============================================
 * Questo file definisce tutti i colori del tema
 * da utilizzare in tutte le pagine del portale.
 * 
 * Per personalizzare i colori, modifica solo le
 * variabili CSS definite in :root
 */

:root {
    /* ========== COLORI PRINCIPALI DEL BRAND ========== */
    --primary-color: #549FD5;        /* Blu principale VoiSmart */
    --primary-dark: #1F3572;          /* Blu scuro hover */
    --primary-light: #7AB8E3;         /* Blu medio */
    --primary-lighter: #A0CEEC;       /* Blu chiaro */
    
    /* ========== COLORI SECONDARI ========== */
    --secondary-color: #4A8CDD;       /* Azzurro */
    --secondary-dark: #306FB4;        /* Azzurro scuro */
    --accent-color: #549FD5;          /* Ciano accent */
    --accent-gradient: #549FD5;       /* Sostituito gradiente con colore solido */
    
    /* ========== COLORI UI STANDARD ========== */
    --success-color: #0A7637;         /* Verde successo */
    --success-dark: #085a2a;          /* Verde scuro */
    --danger-color: #CA150C;          /* Rosso errore */
    --danger-dark: #a01109;           /* Rosso scuro */
    --warning-color: #FFCC00;         /* Giallo warning */
    --warning-dark: #e6b800;          /* Giallo scuro */
    --info-color: #306FB4;            /* Blu info */
    --info-dark: #245a96;             /* Blu info scuro */
    
    /* ========== COLORI NEUTRI ========== */
    --text-primary: #333333;          /* Testo principale */
    --text-secondary: #6b7280;        /* Testo secondario */
    --text-muted: #999999;            /* Testo disabilitato */
    --text-light: #ffffff;            /* Testo bianco */
    --text-dark: #1a1a1a;            /* Testo nero */
    
    /* ========== SFONDI ========== */
    --bg-primary: #ffffff;            /* Sfondo principale */
    --bg-secondary: #f8f9fa;          /* Sfondo secondario */
    --bg-tertiary: #e9ecef;           /* Sfondo terziario */
    --bg-hover: #e9ecef;              /* Sfondo hover */
    --bg-active: #dee2e6;             /* Sfondo active */
    --bg-gradient: #f9fafb;           /* Sostituito gradiente con colore solido */
    --bg-overlay: rgba(0, 0, 0, 0.5); /* Overlay scuro */
    --bg-overlay-light: rgba(255, 255, 255, 0.95); /* Overlay chiaro */
    
    /* ========== BORDI ========== */
    --border-color: #e1e5e9;          /* Bordo normale */
    --border-light: #e9ecef;          /* Bordo chiaro */
    --border-dark: #ced4da;           /* Bordo scuro */
    --border-focus: var(--accent-color); /* Bordo focus */
    --border-radius-sm: 4px;          /* Raggio bordo piccolo */
    --border-radius-md: 8px;          /* Raggio bordo medio */
    --border-radius-lg: 12px;         /* Raggio bordo grande */
    --border-radius-xl: 15px;         /* Raggio bordo extra grande */
    
    /* ========== OMBRE ========== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.3);
    --shadow-primary: 0 5px 15px rgba(84, 159, 213, 0.4);
    --shadow-success: 0 5px 15px rgba(72, 199, 116, 0.4);
    --shadow-danger: 0 5px 15px rgba(255, 62, 29, 0.4);
    
    /* ========== TRANSIZIONI ========== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ========== SPACING ========== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
}

/* ========== TEMA SCURO (Opzionale) ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #7AB8E3;
        --primary-dark: #549FD5;
        --primary-light: #A0CEEC;
        --primary-lighter: #B5D8F1;
        
        --text-primary: #e0e0e0;
        --text-secondary: #a0a0a0;
        --text-muted: #707070;
        --text-light: #ffffff;
        
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --bg-tertiary: #3a3a3a;
        --bg-hover: #4a4a4a;
        --bg-active: #5a5a5a;
        --bg-gradient: #2a2a2a;       /* Sostituito gradiente con colore solido */
        
        --border-color: #3a3a3a;
        --border-light: #4a4a4a;
        --border-dark: #2a2a2a;
        
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
        --shadow-md: 0 5px 20px rgba(0,0,0,0.3);
        --shadow-lg: 0 10px 40px rgba(0,0,0,0.4);
        --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
    }
}

/* ========== CLASSI UTILI ========== */

/* Colori di testo */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-light { color: var(--text-light) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }

/* Sfondi */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* Bordi */
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-danger { border-color: var(--danger-color) !important; }
.border-warning { border-color: var(--warning-color) !important; }
.border-info { border-color: var(--info-color) !important; }

/* Bottoni personalizzati */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-light);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--success-color);
    color: var(--text-light);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-success:hover {
    background-color: var(--success-dark);
    box-shadow: var(--shadow-success);
    transform: translateY(-2px);
}

.btn-danger {
    background-color: var(--danger-color);
    color: var(--text-light);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.btn-danger:hover {
    background-color: var(--danger-dark);
    box-shadow: var(--shadow-danger);
    transform: translateY(-2px);
}

/* Ombre */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-none { box-shadow: none !important; }

/* Bordi arrotondati */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-full { border-radius: 50% !important; }

/* Spacing */
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-xxl { padding: var(--spacing-xxl) !important; }

.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-xxl { margin: var(--spacing-xxl) !important; }