/* NightShift AI: light and dark themes. Loaded last on every marketing page so
   it can retune the tokens each page uses.

   A small inline script in each page's <head> sets <html data-theme> before
   the first paint: the visitor's saved choice from the sun/moon toggle, or
   else their device setting (prefers-color-scheme). Dark is the fallback.

   --tint is the RGB triplet for faint overlays and hairlines, used as
   rgba(var(--tint), .06). --accent-ink is accent-coloured text. */

:root {
  color-scheme: dark;
  --tint: 255,255,255;
  --accent-ink: #8cb8ff;
  --nav-bg: #06080f;
  --shadow: 0 18px 48px rgba(0,0,0,.45);
}

:root[data-theme="light"] {
  color-scheme: light;
  --tint: 12,20,38;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface2: #f0f2f7;
  --surface3: #e6eaf2;
  --border: rgba(12,20,38,.10);
  --border2: rgba(12,20,38,.16);
  --text: #0c1426;
  --text2: rgba(12,20,38,.74);
  --text3: rgba(12,20,38,.60);
  --accent: #2563eb;
  --accent2: #0b8457;
  --accent3: #d4501c;
  --accent-ink: #1d4fc4;
  --accent-err: #c62828;
  --accent-warn: #b45309;
  --glow: rgba(37,99,235,.10);
  --glow2: rgba(11,132,87,.08);
  --red: #c62828;
  --nav-bg: #ffffff;
  --shadow: 0 18px 48px rgba(12,20,38,.14);
}

/* Solid header on every layout (shared nav, intake, MSA). */
[data-theme="light"] .nav-inner, [data-theme="light"] .nav-bar, [data-theme="light"] body > .nav { background: var(--nav-bg) !important; }

/* Native audio players follow the theme. */
[data-theme="light"] .audio-item audio { color-scheme: light; }

/* Text on solid accent buttons is white on the deeper light-theme blue. */
[data-theme="light"] :is(.nav-cta, .btn-primary, .btn-primary-sm, .cta-filled, .btn-plan.btn-solid, .btn-submit) { color: #fff; }

[data-theme="light"] img[src*="logo-"] { box-shadow: 0 0 0 1px var(--border); }

/* Product mock-ups (dark dashboard windows) stay dark in both themes. */
.keep-dark {
  color-scheme: dark;
  --tint: 255,255,255;
  --text: #f0f4ff;
  --text2: rgba(240,244,255,.65);
  --text3: rgba(240,244,255,.48);
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.13);
  --accent: #4f8cff;
  --accent2: #38e8a0;
  --accent-ink: #8cb8ff;
}

/* Sun/moon toggle in the header (nav.js). Shows the theme you'd switch to. */
.theme-toggle {
  width: 36px; height: 36px; flex-shrink: 0; display: inline-grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--border2); background: rgba(var(--tint),.04);
  color: var(--text2); cursor: pointer; transition: color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); background: rgba(var(--tint),.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-moon, [data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }
.mobile-menu .mobile-theme, .mobile-trigger, .theme-toggle { -webkit-tap-highlight-color: transparent; }
.mobile-menu .mobile-theme {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 14px 24px;
  font: inherit; font-size: 15px; color: var(--text2); text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.mobile-theme svg { width: 16px; height: 16px; }
.mobile-theme .i-moon, [data-theme="light"] .mobile-theme .i-sun { display: none; }
[data-theme="light"] .mobile-theme .i-moon { display: block; }
/* The header toggle needs room; on the smallest phones it lives in the menu. */
@media (max-width: 420px) { .nav-right .theme-toggle { display: none; } }
@media (min-width: 861px) { .mobile-theme { display: none !important; } }