html.matrix-theme {
  --primary-color: #39ff14;
  --primary-color-rgb: 57, 255, 20;
  --accent-color: #00ff00;
  background-color: #000;
}

html.matrix-theme #themeToggle,
html.matrix-theme .theme-toggle-btn {
  color: #39ff14;
  border-color: #39ff14;
  background-color: #000;
}

html.matrix-theme #themeToggle:hover,
html.matrix-theme .theme-toggle-btn:hover {
  background-color: rgba(57, 255, 20, 0.1) !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.6) !important;
}

html.matrix-theme #themeToggle:focus,
html.matrix-theme .theme-toggle-btn:focus {
  box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.3);
}

html.matrix-theme body {
  background: linear-gradient(135deg, #000000 0%, #003300 100%);
  overflow-y: auto; /* allow scrolling */
}

.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* draw above background but below content */
}

/* Chart button text should be black to match navigation */
html.matrix-theme .toggle-btn.active {
  color: #000 !important;
}
