/* ═══ NLK DARK THEME ═══════════════════════════════════════════════
   html.dark flips the token set to the Dark-Reader-approved palette.
   Light = the default token set already in each page's :root block.
   Load this file AFTER the page's inline <style> on every page.
   (html.dark beats :root by specificity, so order doesn't actually
   matter — this is just for readability.)
   ═════════════════════════════════════════════════════════════════ */

/* ── token override ──
   Palette = Dark Reader's zinc charcoal (neutral gray-black, no blue).
   Hero/nav/footer stay navy as-is — that's what Dark Reader did too. */
html.dark {
  --white: #18181b;   /* page canvas      (was #ffffff → zinc-900) */
  --grey:  #27272a;   /* .card/.step bg   (was #e8edf4 → zinc-800) */
  --grey2: #212124;   /* .row-grey bg     (was #dde4ee → between)  */
  --ink:   #f4f4f5;   /* headings         (was #111827 → zinc-100) */
  --muted: #a1a1aa;   /* body text        (was #5b6776 → zinc-400) */
  --line:  #3f3f46;   /* card borders     (was #c3cdd9 → zinc-700) */
}

/* ── surfaces ── */
html.dark body { background: var(--white); color: var(--ink); }
html.dark h2, html.dark h3 { color: var(--ink); }
/* slight lift on stat/portfolio cards so they read as cards on the charcoal canvas */
html.dark .stat, html.dark .port { background: #1f1f23; }

/* ── primary CTA: cream → solid emerald ──
   Dark Reader turned the cream button into a black void; native dark
   mode makes it a solid emerald CTA matching the nav button. */
html.dark .btn-primary,
html.dark .lc-btn { background: #10b981; color: #04110c; }
html.dark .btn-primary:hover,
html.dark .lc-btn:hover { background: #34d399; }

/* ── theme toggle button (nav) ── */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border-d);
  width: 40px; height: 40px; border-radius: 9px; cursor: pointer;
  color: #c3cfdd; margin-left: 8px; flex: none;
  transition: border-color .15s, color .15s;
}
.theme-btn:hover { border-color: #34d399; color: #34d399; box-shadow: 0 0 14px rgba(52,211,153,.45), 0 0 4px rgba(52,211,153,.35); }
.theme-btn svg { width: 18px; height: 18px; display: block; }
.theme-btn .sun { display: none; }
html.dark .theme-btn .moon { display: none; }
html.dark .theme-btn .sun { display: block; }
.intake-theme-btn { border-color: rgba(148,187,233,.28); color: #c3cfdd; }

/* ── intake form surfaces ── */
html.dark {
  --bg: #18181b;
  --surface: #27272a;
  --border: #3f3f46;
  --ink: #f4f4f5;
  --muted: #a1a1aa;
}
html.dark .intake-theme-btn {
  border-color: rgba(148,187,233,.28);
  color: #c3cfdd;
}
html.dark .mode-switch button.active,
html.dark .palette-opt.sel,
html.dark .logo-drop.drag { background: #064e3b; }
html.dark .ai-note { background: #12352d; color: #d4d4d8; border-color: #10b981; }
html.dark .addrow { background: #12352d; color: #34d399; }
html.dark .addrow small { color: #a7f3d0; }
html.dark .skip-note,
html.dark .warn { background: #3a2d12; color: #d4d4d8; border-color: #b45309; }
/* AI/fill/skip state pills — light-theme pastel chips are blinding on charcoal */
html.dark .secmode.state-ai { background: #450a0a; color: #fecaca; border-color: #dc2626; }
html.dark .secmode.state-fill { background: #172554; color: #bfdbfe; border-color: #3b82f6; }
html.dark .secmode.state-skip { background: #451a03; color: #fde68a; border-color: #d97706; }
html.dark .secmode.state-change { background: #27272a; color: #e2e8f0; border-color: #64748b; }
html.dark .secmode {
  background-color: var(--bg); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus { background: #27272a; }
/* AI-mode dimming (45% opacity) is unreadable on charcoal — raise to 65%,
   and NEVER dim the warning box (it's a safety message) */
html.dark section.card.state-ai .fields > :not(.always-on) { opacity: .65; }
html.dark section.card.state-ai .fields > .warn { opacity: 1; }
/* placeholder text — browser default is near-invisible on dark inputs */
html.dark ::placeholder { color: #a1a1aa; opacity: 1; }
html.dark input::placeholder, html.dark textarea::placeholder, html.dark select::placeholder { color: #a1a1aa; opacity: 1; }
html.dark .logo-plus { background: #1e3a4a; }
html.dark #logo-preview { background: #f4f4f5; }