/* ==========================================================
   theme.css — Light/Dark mode for tylermarma.com
   Dark mode: uses existing inline :root variables as defaults.
   Light mode: activated via html[data-theme="light"].
   ========================================================== */

/* --- Smooth transition on theme switch --- */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- New variables for both themes (not in inline :root) --- */
html, html[data-theme="dark"] {
  --accent-green: #39ff14;
  --border-color: #222;
  --glow-color: rgba(0, 255, 65, 0.08);
  --scanline-color: rgba(0, 255, 65, 0.04);
}

/* --- Light mode overrides --- */
html[data-theme="light"] {
  --hacker-green: #006B1F;
  --dim-green: #2D8A4E;
  --bg-black: #F5F5F0;
  --dark-gray: #E8E8E2;
  --accent-green: #008A2E;
  --border-color: #C0C0B8;
  --glow-color: rgba(0, 107, 31, 0.06);
  --scanline-color: rgba(0, 107, 31, 0.02);
}

/* Body — light mode background */
html[data-theme="light"] body {
  background: var(--bg-black) !important;
  color: var(--hacker-green);
}

/* Hide animated scanlines in light mode */
html[data-theme="light"] body::after {
  opacity: 0 !important;
}

/* --- Header --- */
html[data-theme="light"] .site-header {
  background: var(--bg-black) !important;
  box-shadow: 0 2px 0 var(--dim-green) !important;
}

/* --- Footer --- */
html[data-theme="light"] .site-footer {
  background: var(--bg-black) !important;
  color: var(--hacker-green) !important;
  box-shadow: 0 -2px 0 var(--dim-green) !important;
}

/* --- Mobile menu --- */
html[data-theme="light"] .mobile-menu {
  background: var(--hacker-green) !important;
}
html[data-theme="light"] .mobile-menu a {
  background: var(--hacker-green) !important;
  color: var(--bg-black) !important;
  border-bottom-color: var(--bg-black) !important;
}
html[data-theme="light"] .mobile-menu a:hover {
  background: var(--bg-black) !important;
  color: var(--hacker-green) !important;
}

/* --- Custom cursor --- */
html[data-theme="light"] .custom-cursor {
  background: var(--hacker-green) !important;
}

/* --- CRT scanline overlay — hide in light mode --- */
html[data-theme="light"] .crt {
  opacity: 0 !important;
}

/* --- Terminal (splash page) --- */
html[data-theme="light"] .terminal {
  background: rgba(245, 245, 240, 0.95) !important;
  border-color: var(--hacker-green) !important;
  box-shadow: 0 0 24px rgba(0, 107, 31, 0.15) !important;
}
html[data-theme="light"] .terminal-line {
  text-shadow: none !important;
}
html[data-theme="light"] .terminal-cursor {
  background: var(--hacker-green) !important;
}

/* --- Buttons --- */
html[data-theme="light"] .launch-btn {
  background: var(--hacker-green) !important;
  color: var(--bg-black) !important;
  border-color: var(--hacker-green) !important;
  box-shadow: 0 0 8px rgba(0, 107, 31, 0.3) !important;
  text-shadow: none !important;
}
html[data-theme="light"] .launch-btn:hover {
  background: var(--bg-black) !important;
  color: var(--hacker-green) !important;
  box-shadow: 0 0 16px rgba(0, 107, 31, 0.4) !important;
}

html[data-theme="light"] .btn-hacker {
  box-shadow: 0 0 8px rgba(0, 107, 31, 0.3) !important;
}
html[data-theme="light"] .btn-hacker:hover {
  background: var(--bg-black) !important;
  color: var(--hacker-green) !important;
  border-color: var(--hacker-green) !important;
  box-shadow: 0 0 12px rgba(0, 107, 31, 0.4) !important;
}

/* --- Section cards --- */
html[data-theme="light"] .section,
html[data-theme="light"] .about-section,
html[data-theme="light"] .project-section,
html[data-theme="light"] .connect-section,
html[data-theme="light"] .resume-section,
html[data-theme="light"] .edelman-section {
  background: var(--dark-gray) !important;
  box-shadow: 0 0 0 2px var(--dim-green) !important;
}

/* --- Project cards --- */
html[data-theme="light"] .project-card {
  background: var(--bg-black) !important;
  border-color: var(--hacker-green) !important;
  box-shadow: 0 0 0 2px var(--dim-green) !important;
}

/* --- About headshot glow --- */
html[data-theme="light"] .about-img {
  box-shadow: 0 0 24px rgba(0, 107, 31, 0.2) !important;
}

