/* theme-light-forest.css — Light theme with forest green accents
 * Load after style.css:
 * <link rel="stylesheet" href="./assets/css/theme-light-forest.css">
 */

:root {
  /* gradients */
  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(140, 10%, 98%) 3%,
    hsl(140, 8%, 94%) 97%
  );

  --bg-gradient-jet: linear-gradient(
    to bottom right,
    hsla(140, 12%, 88%, 0.4) 0%,
    hsla(140, 10%, 96%, 0) 100%
  ), hsl(0, 0%, 100%);

  --bg-gradient-yellow-1: linear-gradient(
    to bottom right,
    hsl(140, 35%, 38%) 0%,
    hsla(140, 30%, 45%, 0) 50%
  );

  --bg-gradient-yellow-2: linear-gradient(
    135deg,
    hsla(140, 35%, 38%, 0.15) 0%,
    hsla(140, 28%, 48%, 0) 59.86%
  ), hsl(140, 20%, 97%);

  --border-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(140, 12%, 82%) 0%,
    hsla(140, 12%, 82%, 0) 50%
  );

  --text-gradient-yellow: linear-gradient(
    to right,
    hsl(140, 38%, 32%),
    hsl(140, 28%, 42%)
  );

  /* solids — semantic remap for light mode */
  --jet: hsl(140, 10%, 85%);
  --onyx: hsl(140, 12%, 92%);
  --eerie-black-1: hsl(0, 0%, 100%);
  --eerie-black-2: hsl(140, 10%, 98%);
  --smoky-black: hsl(140, 12%, 96%);

  --white-1: hsl(150, 20%, 15%);
  --white-2: hsl(150, 15%, 22%);

  --orange-yellow-crayola: hsl(140, 38%, 32%);
  --vegas-gold: hsl(140, 28%, 42%);

  --light-gray: hsl(150, 8%, 45%);
  --light-gray-70: hsla(150, 8%, 45%, 0.7);
  --bittersweet-shimmer: hsl(0, 43%, 51%);

  /* shadows */
  --shadow-1: -4px 8px 24px hsla(140, 20%, 20%, 0.08);
  --shadow-2: 0 16px 30px hsla(140, 20%, 20%, 0.10);
  --shadow-3: 0 16px 40px hsla(140, 20%, 20%, 0.12);
  --shadow-4: 0 25px 50px hsla(140, 20%, 20%, 0.08);
  --shadow-5: 0 24px 80px hsla(140, 20%, 20%, 0.10);
}

/* hardcoded overrides from original dark theme */
.navbar {
  background: hsla(0, 0%, 100%, 0.85);
  backdrop-filter: blur(10px);
}

.overlay {
  background: hsl(150, 15%, 18%);
}

.project-item > a:hover .project-img::before {
  background: hsla(140, 38%, 20%, 0.45);
}

/* job title badges — forest green pill */
.info-content .title {
  background: hsl(140, 38%, 32%);
  color: hsl(0, 0%, 100%);
}

/* focus ring */
:focus {
  outline-color: hsl(140, 38%, 32%);
}

/* desktop scrollbar */
@media (min-width: 1024px) {
  :root {
    --shadow-1: -4px 8px 24px hsla(140, 20%, 20%, 0.06);
    --shadow-2: 0 16px 30px hsla(140, 20%, 20%, 0.08);
    --shadow-3: 0 16px 40px hsla(140, 20%, 20%, 0.10);
  }

  body::-webkit-scrollbar-thumb {
    background: hsla(140, 38%, 32%, 0.25);
    box-shadow: inset 1px 1px 0 hsla(140, 38%, 32%, 0.1),
                inset -1px -1px 0 hsla(140, 38%, 32%, 0.1);
  }

  body::-webkit-scrollbar-thumb:hover {
    background: hsla(140, 38%, 32%, 0.4);
  }
}