:root[data-theme="dark"] {
  --bg: #020617;
  --bg-elevated: rgba(15, 23, 42, 0.97);
  --bg-subtle: rgba(15, 23, 42, 0.96);
  --border-subtle: rgba(30, 64, 175, 0.7);
  --border-strong: rgba(59, 130, 246, 0.9);
  --text: #e5e7eb;
  --text-dim: #9ca3af;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.26);
  --accent-strong: rgba(56, 189, 248, 0.6);
  --shadow-soft: 0 18px 60px rgba(15, 23, 42, 0.9);
  --preview-bg: radial-gradient(
      circle at 0 0,
      rgba(59, 130, 246, 0.45),
      transparent 55%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(56, 189, 248, 0.45),
      transparent 55%
    ),
    #020617;

  color-scheme: dark;
}

body[data-theme="dark"] {
  background: radial-gradient(
      circle at 0% 0%,
      rgba(56, 189, 248, 0.26),
      transparent 55%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(129, 140, 248, 0.3),
      transparent 55%
    ),
    #020617;
}