/* =========================================
   DARK MODE — Deep Space Blue
   ========================================= */

html[data-theme="dark"] {

  /* ============================
     VARIABLES
     ============================ */
  --color-background: #0b0f19;
  --color-surface: #111827;

  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;

  --color-border: rgba(255, 255, 255, 0.08);

  --color-accent: #0099ad;
  --color-accent-strong: #66d9ff;
  --color-neon: #39ff14;
  --color-mint: #00ff9d;

  --tile-shadow: 0 10px 28px rgba(0,0,0,0.55);
  --tile-hover-shadow: 0 16px 36px rgba(0,0,0,0.6);

  --footer-btn-bg: rgba(255,255,255,0.08);
  --footer-btn-hover-bg: #00698c;

  --menu-bg: #1f2937;
  --menu-hover-bg: #374151;
  --menu-hover-text: var(--color-mint);

  /* Updated dark-mode gradient (slightly brighter for visible weave) */
  --theme-background: linear-gradient(
    to right,
    #0f2342 0%,
    #12345a 50%,
    #0f2342 100%
  );
}

/* =========================================
   APPLY DARK-MODE BACKGROUND + FABRIC WEAVE
   ========================================= */

html[data-theme="dark"] body {
  background: linear-gradient(
    to right,
    #0f2342 0%,
    #1f4f7a 50%,
    #0f2342 100%
  );
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  position: relative;
}

html[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;

  /* Enhanced weave for dark mode */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.12) 0px,
      rgba(255,255,255,0.12) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.25) 0px,
      rgba(0,0,0,0.25) 2px,
      transparent 2px,
      transparent 6px
    );

  pointer-events: none;
  z-index: 0;
}

/* =========================================
   FOOTER
   ========================================= */

html[data-theme="dark"] .footer-grid {
  background: var(--color-surface);
}

html[data-theme="dark"] .footer-block h4,
html[data-theme="dark"] .footer-block h5 {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-neon);
}

html[data-theme="dark"] .footer-block h4:hover,
html[data-theme="dark"] .footer-block h5:hover {
  border-bottom-color: var(--color-mint);
}

html[data-theme="dark"] .footer-btn {
  background: var(--footer-btn-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .footer-btn:hover {
  background: var(--footer-btn-hover-bg);
  color: #000;
}

/* =========================================
   MENUS
   ========================================= */

html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .mod-menu a {
  background: var(--menu-bg);
  color: var(--color-text);
  border-radius: 999px;
}

html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .mod-menu a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

html[data-theme="dark"] .main-nav li.current a,
html[data-theme="dark"] .mod-menu li.current a,
html[data-theme="dark"] .main-nav li.active a,
html[data-theme="dark"] .mod-menu li.active a {
  color: rgba(255,255,255,0.25);
  pointer-events: none;
  cursor: default;
}