/* Unified Theme Variables */
html {
  background-color: var(--bg-body) !important;
}
:root {
  /* Dark Mode (Default) */
  --bg-body: #111215;
  --color-body: #fff;
  --color-p: #a4a7b1;
  --sub-bg: #18191d;
  --bg-dark: #141414;
  --border-color: rgba(255, 255, 255, 0.1);
}

body.light {
  /* Light Mode Overrides */
  --bg-body: #f5f5f5;
  --color-body: #111;
  --color-p: #555;
  --sub-bg: #ffffff;
  --bg-dark: #eee;
  --border-color: rgba(0, 0, 0, 0.1);
}

/* Base structural fixes to use variables */
body {
  color: var(--color-body) !important;
  background: var(--bg-body) !important;
}

p {
  color: var(--color-p) !important;
}

.sub-bg {
  background-color: var(--sub-bg) !important;
}

.bg-dark {
  background-color: var(--bg-dark) !important;
}

/* Add more variable-based overrides here as needed */

/* Theme-aware Footer Styles */
footer.sub-bg {
  background-color: var(--sub-bg) !important;
  color: var(--color-body) !important;
  border-top: 1px solid var(--border-color);
  margin-bottom: 0 !important;
}

footer p {
  color: var(--color-p) !important;
}

footer h5, footer h6 {
  color: var(--color-body) !important;
}

footer .icon {
  color: var(--color-body) !important;
}

footer .social a {
  color: var(--color-body) !important;
  border: 1px solid var(--border-color) !important;
}

footer .social a:hover {
  color: #12c2e9 !important;
}

/* Sticky Footer Fix */
#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}