/* Dark theme is default in variables.css */

/* Explicit dark theme */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --text: #e0e0e0;
  --text-secondary: #999999;
  --text-tertiary: #555555;
  --accent: #00ffd0;
  --accent-hover: #33ffe0;
  --accent-dim: rgba(0, 255, 208, 0.15);
  --accent-muted: rgba(0, 255, 208, 0.4);
  --border: #222222;
  --glow: 0 0 20px var(--accent-dim);
}

/* Light theme */
[data-theme="light"] {
  --bg: #fafafa;
  --bg-secondary: #f0f0f0;
  --bg-tertiary: #e8e8e8;
  --text: #1a1a1a;
  --text-secondary: #555555;
  --text-tertiary: #999999;
  --accent: #00b894;
  --accent-hover: #00a884;
  --accent-dim: rgba(0, 184, 148, 0.1);
  --accent-muted: rgba(0, 184, 148, 0.3);
  --border: #dddddd;
  --glow: 0 0 20px var(--accent-dim);
}

/* System theme - follow OS preference */
[data-theme="system"] {
  /* Dark is default, light applied via media query */
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg: #fafafa;
    --bg-secondary: #f0f0f0;
    --bg-tertiary: #e8e8e8;
    --text: #1a1a1a;
    --text-secondary: #555555;
    --text-tertiary: #999999;
    --accent: #00b894;
    --accent-hover: #00a884;
    --accent-dim: rgba(0, 184, 148, 0.1);
    --accent-muted: rgba(0, 184, 148, 0.3);
    --border: #dddddd;
    --glow: 0 0 20px var(--accent-dim);
  }
}

/* Theme transition */
body,
body * {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

/* Exclude canvas and animation elements from transition */
canvas,
.scroll-indicator {
  transition: none !important;
}