@media (prefers-color-scheme: dark) {
  :root {
    color: white;
    background-color: black;
    --bg: #111111;
    --fg: #eeeeee;
    --link: #66b2ff;
    --border: #333333;

    --bg-near-white: #111111;
    --bg-white: #000000;
    --bg-black-90: #0d0d0d;
    --bg-light-gray: #0d0d0d;

    --c-near-black: #eeeeee;
    --c-dark-gray: #dddddd;
    --c-mid-gray: #bbbbbb;
    --c-light-gray: #999999;
    --c-white: #ffffff;
    --c-link: #66b2ff;
  }
}

/* ==============================================================
   3️⃣ MAP ANANKE’S UTILITY CLASSES TO THE VARIABLES
   ============================================================== */
.bg-near-white {
  background-color: var(--bg-near-white) !important;
}
.bg-white {
  background-color: var(--bg-white) !important;
}
.bg-black-90 {
  background-color: var(--bg-black-90) !important;
}
.bg-light-gray {
  background-color: var(--bg-light-gray) !important;
}
.black {
  color: var(--c-black) !important;
}
.near-black {
  color: var(--c-near-black) !important;
}
.dark-gray {
  color: var(--c-dark-gray) !important;
}
.mid-gray {
  color: var(--c-mid-gray) !important;
}
.light-gray {
  color: var(--c-light-gray) !important;
}
.white {
  color: var(--c-white) !important;
}

a {
  color: var(--c-link);
}
a:hover {
  opacity: 0.85;
}