/*-----------------------------------*\
  #theme.css
  Light theme overrides
\*-----------------------------------*/

[data-theme="light"] {
  /* Background gradients */
  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(0, 0%, 98%) 3%,
    hsl(0, 0%, 94%) 97%
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right,
    hsl(0, 0%, 98%) 0%,
    hsl(0, 0%, 96%) 100%
  );
  --border-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(0, 0%, 85%) 0%,
    hsla(0, 0%, 85%, 0) 50%
  );

  /* Solid colors */
  --jet: hsl(0, 0%, 85%);
  --onyx: hsl(0, 0%, 90%);
  --eerie-black-1: hsl(0, 0%, 97%);
  --eerie-black-2: hsl(0, 0%, 99%);
  --smoky-black: hsl(0, 0%, 100%);
  --white-1: hsl(0, 0%, 25%);
  --white-2: hsl(0, 0%, 15%);
  --light-gray: hsl(0, 0%, 55%);
  --light-gray-70: hsla(0, 0%, 55%, 0.7);

/* Navbar overrides */
}

[data-theme="light"] .navbar {
  background: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: blur(10px);
  border-color: var(--jet);
}

[data-theme="light"] .navbar-link {
  color: var(--white-1);
}

[data-theme="light"] .navbar-link:hover,
[data-theme="light"] .navbar-link:focus {
  color: var(--white-2);
}

/* Improve icon visibility */
[data-theme="light"] .icon-box {
  color: var(--vegas-gold);
}

[data-theme="light"] .icon-box::before {
  background: hsl(0, 0%, 90%);
}

/* Theme toggle icon size & color */
#theme-toggle-icon {
  font-size: 20px;
}

[data-theme="light"] #theme-toggle-icon {
  color: var(--vegas-gold);
}

/* Additional light theme improvements */
[data-theme="light"] .sidebar {
  border-color: var(--jet);
  box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.1);
}

[data-theme="light"] article {
  border-color: var(--jet);
  box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.1);
}

[data-theme="light"] .navbar {
  box-shadow: 0 2px 15px hsla(0, 0%, 0%, 0.1);
}

/* Better text contrast in light mode */
[data-theme="light"] .info-content .name,
[data-theme="light"] .hero-title,
[data-theme="light"] .section-title {
  color: var(--white-2);
}

[data-theme="light"] .info-content .title {
  background: var(--bg-gradient-onyx);
  color: var(--white-1);
  border: 1px solid var(--jet);
}