:root {
  --bg: #070a10;
  --bg-2: #0c1424;
  --panel: rgba(17, 24, 39, 0.78);
  --panel-2: rgba(11, 18, 32, 0.72);
  --accent: #fbbf24;
  --accent-2: #10b981;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: rgba(148, 163, 184, 0.2);
  --shadow: 0 20px 60px rgba(3, 7, 18, 0.7);
  --theme-toggle-bg: rgba(255, 255, 255, 0.05);
  --transition: all 0.3s ease;
}

[data-theme="light"] {
  --bg: #f8fafc;
  --bg-2: #f1f5f9;
  --panel: rgba(255, 255, 255, 0.85);
  --panel-2: rgba(241, 245, 249, 0.8);
  --accent: #d97706;
  --accent-2: #059669;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15, 23, 42, 0.1);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --theme-toggle-bg: rgba(0, 0, 0, 0.05);
}

body {
  transition: var(--transition);
  background: radial-gradient(circle at 10% 10%, rgba(251, 191, 36, 0.1), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.1), transparent 45%),
    radial-gradient(circle at 55% 85%, rgba(59, 130, 246, 0.08), transparent 48%),
    linear-gradient(160deg, var(--bg), var(--bg-2)) !important;
}

.card,
.hero,
.topbar-inner {
  transition: var(--transition);
}

.theme-toggle {
  background: var(--theme-toggle-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

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

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

img {
  max-width: 100%;
  height: auto;
}