/* Theme variables - light is default */
:root,
[data-theme="light"] {
  --bg: #FAF8F5;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f2ed;
  --bg-input: #ffffff;
  --text: #141319;
  --text-muted: #8A898C;
  --text-faint: #5a5960;
  --text-heading-fade: rgba(20, 19, 25, 0.25);
  --border: #e8e5e0;
  --border-light: #f0ede8;
  --accent: #DF5325;
  --accent-hover: #c44a20;
  --frame-border: rgba(0, 0, 0, 0.06);
  --cookie-bg: #ffffff;
  --cookie-border: #e8e5e0;
  --cookie-btn-bg: #f0ede8;
  --cookie-btn-hover: #e8e5e0;
  --toggle-bg: #f0ede8;
  --toggle-active: #e8e5e0;
}

[data-theme="dark"] {
  --bg: #141319;
  --bg-card: #1c1b22;
  --bg-card-hover: #2a2930;
  --bg-input: #1c1b22;
  --text: #ffffff;
  --text-muted: #8A898C;
  --text-faint: #5a5960;
  --text-heading-fade: rgba(255, 255, 255, 0.35);
  --border: #2a2930;
  --border-light: rgba(255, 255, 255, 0.05);
  --accent: #DF5325;
  --accent-hover: #c44a20;
  --frame-border: rgba(255, 255, 255, 0.08);
  --cookie-bg: #1c1b22;
  --cookie-border: #2a2930;
  --cookie-btn-bg: #2a2930;
  --cookie-btn-hover: #3a3940;
  --toggle-bg: #1c1b22;
  --toggle-active: #2a2930;
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  background: var(--toggle-bg);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--border);
  gap: 2px;
}
.theme-toggle button {
  padding: 5px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}
.theme-toggle button.active {
  background: var(--toggle-active);
  color: var(--text);
}
.theme-toggle button:hover:not(.active) {
  color: var(--text-muted);
}