/* ── Theme tokens ───────────────────────────────────────────────────────────
   Adds --surface-card to :root and overrides CSS variables for dark mode.
   Permanently-dark sections (footer, heroes, chapter-strip, waitlist, etc.)
   use hardcoded values in styles.css and are intentionally excluded here.
   ─────────────────────────────────────────────────────────────────────────── */

/* Light mode: surface-card is white (cards, floating boxes) */
:root {
  --surface-card: #FFFFFF;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --bg-primary:    #1C1A18;
  --bg-secondary:  #252220;
  --text-heading:  #EDE8E0;
  --text-body:     #C8C0B8;
  --text-meta:     #8A8480;
  --accent-sage:   #6B9A7E;
  --divider:       rgba(255,255,255,0.09);
  --dark-surface:  rgba(255,255,255,0.04);
  --dark-border:   rgba(255,255,255,0.08);
  --surface-card:  #252220;

  /* On-dark tokens in dark mode: the ink surface blends closer to the page bg,
     so we dim slightly to preserve a natural feel without over-contrast. */
  --on-dark-primary:   rgba(250, 248, 242, 0.88);
  --on-dark-secondary: rgba(250, 248, 242, 0.63);
  --on-dark-muted:     rgba(250, 248, 242, 0.38);
  --on-dark-faint:     rgba(250, 248, 242, 0.20);
  --on-dark-border:    rgba(250, 248, 242, 0.07);
}

/* Suppress transitions on initial load (prevent animated flash for first-time
   dark-OS visitors). The .no-transition class is removed by theme.js after
   the first frame so all subsequent toggles animate normally. */
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
}

/* Smooth colour transition on manual theme toggle */
*,
*::before,
*::after {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

/* ── Theme toggle button ────────────────────────────────────────────────────
   Sits in .site-nav before .nav-hamburger.
   Nav is always dark-coloured so icon colour is always light.
   ─────────────────────────────────────────────────────────────────────────── */

.theme-toggle {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 6px 12px;
  color: rgba(250,250,248,0.9);
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Fixed width prevents layout shift when icon swaps between ☾ and ☀ */
  min-width: 52px;
}

/* Icon character locked to a fixed cell so ☾ and ☀ never differ in width */
.theme-icon {
  display: inline-block;
  width: 1.25rem;
  text-align: center;
  line-height: 1;
  font-style: normal;
}

.theme-toggle:hover {
  color: #FAFAF8;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}

.theme-toggle:focus-visible {
  outline: 2px solid #923851;
  outline-offset: 2px;
}

/* On mobile screens (≤ 768px), hide theme switcher and enforce dark theme at all times */
@media (max-width: 768px) {
  .theme-toggle {
    display: none !important;
  }

  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --bg-primary:    #1C1A18 !important;
    --bg-secondary:  #252220 !important;
    --text-heading:  #EDE8E0 !important;
    --text-body:     #C8C0B8 !important;
    --text-meta:     #8A8480 !important;
    --accent-sage:   #6B9A7E !important;
    --divider:       rgba(255,255,255,0.09) !important;
    --dark-surface:  rgba(255,255,255,0.04) !important;
    --dark-border:   rgba(255,255,255,0.08) !important;
    --surface-card:  #252220 !important;

    --on-dark-primary:   rgba(250, 248, 242, 0.88) !important;
    --on-dark-secondary: rgba(250, 248, 242, 0.63) !important;
    --on-dark-muted:     rgba(250, 248, 242, 0.38) !important;
    --on-dark-faint:     rgba(250, 248, 242, 0.20) !important;
    --on-dark-border:    rgba(250, 248, 242, 0.07) !important;
  }

  body {
    background-color: #1C1A18 !important;
    color: #C8C0B8 !important;
  }
}
/* --- View Transitions (Circular Reveal) --- */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Ensure the new state is always on top for the growth animation */
::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}

/* ── Universal Input Dark Font Color Fix ────────────────────────────────────
   Ensures text typed into text boxes is ALWAYS crisp dark font (#1C1A18)
   on a white background across light mode, dark mode, and iOS/Android mobile.
   ─────────────────────────────────────────────────────────────────────────── */
input,
textarea,
select,
.waitlist-input,
.wl-input,
.form-group input,
.form-group textarea,
.form-group select {
  background-color: #FFFFFF !important;
  color: #1C1A18 !important;
  -webkit-text-fill-color: #1C1A18 !important;
  caret-color: #1C1A18 !important;
}

input::placeholder,
textarea::placeholder,
select::placeholder,
.waitlist-input::placeholder,
.wl-input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #666666 !important;
  -webkit-text-fill-color: #666666 !important;
  opacity: 1 !important;
}

/* Chrome / Safari / iOS Mobile Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
  -webkit-text-fill-color: #1C1A18 !important;
  caret-color: #1C1A18 !important;
}