:root {
  --bg: #fff;
  --bg-panel: #fff;
  --color-headings: #161c2d;
  --color-text-opacity: rgba(22, 28, 45, 0.7);
  --color-text: #161c2d;
  --color-text-base: #161c2d;
  --border: #383f53;
}

[data-theme="light"] .hero-bg {
  background-image: url("../assets/images/hero-pattern.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-theme="dark"] {
  --bg: #171a23;
  --bg-panel: #f1f1f1;
  --color-headings: #fff;
  --color-text-opacity: rgba(255, 255, 255, 0.7);
  --color-text: #fff;
  --color-text-base: #161c2d;
  --border: #ced4da;
}