/* Light Mode Styles for Blog Pages */

[data-theme="light"] {
  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(0, 0%, 96%) 3%,
    hsl(0, 0%, 92%) 97%
  );
  --smoky-black: hsl(0, 0%, 98%);
  --white-1: hsl(0, 0%, 10%);
  --white-2: hsl(0, 0%, 20%);
  --light-gray: hsl(0, 0%, 35%);
  --light-gray-70: hsla(0, 0%, 35%, 0.7);
}

[data-theme="light"] body {
  background: hsl(0, 0%, 98%);
  color: hsl(0, 0%, 20%);
}

[data-theme="light"] article {
  background: hsl(0, 0%, 94%);
  color: hsl(0, 0%, 20%);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 {
  color: hsl(0, 0%, 15%);
}

[data-theme="light"] ul,
[data-theme="light"] ol,
[data-theme="light"] p {
  color: hsl(0, 0%, 30%);
}

[data-theme="light"] a {
  color: hsl(220, 90%, 55%);
}

[data-theme="light"] a:visited {
  color: hsl(220, 90%, 50%);
}

[data-theme="light"] a:hover {
  color: hsl(220, 90%, 40%);
}

[data-theme="light"] ::selection {
  background: hsl(220, 90%, 55%);
  color: hsl(0, 0%, 100%);
}

[data-theme="light"] .navbar {
  background: hsla(0, 0%, 85%, 0.95);
  border-color: hsl(0, 0%, 70%);
}

[data-theme="light"] .navbar-link {
  color: hsl(0, 0%, 40%);
  background: transparent;
}

[data-theme="light"] .navbar-link:hover {
  color: hsl(0, 0%, 25%);
}

[data-theme="light"] .theme-toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: hsl(0, 0%, 85%);
  color: hsl(0, 0%, 40%);
  border: 1px solid hsl(0, 0%, 70%);
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  z-index: 1000;
  transition: all 0.25s ease;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: hsl(0, 0%, 80%);
  color: hsl(220, 90%, 55%);
}

.theme-toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: hsla(240, 1%, 17%, 0.95);
  color: hsl(0, 0%, 84%);
  border: 1px solid hsl(0, 0%, 22%);
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  z-index: 1000;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.theme-toggle-btn:hover {
  background: hsla(240, 1%, 25%, 0.98);
  color: hsl(45, 100%, 72%);
}

.theme-toggle-btn span {
  font-size: 14px;
  font-weight: 500;
}