/* ---------- Base background + text ---------- */
body {
  background: #0b0f14; /* overrides #312450 */
}

body, input, select, textarea {
  color: rgba(230, 237, 243, 0.78);
}

a {
  border-bottom-color: rgba(230, 237, 243, 0.25);
}

a:hover {
  color: #ffffff;
}

/* ---------- Sidebar ---------- */
#sidebar {
  background: #0f1620; /* overrides #312450 */
}

#sidebar nav a {
  color: rgba(230, 237, 243, 0.45);
}

#sidebar nav a:hover {
  color: rgba(230, 237, 243, 0.75);
}

#sidebar nav a:before {
  background: #0b0f14; /* overrides #3c2c62 */
}

/* sidebar underline accent (was purple→pink gradient) */
#sidebar nav a:after {
  background-image: linear-gradient(to right, #6d7cff, #2dd4bf);
}

/* ---------- Wrapper section blocks ---------- */
/* If you want ALL sections dark, make them all dark surfaces: */
.wrapper.alt {
  background-color: #0f1620; /* overrides #261c3e */
}

.wrapper.style1,
.wrapper.style1-alt,
.wrapper.style2,
.wrapper.style2-alt,
.wrapper.style3,
.wrapper.style3-alt {
  background-color: #0b0f14; /* overrides the bright palette blocks */
}

/* Optional: give sections a subtle tonal variety instead of flat black */
.wrapper.style1-alt,
.wrapper.style2-alt,
.wrapper.style3-alt {
  background-color: #0f1620;
}

/* ---------- Headline accent bar (was purple→pink gradient) ---------- */
h1.major:after {
  background-image: linear-gradient(to right, #6d7cff, #2dd4bf);
}

/* ---------- Common “panel” surfaces used by forms / code already work,
   but this nudges them darker and keeps borders coherent ---------- */
code,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea,
.box,
.features {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(230, 237, 243, 0.14);
}