.theme-demo {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --background-color: #ffffff;
            --text-color: #333333;
            --border-color: #dee2e6;
            
            background-color: var(--background-color);
            color: var(--text-color);
            padding: 20px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .theme-demo.dark-theme {
            --primary-color: #5dade2;
            --secondary-color: #58d68d;
            --background-color: #2c3e50;
            --text-color: #ecf0f1;
            --border-color: #34495e;
        }
        
        .theme-demo .demo-card {
            background-color: var(--background-color);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
        }
        
        .theme-demo .demo-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 8px;
        }
        
        .theme-demo .demo-button:hover {
            opacity: 0.9;
        }
        
        .theme-demo .demo-button.secondary {
            background-color: var(--secondary-color);
        }
        
        .theme-switcher {
            margin-bottom: 16px;
        }
        
        .theme-switcher button {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 8px;
        }
        
        .theme-switcher button:hover {
            background-color: #5a6268;
        }