/* =====================================================
   LIGHT THEME — TOKEN OVERRIDES
===================================================== */
html[data-theme="light"] {
  --bg:        #f5f4ef;
  --text:      #0d0c09;
  --muted:     #666666;
  --mid:       #767676;
  --surface:   rgba(0,0,0,0.04);
  --glass:     rgba(0,0,0,0.06);
  --border:    rgba(0,0,0,0.10);
  --border-hi: rgba(0,0,0,0.22);
  --primary:   #0d0c09;
  --accent:    #444444;
  --p-glow:    rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.14);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.18);
}

/* Body */
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Grain: invert for dark texture on light bg */
html[data-theme="light"] .grain {
  filter: invert(1);
}

/* Letterbox frame (index.html) */
html[data-theme="light"] .letterbox {
  background: var(--bg);
  color: rgba(0,0,0,0.35);
}

/* Corner brackets (index.html) */
html[data-theme="light"] .corner {
  border-color: rgba(0,0,0,0.28);
}

/* Nav — sub-pages (always-visible bar) */
html[data-theme="light"] .nav-wrap {
  background: rgba(245,244,239,0.72);
  border-bottom-color: var(--border);
}

/* Nav — index.html: transparent until scrolled */
html[data-theme="light"] #navWrap:not(.scrolled) {
  background: transparent;
}
html[data-theme="light"] #navWrap.scrolled {
  background: rgba(245,244,239,0.88);
}

/* Nav logo: white mark → invert to dark on cream nav */
html[data-theme="light"] .nav-brand img {
  filter: invert(1) brightness(0.85);
}

/* Brand mark in thanks.html card: same invert */
html[data-theme="light"] .brand-mark img {
  filter: invert(1) brightness(0.85);
}

/* Nav links (hardcoded rgba white in each page) */
html[data-theme="light"] .nav-links a {
  color: rgba(0,0,0,0.52);
}
html[data-theme="light"] .nav-links a:hover {
  color: var(--text);
}
html[data-theme="light"] .nav-links a::after {
  background: var(--primary);
}

/* Buttons — hardcoded hover states */
html[data-theme="light"] .btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.22);
}
html[data-theme="light"] .btn.primary {
  color: #f5f4ef;
}
html[data-theme="light"] .btn.primary:hover {
  background: #2a2a2a;
}

/* Cards */
html[data-theme="light"] .card:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.16);
}

/* Footer links (hardcoded white in sub-pages) */
html[data-theme="light"] .f-links a {
  color: rgba(0,0,0,0.45);
}
html[data-theme="light"] .f-links a:hover {
  color: var(--text);
}

/* Brand mark text (thanks.html) */
html[data-theme="light"] .brand-mark {
  color: rgba(0,0,0,0.45);
}

/* Footer logo (white on dark → invert to dark on cream) */
html[data-theme="light"] .footer-logo {
  filter: invert(1) !important;
}

/* =====================================================
   HOMEPAGE SCENES — fix hardcoded rgba-white elements
   Scenes are cream in light mode (body bg shows through).
   Only override the specific decorative elements that
   used hardcoded rgba(255,255,255,...) values.
===================================================== */

/* Large decorative section numbers (01, 02 …) */
html[data-theme="light"] .scene-bg-num {
  color: rgba(0,0,0,0.055);
}

/* Radial ambient glow behind scene content */
html[data-theme="light"] .scene-glow {
  background: radial-gradient(ellipse 50% 50% at var(--gx,30%) var(--gy,40%), rgba(0,0,0,0.05), transparent 65%);
}

/* Hero divider line */
html[data-theme="light"] .hero-rule {
  background: linear-gradient(90deg, rgba(0,0,0,0.12), transparent);
}

/* Venture logo card + autofocus bracket corners */
html[data-theme="light"] .v-scene-logo {
  background: rgba(0,0,0,0.03);
}
html[data-theme="light"] .v-scene-logo .af {
  border-color: #000;
}

/* About quote left border */
html[data-theme="light"] .about-quote {
  border-left-color: rgba(0,0,0,0.18);
}

/* Contact hollow text stroke */
html[data-theme="light"] .contact-big .hollow {
  -webkit-text-stroke: 1.2px rgba(0,0,0,0.20);
}
html[data-theme="light"] .contact-big:hover .hollow {
  -webkit-text-stroke: 1.2px transparent;
}

/* Contact form focus ring */
html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form select:focus,
html[data-theme="light"] .contact-form textarea:focus {
  border-color: rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.04);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Right-side dot nav */
html[data-theme="light"] .scene-nav .dot-label {
  color: rgba(0,0,0,0.45);
}
html[data-theme="light"] .scene-nav .dot {
  background: rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,0.25);
}
html[data-theme="light"] .scene-nav a.active .dot {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* =====================================================
   THEME TOGGLE BUTTON
===================================================== */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text);
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .22s ease, border-color .22s ease, transform .3s ease;
  margin-left: 8px;
  touch-action: manipulation;
}
@media (hover: none) { .theme-toggle { cursor: pointer; } }

/* Mobile: meet Apple's 44px minimum tap target */
@media (max-width: 640px) {
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
}
.theme-toggle:hover {
  background: var(--glass);
  border-color: var(--accent);
  transform: rotate(22deg);
}
.theme-toggle:focus-visible {
  outline: 1px solid var(--border-hi);
  outline-offset: 3px;
}
.theme-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Dark mode: show moon */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }

/* Light mode: show sun */
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }