/* ============================================
   Grid Agency — Light Mode Overrides
   Applied when body.light-mode class is set.
   ============================================ */

body.light-mode {
  --bg-primary: #F5F5F0;
  --bg-secondary: #EEEEE8;
  --bg-card: #E8E8E0;
  --text-primary: #1A1A2E;
  --text-secondary: #444466;
  --text-dim: #888899;
  --border-dim: #CCCCDD;
  --border-neon: #CC1155;
  --neon-pink: #CC1155;
  --neon-cyan: #007777;
  --neon-purple: #5B1F9E;
}

/* Nav — lighter transparency */
body.light-mode .nav {
  background: rgba(245, 245, 240, 0.85);
  border-bottom-color: var(--border-dim);
}

/* Nav links — visible hover */
body.light-mode .nav-links a:hover {
  color: var(--neon-pink);
}

/* Nav toggle button — visible hover */
body.light-mode .nav-toggle-btn:hover {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
}

/* Scanlines — reduced for light backgrounds */
body.light-mode .scanlines::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.015) 2px,
    rgba(0, 0, 0, 0.015) 4px
  );
}

/* Grid background — lighter lines */
body.light-mode .grid-bg {
  background-image:
    linear-gradient(var(--border-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-dim) 1px, transparent 1px);
}

/* Neon glows — subtle shadow + underline instead of invisible glow on light bg */
body.light-mode .neon-glow-pink {
  text-shadow: 0 1px 2px rgba(204, 17, 85, 0.3);
  text-decoration: underline;
  text-decoration-color: rgba(204, 17, 85, 0.4);
  text-underline-offset: 4px;
}

body.light-mode .neon-glow-cyan {
  text-shadow: 0 1px 2px rgba(0, 119, 119, 0.3);
  text-decoration: underline;
  text-decoration-color: rgba(0, 119, 119, 0.4);
  text-underline-offset: 4px;
}

/* Hero claim — visible shadow instead of invisible neon glow */
body.light-mode .hero-claim {
  text-shadow:
    0 2px 4px rgba(204, 17, 85, 0.25),
    0 4px 16px rgba(204, 17, 85, 0.15);
}

/* Hero sub — ensure readability on light background */
body.light-mode .hero-sub {
  color: var(--text-primary);
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Terminal border — stronger shadow */
body.light-mode .terminal-border {
  box-shadow: 0 2px 12px rgba(204, 17, 85, 0.15);
}

/* Cards — visible hover with shadow lift and border highlight */
body.light-mode .card {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

body.light-mode .card:hover {
  border-color: var(--neon-pink);
  box-shadow:
    0 4px 16px rgba(204, 17, 85, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Terminal window — visible hover */
body.light-mode .terminal-window:hover {
  border-color: var(--neon-pink);
  box-shadow:
    0 4px 16px rgba(204, 17, 85, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Buttons — strong hover feedback */
body.light-mode .btn-primary:hover {
  background: var(--neon-pink);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(204, 17, 85, 0.4);
}

body.light-mode .btn-secondary:hover {
  background: var(--neon-cyan);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 119, 119, 0.4);
}

body.light-mode .btn-ghost:hover {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  box-shadow: 0 2px 10px rgba(204, 17, 85, 0.12);
}

/* Form inputs — stronger focus ring */
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
  box-shadow: 0 0 0 3px rgba(204, 17, 85, 0.15), 0 0 8px rgba(204, 17, 85, 0.1);
}

/* Footer */
body.light-mode .footer {
  background: #E0E0D8;
  border-top-color: var(--border-dim);
}

/* Footer links — visible hover */
body.light-mode .footer a:hover {
  color: var(--neon-pink);
}

/* Selection */
body.light-mode ::selection {
  background-color: var(--neon-pink);
  color: #FFFFFF;
}

/* Scrollbar (light) */
body.light-mode ::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

body.light-mode ::-webkit-scrollbar-thumb {
  background: var(--border-dim);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Platform logos — stronger hover effect for light bg */
body.light-mode .platform-logo {
  filter: grayscale(100%) opacity(0.4);
}

body.light-mode .platform-logo:hover {
  filter: grayscale(0%) opacity(1) drop-shadow(0 2px 6px rgba(0, 119, 119, 0.35));
}

/* ASCII art — boost visibility on light bg */
body.light-mode .ascii-pre {
  color: rgba(204, 17, 85, 0.18);
}

body.light-mode .ascii-scan-line {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 119, 119, 0.1) 40%,
    rgba(204, 17, 85, 0.12) 60%,
    transparent 100%
  );
}

/* Tool divider — stronger visibility */
body.light-mode .tool-divider {
  opacity: 0.55;
}

/* Tool platform tag — visible border on light bg */
body.light-mode .tool-platform-tag {
  border-color: rgba(0, 119, 119, 0.5);
}

/* Mobile nav dropdown — light */
@media (max-width: 767px) {
  body.light-mode .nav-links {
    background: rgba(245, 245, 240, 0.95);
  }
}