/* styles/themes.css */
/* Dark mode overrides and theme-specific variables */

/* ============================== Dark Mode Variables ============================== */
body[data-theme="dark"] {
  /* Color overrides */
  --bg: #0a0a0a;
  --bg-2: #121316;
  --text: #e5e5e5;
  --text-dim: #b0b0b0;
  --text-muted: #8a8a8a;
  --accent: #22c55e;

  /* Neumorphic shadows for dark mode */
  --neu-light: rgba(255, 255, 255, 0.12);
  --neu-dark: rgba(0, 0, 0, 0.90);
  --neu-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.70),
               inset -4px -4px 8px rgba(255, 255, 255, 0.08);
  --neu-out: 14px 14px 28px var(--neu-dark),
             -14px -14px 28px rgba(255, 255, 255, 0.10);

  /* Theme-specific adjustments */
  color: var(--text);
  background: linear-gradient(145deg, var(--bg), var(--bg-2));
}

/* ============================== Dark Mode Background ============================== */
body[data-theme="dark"] .background-gradient {
  background:
    radial-gradient(900px 600px at 18% 6%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    linear-gradient(145deg, var(--bg), var(--bg-2));
}

/* ============================== Dark Mode Component Overrides ============================== */

/* Navigation */
body[data-theme="dark"] nav,
body[data-theme="dark"] footer {
  background: linear-gradient(145deg, #0a0a0a, #121316) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="dark"] .nav-links {
  background: rgba(10, 10, 10, 0.96);
}

/* Text color enforcement */
body[data-theme="dark"] .nav-link,
body[data-theme="dark"] .footer-links a,
body[data-theme="dark"] .btn,
body[data-theme="dark"] .project-title,
body[data-theme="dark"] .project-description,
body[data-theme="dark"] .about-text,
body[data-theme="dark"] .contact-info,
body[data-theme="dark"] .contact-item,
body[data-theme="dark"] .muted {
  color: #f1f5f9 !important;
}

/* Section titles */
body[data-theme="dark"] .section-title {
  color: #fff !important;
  background: none !important;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* Hamburger menu */
body[data-theme="dark"] .hamburger {
  background: #fff !important;
}

/* ============================== Dark Mode Accordion ============================== */
body[data-theme="dark"] .acc-header {
  color: #fff !important;
}

body[data-theme="dark"] .acc-inner {
  color: #e5e5e5 !important;
}

body[data-theme="dark"] .acc-inner h3,
body[data-theme="dark"] .acc-inner h4 {
  color: #fff !important;
}

/* Accordion icons */
body[data-theme="dark"] .acc-header .acc-icon,
body[data-theme="dark"] .acc-header svg,
body[data-theme="dark"] .acc-header svg path {
  color: #fff !important;
  fill: #fff !important;
  stroke: none !important;
}

/* Remove divider lines in dark mode */
body[data-theme="dark"] .acc-content {
  border-top: 0 !important;
}

body[data-theme="dark"] .acc-item {
  border: 0 !important;
  box-shadow: var(--neu-out);
}

/* ============================== Dark Mode Cookie Banner ============================== */
body[data-theme="dark"] #cookieConsentBanner .cookie-btn.accept {
  color: #fff !important;
}

body[data-theme="dark"] .learn-more-modal h3 {
  color: #fff !important;
}

/* ============================== Dark Mode Toast ============================== */
body[data-theme="dark"] #learnToast,
body[data-theme="dark"] .toast {
  color: #fff;
}

body[data-theme="dark"] #learnToast a,
body[data-theme="dark"] .toast a {
  color: #fff;
  text-decoration: underline;
}

/* ============================== Enhanced Dark Mode Effects ============================== */

/* Stronger neumorphic effects for better visibility */
body[data-theme="dark"] .project-card,
body[data-theme="dark"] .contact-info,
body[data-theme="dark"] .about-text,
body[data-theme="dark"] .card,
body[data-theme="dark"] .btn {
  box-shadow: var(--neu-out);
}

body[data-theme="dark"] .btn:hover {
  box-shadow: var(--neu-inset);
}

/* ============================== Matrix Page Theme ============================== */

/* Special handling for matrix/labs pages */
body:has(#matrix-canvas) {
  --matrix-color: #00ff41;
  --matrix-glow: rgba(0, 255, 65, 0.06);
  --matrix-fade: rgba(0, 0, 0, 0.08);
}

body:not([data-theme="dark"]):has(#matrix-canvas) {
  --matrix-color: #3b82f6;
  --matrix-glow: rgba(0, 0, 0, 0);
  --matrix-fade: rgba(255, 255, 255, 0.08);
}

/* Matrix page background override */
body[data-theme="dark"]:has(#matrix-canvas) .matrix-bg,
body[data-theme="dark"]:has(#matrix-canvas) .background-gradient {
  background: #000 !important;
}

/* Matrix page section titles */
body:has(#matrix-canvas) .section-title {
  background: linear-gradient(90deg, #22c55e, #86efac);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.95;
}

/* Matrix page avatar styling */
body:has(#matrix-canvas) .site-avatar {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.75),
              -6px -6px 14px rgba(255, 255, 255, 0.05);
}

/* ============================== Theme Transition Animations ============================== */

/* Smooth theme transitions */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.background-gradient {
  transition: background 0.3s ease;
}

nav, footer {
  transition: background 0.3s ease, border-color 0.3s ease;
}

.project-card,
.about-text,
.contact-info,
.acc-item,
.btn {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* ============================== Auto Dark Mode ============================== */

/* System preference detection */
@media (prefers-color-scheme: dark) {
  /* Only apply if no manual theme is set */
  body:not([data-theme]) {
    --bg: #0a0a0a;
    --bg-2: #121316;
    --text: #e5e5e5;
    --text-dim: #b0b0b0;
    --text-muted: #8a8a8a;
    --accent: #22c55e;
    --neu-light: rgba(255, 255, 255, 0.12);
    --neu-dark: rgba(0, 0, 0, 0.90);
    --neu-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.70),
                 inset -4px -4px 8px rgba(255, 255, 255, 0.08);
    --neu-out: 14px 14px 28px var(--neu-dark),
               -14px -14px 28px rgba(255, 255, 255, 0.10);
  }
}

/* ============================== High Contrast Mode ============================== */

@media (prefers-contrast: high) {
  body[data-theme="dark"] {
    --bg: #000000;
    --bg-2: #111111;
    --text: #ffffff;
    --text-dim: #cccccc;
    --text-muted: #999999;
    --neu-out: 0 0 0 2px #ffffff;
    --neu-inset: inset 0 0 0 2px #ffffff;
  }
}

/* ============================== Reduced Motion ============================== */

@media (prefers-reduced-motion: reduce) {
  body,
  .background-gradient,
  nav,
  footer,
  .project-card,
  .about-text,
  .contact-info,
  .acc-item,
  .btn {
    transition: none !important;
  }
}

/* ============================== Print Mode ============================== */

@media print {
  body[data-theme="dark"] {
    --bg: #ffffff !important;
    --bg-2: #ffffff !important;
    --text: #000000 !important;
    --text-dim: #333333 !important;
    --text-muted: #666666 !important;
    background: white !important;
    color: black !important;
  }
}