/* ==========================================================================
   Light mode (html[data-theme="light"]). Same layout and type; the ground is
   PXPL white and the "paper" interludes turn black, so the page keeps its
   light/dark rhythm. Green stays the brand's neon for the X and fills; text in
   green uses a deeper green that reads on white.
   ========================================================================== */

:root {
  --accent-text: var(--pixel);
  --mark: var(--pixel);
  --header-glass: rgb(0 0 0 / 0.72);
  --underline: #00d400;
  --tag-bg: #1c1c1c;
  --tag-fg: #a6a6a6;
}
.theme-paper {
  --accent-text: var(--pixel-ink);
  --tag-bg: #e2e2e2;
  --tag-fg: #555;
}

html[data-theme='light'] {
  color-scheme: light;
  --ink: #f2f2f2;
  --fg: #0a0a0a;
  --fg-muted: #5c5c5c;
  --fg-faint: #9a9a9a;
  --line: rgb(0 0 0 / 0.16);
  --surface: #e4e4e4;
  --accent-text: var(--pixel-ink);
  --mark: #00d400;
  --header-glass: rgb(242 242 242 / 0.8);
  --tag-bg: #e2e2e2;
  --tag-fg: #555;
}
html[data-theme='light'] .theme-paper {
  color-scheme: dark;
  --ink: #000;
  --fg: #f2f2f2;
  --fg-muted: #8c8c8c;
  --fg-faint: #5c5c5c;
  --line: rgb(242 242 242 / 0.16);
  --surface: #121212;
  --accent-text: var(--pixel);
  --mark: var(--pixel);
  --tag-bg: #1c1c1c;
  --tag-fg: #a6a6a6;
}

/* Green text uses the readable accent for the current ground */
.ContactBlock-module__FViTyW__copy[data-copied],
a.Home-module__rCrioW__cardLink:hover .Home-module__rCrioW__cardTitle,
.Home-module__rCrioW__soon,
.Home-module__rCrioW__methodNum,
.about-module__-i9KWa__phaseNum,
.contact-module__xwJ-uq__email:hover,
.contact-module__xwJ-uq__copy[data-copied],
.CaseStudy-module__1fqkDa__nextLink:hover .CaseStudy-module__1fqkDa__nextName,
.Journal-module__AgLGVW__card:hover .Journal-module__AgLGVW__title,
.ProjectCard-module__MnOYna__card:hover .ProjectCard-module__MnOYna__name,
.ProjectCard-module__MnOYna__soon,
.inline-link:hover {
  color: var(--accent-text);
}
.ContactBlock-module__FViTyW__copy[data-copied],
.contact-module__xwJ-uq__copy[data-copied] {
  box-shadow: inset 0 0 0 1px var(--accent-text);
}

/* The X marks */
.Home-module__rCrioW__x,
.Home-module__rCrioW__marqueeX,
.about-module__-i9KWa__mark,
.nf-mark {
  color: var(--mark);
}

/* Header glass when scrolled */
.Header-module__Af2_WG__header[data-scrolled] {
  background: var(--header-glass);
}
html[data-theme='light'][data-menu-open] .Header-module__Af2_WG__header {
  background: transparent;
}

/* Focus rings that read on each ground */
html[data-theme='light'] :focus-visible {
  outline-color: var(--pixel-ink);
}
html[data-theme='light'] .theme-paper :focus-visible {
  outline-color: var(--pixel);
}
html[data-theme='light'] .ContactForm-module__1SvrgG__field input:focus,
html[data-theme='light'] .ContactForm-module__1SvrgG__field textarea:focus {
  border-bottom-color: var(--pixel-ink);
}
html[data-theme='light'] .ContactForm-module__1SvrgG__chip input:focus-visible + span {
  outline-color: var(--pixel-ink);
}

/* Over the showreel tiles and in the video dialog the ground is always dark */
html[data-theme='light'] .Home-module__rCrioW__reelLabel .label,
html[data-theme='light'] .reel-dialog {
  color: #f2f2f2;
}
html[data-theme='light'] .Home-module__rCrioW__tile img {
  filter: grayscale(1) brightness(0.9) contrast(0.9);
}

/* Logos: white on dark grounds, black on light grounds */
.logo-for-light {
  display: none !important;
}
html[data-theme='light'] .logo-for-dark {
  display: none !important;
}
html[data-theme='light'] .logo-for-light {
  display: block !important;
}

/* ---------- Light / dark switch in the header (Settings → Appearance → Visitors choose) ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch__track {
  position: relative;
  display: block;
  width: 48px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.25s;
}
.theme-switch:hover .theme-switch__track {
  border-color: var(--accent-text);
}
.theme-switch:focus-visible {
  outline: none;
}
.theme-switch:focus-visible .theme-switch__track {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
.theme-switch__icon {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  color: var(--fg-faint);
  transition: color 0.25s;
}
.theme-switch:hover .theme-switch__icon {
  color: var(--fg-muted);
}
.theme-switch__icon--sun {
  left: 6px;
}
.theme-switch__icon--moon {
  right: 6px;
}
.theme-switch__icon svg,
.theme-switch__thumb svg {
  display: block;
}
.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--ink);
  transform: translateX(22px);
  transition:
    transform 0.4s var(--ease-out),
    background-color 0.35s,
    color 0.35s;
}
.theme-switch__thumb svg {
  grid-area: 1 / 1;
  width: 11px;
  height: 11px;
}
.theme-switch__thumb .ico-sun,
html[data-theme='light'] .theme-switch__thumb .ico-moon {
  display: none;
}
html[data-theme='light'] .theme-switch__thumb .ico-sun {
  display: block;
}
html[data-theme='light'] .theme-switch__thumb {
  transform: translateX(0);
}
.Header-module__Af2_WG__bar .theme-switch {
  margin-left: auto;
  margin-right: clamp(18px, 2.6vw, 44px);
}
@media (min-width: 760px) {
  .Header-module__Af2_WG__bar .theme-switch {
    order: 3;
    margin-left: clamp(22px, 2.8vw, 48px);
    margin-right: 0;
  }
  .Header-module__Af2_WG__bar .Header-module__Af2_WG__nav {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch__thumb {
    transition: none;
  }
}

/* Smooth hand-over when someone flips the switch */
html.theme-anim,
html.theme-anim * {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease !important;
}