/* Theme toggle button (added by site.js) */
.theme-toggle {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #334155; background: transparent; color: #E2E8F0;
  font-size: 16px; line-height: 1; cursor: pointer; margin-right: 8px;
}
.theme-toggle:hover { border-color: #94A3B8; color: #fff; }
.theme-toggle--floating { position: fixed; left: 16px; bottom: 16px; z-index: 60; background: #0B1120; margin: 0; }

/* ---------- Dark mode ---------- */
html.dark { color-scheme: dark; }
html.dark body { background: #070B14; color: #CBD5E1; }

/* Tailwind pages: light surfaces -> dark surfaces */
html.dark .bg-white, html.dark .bg-white\/80 { background-color: #111A2E; }
html.dark .bg-creamStone { background-color: #0B1120; }
html.dark .bg-lavenderStone { background-color: #120F24; }
html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #17213A; }
html.dark .bg-indigoSoft, html.dark .bg-indigoSoft\/70 { background-color: #231A3F; }
html.dark .bg-teal-50, html.dark .bg-teal-50\/70, html.dark .bg-teal-100, html.dark .bg-emerald-50 { background-color: #0E2A2A; }
html.dark .bg-amber-50, html.dark .bg-amber-50\/80, html.dark .bg-amber-50\/90 { background-color: #2A1F0E; }
html.dark .bg-rose-50 { background-color: #2A1218; }

/* Text */
html.dark .text-obsidian, html.dark .text-slate-900, html.dark .text-slate-800 { color: #F1F5F9; }
html.dark .text-slate-700 { color: #CBD5E1; }
html.dark .text-slate-600, html.dark .text-slate-500 { color: #94A3B8; }
html.dark .text-indigoRoyal { color: #B7A3F0; }
html.dark .text-tealEmerald, html.dark .text-emerald-800 { color: #2DD4BF; }
html.dark .text-amberGold, html.dark .text-amber-800 { color: #FBBF24; }
html.dark .text-rose-800, html.dark .text-rose-700 { color: #FDA4AF; }

/* Borders */
html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #263248; }
html.dark .border-teal-200, html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: #134E4A; }
html.dark .border-amber-200, html.dark .border-rose-200 { border-color: #4A3410; }

/* Form fields */
html.dark input, html.dark select, html.dark textarea { background-color: #0B1120; color: #F1F5F9; border-color: #334155; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748B; }

/* Custom-CSS pages (About, Projects, Case Study): swap their colour variables */
html.dark:root {
  --cream: #0B1120; --ivory: #0B1120; --sand: #111A2E; --sage: #0E2A2A; --white: #111A2E;
  --ink: #F1F5F9; --muted: #94A3B8; --line: #263248;
}
html.dark .btn-dark { color: #0B1120; } /* its background is var(--ink), which turns light */

/* About page: sections with hard-coded light colours (paper-style illustrations are left light on purpose) */
html.dark .bridge { background: #0B1120; }
html.dark .profile-section { background: #0E1A1F; }
html.dark .bridge p, html.dark .story-copy p, html.dark .profile-copy p, html.dark .pub p,
html.dark .mentor-strip span, html.dark .research-note, html.dark .modal-box p, html.dark .modal-close,
html.dark .switcher button { color: #94A3B8; }
html.dark .story-copy strong { color: #F1F5F9; }
html.dark .bridge .pull, html.dark .story-copy .highlight, html.dark .profile-copy .bottomline, html.dark .pub a { color: #5EEAD4; }
html.dark .switcher { background: #17213A; }
html.dark .pub, html.dark .modal-box, html.dark .dropdown-menu, html.dark .drop-list { background: #111A2E; }
html.dark .dropdown-menu a, html.dark .drop-list a { color: #E2E8F0 !important; }
html.dark .dropdown-menu a:hover, html.dark .drop-list a:hover { background: #17213A; }

/* Projects + Case Study pages */
html.dark .filter-shell, html.dark .detail-hero { background: #0B1120; }
html.dark .hero-marquee { background: radial-gradient(circle at 30% 50%, #0E2A2A 0%, #0B1120 70%); }
html.dark .entry:hover, html.dark .detail-aside { background: #111A2E; }
html.dark .entry-title { color: #F1F5F9; }
html.dark .entry-title:hover { color: #2DD4BF; }
html.dark .entry-hook, html.dark .filter-btn, html.dark .hero-copy .desc, html.dark .detail-section p { color: #94A3B8; }
html.dark .authorline b, html.dark .detail-meta strong { color: #CBD5E1; }
html.dark .avatar { background: #17213A; color: #2DD4BF; }
html.dark .status { background: #2A1F0E; }

@media (max-width: 400px) { .theme-toggle { width: 30px; height: 30px; margin-right: 4px; } }