:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --accent: #0ea5e9;
  --text: #111827;
}

html.dark {
  --bg: #0f172a;
  --card: #1e293b;
  --accent: #38bdf8;
  --text: #e2e8f0;
}

body { background: var(--bg); color: var(--text); transition: background .3s, color .3s; }
.header, .card, .sidebar, .footer { background: var(--card); }

/* 1.  Fix Moon visibility */
html.dark #sun { display: none; }
html.dark #moon { display: block; }

/* 2.  Button cursor & transition */
#theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  transition: transform .2s;
}
#theme-toggle:hover { transform: scale(1.1); }

/* 3.  Ensure variables swap */
:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --accent: #0ea5e9;
  --text: #111827;
}

html.dark {
  --bg: #0f172a;
  --card: #1e293b;
  --accent: #38bdf8;
  --text: #e2e8f0;
}