/* --- Spark effect --- */
html[data-theme="light"] .spark {
  background: radial-gradient(circle, #006B1F 0%, #2D8A4E 80%, transparent 100%) !important;
}

/* --- Connect item borders --- */
html[data-theme="light"] .connect-item {
  border-bottom-color: var(--dim-green) !important;
}

/* --- CTA link glows --- */
html[data-theme="light"] .project-cta a,
html[data-theme="light"] .resume-cta a,
html[data-theme="light"] .edelman-cta a,
html[data-theme="light"] .about-cta a {
  box-shadow: 0 0 8px rgba(0, 107, 31, 0.3) !important;
}
html[data-theme="light"] .project-cta a:hover,
html[data-theme="light"] .resume-cta a:hover,
html[data-theme="light"] .edelman-cta a:hover,
html[data-theme="light"] .about-cta a:hover {
  box-shadow: 0 0 12px rgba(0, 107, 31, 0.4) !important;
}

/* ==========================================================
   Amber phosphor mode
   ========================================================== */
html[data-phosphor="amber"] {
  --hacker-green: #FFB000;
  --dim-green: #CC8800;
  --accent-green: #FFC633;
  --border-color: #332200;
  --glow-color: rgba(255, 176, 0, 0.12);
  --scanline-color: rgba(255, 176, 0, 0.04);
}

html[data-phosphor="amber"][data-theme="light"] {
  --hacker-green: #8B5E00;
  --dim-green: #A67C00;
  --accent-green: #B37400;
  --bg-black: #F5F0E5;
  --dark-gray: #E8E2D2;
  --border-color: #C0B8A0;
  --glow-color: rgba(139, 94, 0, 0.06);
  --scanline-color: rgba(139, 94, 0, 0.02);
}

/* ==========================================================
   Red phosphor mode
   ========================================================== */
html[data-phosphor="red"] {
  --hacker-green: #FF1744;
  --dim-green: #CC0033;
  --accent-green: #FF4D6A;
  --border-color: #330011;
  --glow-color: rgba(255, 23, 68, 0.12);
  --scanline-color: rgba(255, 23, 68, 0.04);
}

html[data-phosphor="red"][data-theme="light"] {
  --hacker-green: #9B0023;
  --dim-green: #B8003A;
  --accent-green: #CC0044;
  --bg-black: #F5E5E8;
  --dark-gray: #E8D2D6;
  --border-color: #C0A0A8;
  --glow-color: rgba(155, 0, 35, 0.06);
  --scanline-color: rgba(155, 0, 35, 0.02);
}

/* ==========================================================
   Blue phosphor mode
   ========================================================== */
html[data-phosphor="blue"] {
  --hacker-green: #00B0FF;
  --dim-green: #0088CC;
  --accent-green: #40C4FF;
  --border-color: #001A33;
  --glow-color: rgba(0, 176, 255, 0.12);
  --scanline-color: rgba(0, 176, 255, 0.04);
}

html[data-phosphor="blue"][data-theme="light"] {
  --hacker-green: #005B8C;
  --dim-green: #0074A6;
  --accent-green: #008BBF;
  --bg-black: #E5F0F5;
  --dark-gray: #D2E2E8;
  --border-color: #A0B8C0;
  --glow-color: rgba(0, 91, 140, 0.06);
  --scanline-color: rgba(0, 91, 140, 0.02);
}

/* ==========================================================
   Purple phosphor mode
   ========================================================== */
html[data-phosphor="purple"] {
  --hacker-green: #9B30FF;
  --dim-green: #7A25CC;
  --accent-green: #B860FF;
  --border-color: #1A0033;
  --glow-color: rgba(50, 2, 102, 0.2);
  --scanline-color: rgba(50, 2, 102, 0.06);
}

html[data-phosphor="purple"][data-theme="light"] {
  --hacker-green: #4A0E80;
  --dim-green: #5C1A99;
  --accent-green: #7030B3;
  --bg-black: #F0E8F8;
  --dark-gray: #E0D0EC;
  --border-color: #B090C8;
  --glow-color: rgba(50, 2, 102, 0.08);
  --scanline-color: rgba(50, 2, 102, 0.03);
}

/* ==========================================================
   Settings dropdown
   ========================================================== */
.settings-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 1em;
}

.settings-trigger {
  background: none;
  border: 1px solid var(--hacker-green, #00FF41);
  color: var(--hacker-green, #00FF41);
  font-family: var(--font-heading, 'JetBrains Mono', monospace);
  font-size: 0.85rem;
  padding: 0.3em 0.7em;
  cursor: none !important;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.settings-trigger:hover {
  background: var(--hacker-green, #00FF41);
  color: var(--bg-black, #000);
}

.settings-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5em);
  right: 0;
  background: var(--bg-black, #000);
  border: 1px solid var(--hacker-green, #00FF41);
  border-radius: 3px;
  padding: 0.6em 0.8em;
  z-index: 300;
  box-shadow: 0 0 12px var(--glow-color, rgba(0, 255, 65, 0.15));
  min-width: 160px;
}
.settings-panel.is-open {
  display: block;
}

.settings-group {
  margin-bottom: 0.6em;
}
.settings-group:last-child {
  margin-bottom: 0;
}

.settings-heading {
  color: var(--dim-green, #00CC33);
  font-family: var(--font-body, 'IBM Plex Mono', monospace);
  font-size: 0.8rem;
  margin-bottom: 0.15em;
  letter-spacing: 0.03em;
}

.settings-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--dim-green, #00CC33);
  font-family: var(--font-heading, 'JetBrains Mono', monospace);
  font-size: 0.8rem;
  padding: 0.1em 0.3em;
  cursor: none !important;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.settings-item:hover {
  color: var(--hacker-green, #00FF41);
}
.settings-item.settings-active {
  color: var(--hacker-green, #00FF41);
}

.settings-indicator {
  display: inline-block;
  width: 1.2em;
  color: var(--hacker-green, #00FF41);
}

/* Floating dropdown for pages without header */
.settings-dropdown-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
}

/* Mobile adjustments */
@media (max-width: 700px) {
  .settings-dropdown {
    position: static;
  }
  .settings-panel {
    position: fixed;
    top: auto;
    bottom: 4em;
    right: 1em;
    left: auto;
  }
}