:root {
  --background-color: white;
  --text-color: black;
  --primary-color: hsl(217, 71%, 53%); /* Bulma primary */
}

@media (prefers-color-scheme: dark) {
  :root {
      --background-color: #121212;
      --text-color: white;
      --primary-color: hsl(200, 100%, 40%);
  }

  /* General dark mode overrides */
  body {
      background-color: var(--background-color) !important;
      color: var(--text-color) !important;
  }

  .hero.is-primary {
      background-color: var(--primary-color) !important;
  }

  .footer {
      background-color: var(--primary-color) !important;
  }

  /* Override Bulma components */
  .button.is-primary {
      background-color: var(--primary-color) !important;
      color: white;
  }

  .hover {
      color: var(--text-color) !important;
  }
}