:root {
  --primary: #0095ff;
  --primary-hover: #0077cc;
  --success: #00a65a;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #0dcaf0;
  --background: #f7fafc;
  --foreground: #1a1f36;
  --muted: #64748b;
  --border: #e2e8f0;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --input-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
  --primary: #0095ff;
  --primary-hover: #3da9ff;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --background: #0f1419;
  --foreground: #e7edf4;
  --muted: #8b949e;
  --border: #30363d;
  --card: #161b22;
  --card-hover: #1c2128;
  --input-bg: #0d1117;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

[data-theme="oled"] {
  --primary: #0095ff;
  --primary-hover: #3da9ff;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --background: #000000;
  --foreground: #e7edf4;
  --muted: #8b949e;
  --border: #1a1a1a;
  --card: #0a0a0a;
  --card-hover: #151515;
  --input-bg: #000000;
  --shadow-sm: 0 1px 2px 0 rgba(255, 255, 255, 0.05);
  --shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.08), 0 2px 4px -1px rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.08);
}

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-toggle {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.theme-toggle:hover {
  background: var(--card-hover);
}

.theme-option {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.theme-option.active {
  background: var(--primary);
  color: white;
}

.theme-option:hover:not(.active) {
  background: var(--card-hover);
  color: var(--foreground);
}