/* FootBlaze — Dark-mode token overrides + theme toggle button. */

:root[data-theme="dark"] {
  --ink:          #f3efe5;
  --ink-soft:     #dcd7c8;
  --ink-mute:     #b0a999;
  --ink-faint:    #7a7466;
  --paper:        #13110d;
  --paper-soft:   #1c1a15;
  --paper-warm:   #252118;
  --hairline:     #2d2a23;
  --green:        #6fbf6f;
  --green-soft:   #1c2e1c;
  --orange:       #fb923c;
  --orange-deep:  #f97316;
  --orange-soft:  #3a1f0c;
  --red:          #e85a48;
}

/* Body wrapper — slightly deeper than --paper for layer depth */
:root[data-theme="dark"] body { background: #0a0907; color: var(--ink); }

/* Inputs elevated one step above body bg */
:root[data-theme="dark"] .form-field__input { background: var(--paper-soft); }

/* ─── Theme toggle button ─────────────────────────────────────────── */
.nav-theme-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.nav-theme-btn:hover { background: var(--paper-soft); }

.nav-theme-btn svg {
  position: absolute;
  width: 16px;
  height: 16px;
  transition: opacity 160ms ease;
  pointer-events: none;
}

/* Light mode: moon visible (invites to go dark) */
.nav-theme-btn .theme-btn__sun  { opacity: 0; }
.nav-theme-btn .theme-btn__moon { opacity: 1; }

/* Dark mode: sun visible (invites to go light) */
:root[data-theme="dark"] .nav-theme-btn .theme-btn__sun  { opacity: 1; }
:root[data-theme="dark"] .nav-theme-btn .theme-btn__moon { opacity: 0; }

@media (max-width: 767px) {
  .nav-theme-btn { width: 32px; height: 32px; }
}

/* ─── Hero — pitch background stays dark in both themes ──────── */
/* .hero__title / .hero__arrow use var(--paper) which becomes near-black in dark mode */
:root[data-theme="dark"] .hero__title         { color: #fdfcf8; }
:root[data-theme="dark"] .hero__arrow         { color: #fdfcf8; }
:root[data-theme="dark"] .hero__dot--active   { background: #fdfcf8; }
:root[data-theme="dark"] .pill--outline-light { color: #fdfcf8; }