/* === Link Styling with Theme Awareness === */
a {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

a:hover,
a:focus-visible {
  color: var(--highlight-color);
  text-decoration: underline;
  outline: none;
}

/* === Button Styling === */
button {
  color: var(--text-color);
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover,
button:focus-visible {
  background-color: var(--button-bg);
  color: var(--button-color);
  outline: none;
}

/* === Navigation Bar Theme Transitions === */
header nav {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* === Card Component Theming === */
.card {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}