/* ============================================================
   DARK THEME VARIABLES — MATCH DIVISIONS
   ============================================================ */

:root[data-theme="dark"] {
  --color-background: #0b0f19;
  --color-surface: #111827;

  --color-text: #e7eaf0;
  --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);

  /* Overview dark gradient */
  --theme-background: linear-gradient(
    to right,
    #0f2342 0%,
    #1f4f7a 50%,
    #0f2342 100%
  );
}

/* ============================================================
   DARK BACKGROUND + WEAVE
   ============================================================ */

html[data-theme="dark"] body {
  background: var(--theme-background);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

/* ============================================================
   DARK CONTAINERS (Overview)
   ============================================================ */

html[data-theme="dark"] .com-content-article,
html[data-theme="dark"] .com-content-category-blog,
html[data-theme="dark"] .com-content-article__body,
html[data-theme="dark"] .site-grid > * {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

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

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

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;
}

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

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

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);
}