:root{
    --primary-color: #1e3a8a;     
    --secondary-color: #7c3aed;    
    --accent-color: #06b6d4;       
    --background-color: #f9fafb;   
    --surface-color: #ffffff;      
    --text-primary: #111827; 
    --text-secondary: #6b7280;     
    --success-color: #10b981;
    --warning-color: #f59e0b; 
    --error-color: #ef4444;   
    --border-color: #e5e7eb;
    --input-bg: #ffffff;
}
:root.dark {
    --primary-color: #60a5fa;      
    --secondary-color: #a78bfa;    
    --accent-color: #22d3ee;       
    --background-color: #0f172a;   
    --surface-color: #1e293b;      
    --text-primary: #f9fafb;       
    --text-secondary: #9ca3af;     
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;
    --border-color: #334155;
    --input-bg: #0f172a; 
}

html.dark .custom-modal-box { 
    background: #1f2937; 
    color: #f9fafb; 
}

html.dark .custom-modal-input { 
    background: #374151; 
    color: white; 
    border-color: #4b5563; 
}

html.dark .custom-modal-btn.cancel { 
    background: #4b5563; 
    color: white; 
}

html.dark .custom-modal-btn.cancel:hover { 
    background: #6b7280; 
}