:root {
  --body-bg: #f8f9fa; /* Soft light gray */
  --hero-bg: #ffffff; /* Clean white section */
  --navbar-bg: #f1f3f5; /* Subtle off-white navbar */
  --input-bg: white;
  --primary-text-color: #1a1a1a; /* Strong neutral black */
  --secondary-text-color: #4a4a4a; /* Dimmed for readability */
  --icon-color: #1a1a1a; /* Dark neutral for icons */

  --hover-color: #a4ccd9; /* Premium blue for links/buttons */
  --img-shadow-color: #1a1a1e; /* Subtle image elevation */
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

html {
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

body {
  margin: 0;
  background-color: var(--body-bg);
}

body.dark-mode {
  --body-bg: #0f0f11; /* Deep black-blue */
  --hero-bg: #1a1a1e; /* Slightly raised dark */
  --navbar-bg: #12141a; /* Differentiated darker top navbar */
  --input-bg: #393e46;
  --primary-text-color: #f3f4f6; /* Soft light text */
  --secondary-text-color: #b0b3ba; /* Comfortable body text */
  --icon-color: #e2e8f0; /* Cool slate for icons */

  --hover-color: #8a63d2; /* Premium violet highlight */
  --img-shadow-color: #12141a; /* Subtle white shadow */
}

.article-icon {
  fill: var(--icon-color);
  opacity: 0.03;
  width: 60%;
  height: auto;
  margin-left: 20%;
  margin-right: 20%;
  /* border: 1px solid white; */
  margin-top: 15vh;
}