/* Light theme + theme switcher. Loads after the dark styles; overrides
   are scoped to :root[data-theme="light"], toggled by enhancements.js. */

.sh-theme-toggle {
  position: fixed;
  top: 22px;
  right: 78px;
  z-index: 1300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-bg-soft);
  border: 1px solid var(--ink-line);
  color: var(--ink-text);
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}
.sh-theme-toggle:hover { transform: scale(1.08); }
.sh-theme-toggle svg { width: 19px; height: 19px; display: block; }
.sh-theme-toggle .sh-tt-moon { display: none; }
:root[data-theme="light"] .sh-theme-toggle .sh-tt-sun { display: none; }
:root[data-theme="light"] .sh-theme-toggle .sh-tt-moon { display: block; }
@media (min-width: 768px) {
  .sh-theme-toggle { top: 25px; right: 40px; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink-bg: #f2f1ec;
  --ink-bg-soft: #e7e6df;
  --ink-text: #101114;
  --ink-muted: #5f6168;
  --ink-line: rgba(16, 17, 20, 0.16);
}
/* the ground lives on html so the fixed z-index:-1 canvas paints above it;
   an opaque body background would cover the canvas entirely */
:root[data-theme="light"] {
  background:
    radial-gradient(900px 520px at 75% -80px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    #f2f1ec;
}
:root[data-theme="light"] body { background: transparent; }

/* sections that re-pin dark tokens get the light set instead */
:root[data-theme="light"] .resume-section,
:root[data-theme="light"] .sh-quote-band,
:root[data-theme="light"] .footer-section {
  --ink-bg: #f2f1ec;
  --ink-bg-soft: rgba(16, 17, 20, 0.05);
  --ink-text: #101114;
  --ink-muted: #5f6168;
  --ink-line: rgba(16, 17, 20, 0.16);
}

/* hard-coded dark surfaces */
:root[data-theme="light"] .sh-chip { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .sh-panel { background: rgba(244, 243, 238, 0.85); }
@media (min-width: 768px) {
  :root[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(16, 17, 20, 0.1);
  }
  :root[data-theme="light"] .navbar.is-stuck {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(16, 17, 20, 0.12);
    box-shadow: 0 14px 34px rgba(16, 17, 20, 0.12);
  }
}
:root[data-theme="light"] .sh-teaser { background: rgba(16, 17, 20, 0.035); }
:root[data-theme="light"] .sh-teaser:hover {
  background: rgba(16, 17, 20, 0.06);
  border-color: rgba(16, 17, 20, 0.3);
}
:root[data-theme="light"] .sh-shot,
:root[data-theme="light"] .sh-media-slot { background: rgba(16, 17, 20, 0.05); }

/* white monochrome brand logos become dark; icons keep native strokes */
:root[data-theme="light"] .company-logo { filter: invert(1) opacity(0.82); }
:root[data-theme="light"] .footer-section .social-link img,
:root[data-theme="light"] .resume-section .arrow-right { filter: none; }

/* softer shadows for the cutouts on a light ground */
:root[data-theme="light"] .sh-hero-cutout img,
:root[data-theme="light"] .sh-about-cutout img {
  filter: none;
}

/* dead Webflow chrome must not swallow clicks on the toggle */
.navigation-right { pointer-events: none; }

:root[data-theme="light"] .sh-about-cutout::before { display: none; }

:root[data-theme="light"] .sh-burger {
  background: rgba(244, 243, 238, 0.7);
}
:root[data-theme="light"] .sh-burger:hover { background: #e7e6df; }


:root[data-theme="light"] .sh-hl { background: rgba(16, 17, 20, 0.035); }