:root {
  --bg-light: #8AC980;
  --bg-dark: #0C3E27;
  --accent-light: #B2D88F;
  --accent-dark: #146842;
  --text-light: #eaeaea;
  --text-dark: #423F38;
  --bg: var(--bg-light);
  --accent: var(--accent-light);
  --text: var(--text-dark);
  --light-backround: var(--text-light);
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--accent);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.generic {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: var(--bg);
}

/* Dark theme: toggle by setting data-theme="dark" on the body */
body[data-theme="dark"] {
  --bg: var(--bg-dark);
  --accent: var(--accent-dark);
  --text: var(--text-light);
}

footer {
  color: var(--text);
  opacity: 0.7;
  text-align: center;
  position: fixed;
  bottom: 1rem;
  width: 100%;
}