.theme-demo {
      --primary: #007bff;
      --secondary: #6c757d;
      --success: #28a745;
      --background: #ffffff;
      --text: #212529;
      --border: #dee2e6;
      
      background: var(--background);
      color: var(--text);
      border: 2px solid var(--border);
      padding: 20px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    
    .theme-demo.dark {
      --primary: #0d6efd;
      --secondary: #6c757d;
      --success: #198754;
      --background: #212529;
      --text: #ffffff;
      --border: #495057;
    }
    
    .theme-demo .btn {
      background: var(--primary);
      color: var(--background);
      border: 1px solid var(--primary);
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin: 5px;
      transition: all 0.3s ease;
    }
    
    .theme-demo .btn:hover {
      opacity: 0.8;
    }
    
    .theme-demo .btn.secondary {
      background: var(--secondary);
      border-color: var(--secondary);
    }
    
    .theme-demo .btn.success {
      background: var(--success);
      border-color: var(--success);
    }