/* ===== CSS Custom Properties ===== */

:root {
  /* Light mode */
  --bg: #f0ece4;
  --bg-card: #f8f5ee;
  --text: #111;
  --text-muted: #666;
  --border: #111;
  --switch-bg: #ddd;
  --switch-dot: #111;
  /* Cards that stay light in dark mode */
  --card-keep-bg: #f8f5ee;
  --card-keep-text: #111;
  --card-keep-muted: #666;
  --card-keep-border: #111;
  --card-keep-shadow: #111;
}

[data-theme="dark"] {
  --bg: #0e0e0e;
  --bg-card: #1a1a1a;
  --text: #f0ece4;
  --text-muted: #999;
  --border: #f0ece4;
  --switch-bg: #333;
  --switch-dot: #f0ece4;
  --card-keep-bg: #f8f5ee;
  --card-keep-text: #111;
  --card-keep-muted: #666;
  --card-keep-border: #111;
  --card-keep-shadow: #111;
}

/* Kill transitions during theme switch to prevent lag */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}