:root {
  --bg: #fff;
  --header-bg: #eeeeee;
  --logo-bg: rgba(179, 179, 179, 0.247);
  --bg-panel: #fff;
  --color-headings: #161c2d;
  --color-text-opacity: rgba(22, 28, 45, 0.7);
  --color-text: #161c2d;
  --color-text-base: #161c2d;
  --border: #383f53;
  --btn: #b62f2f;
  --btn-border: #ff4040;
}

[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;
  --header-bg: #24242c;
  --logo-bg: rgba(146, 146, 146, 0.144);
  --bg-panel: #f1f1f1;
  --color-headings: #fff;
  --color-text-opacity: rgba(255, 255, 255, 0.7);
  --color-text: #fff;
  --color-text-base: #161c2d;
  --border: #ced4da;
}