/* Dark theme — overrides the light palette in styles.css / site.css / admin.css. */
/* Theme switch: sliding pill (sun -> moon) */
.theme-toggle {
  --tt-w: 58px; --tt-h: 30px; --tt-k: 24px;
  position: relative; flex: none; width: var(--tt-w); height: var(--tt-h); padding: 0; border: 0; border-radius: 999px;
  cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, #8fd3ff 0%, #5aa9ff 100%);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .25), 0 1px 2px rgba(15, 23, 42, .08);
  transition: background .45s ease, box-shadow .3s ease;
}
.theme-toggle:hover { box-shadow: inset 0 1px 3px rgba(15, 23, 42, .25), 0 0 0 4px rgba(90, 169, 255, .18); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.tt-knob {
  position: absolute; top: calc((var(--tt-h) - var(--tt-k)) / 2); left: 3px; width: var(--tt-k); height: var(--tt-k);
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff7cc, #ffd54a 60%, #f5b300);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 0 12px rgba(255, 213, 74, .55);
  transition: transform .45s cubic-bezier(.68, -0.3, .32, 1.3), background .45s ease, box-shadow .45s ease;
}
.tt-knob svg { position: absolute; width: 15px; height: 15px; transition: opacity .3s ease, transform .45s ease; }
.tt-sun { fill: #fff3b0; stroke: #e39b00; stroke-width: 1.6; stroke-linecap: round; }
.tt-sun g path { stroke: #e39b00; }
.tt-moon { fill: #eef2ff; opacity: 0; transform: rotate(-60deg) scale(.6); }
.tt-stars i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0;
  transition: opacity .4s ease .1s, transform .45s ease;
}
.tt-stars i:nth-child(1) { top: 8px; left: 12px; transform: translateY(6px); }
.tt-stars i:nth-child(2) { top: 17px; left: 20px; width: 2px; height: 2px; transform: translateY(6px); }
.tt-stars i:nth-child(3) { top: 6px; left: 25px; width: 2px; height: 2px; transform: translateY(6px); }

[data-theme="dark"] .theme-toggle { background: linear-gradient(135deg, #1e2a5a 0%, #0d1433 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 1px #2a3766; }
[data-theme="dark"] .theme-toggle:hover { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 1px #2a3766, 0 0 0 5px rgba(122, 162, 255, .15); }
[data-theme="dark"] .tt-knob {
  transform: translateX(calc(var(--tt-w) - var(--tt-k) - 6px)) rotate(360deg);
  background: radial-gradient(circle at 35% 30%, #f4f6ff, #c9d2ee 65%, #a9b4d6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 0 12px rgba(201, 210, 238, .35);
}
[data-theme="dark"] .tt-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="dark"] .tt-moon { opacity: 1; transform: none; fill: #6b78a8; }
[data-theme="dark"] .tt-stars i { opacity: .9; transform: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .tt-knob, .tt-knob svg, .tt-stars i { transition: none; } }
.site-header .header-inner > .theme-toggle { margin-left: auto; margin-right: 12px; }

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120;
  --surface: #121a2b;
  --surface-2: #172135;
  --border: #243049;
  --border-strong: #33415e;
  --text: #e6ebf4;
  --text-2: #c3cddd;
  --muted: #8d9ab0;
  --primary: #5b8cff;
  --primary-hover: #7aa2ff;
  --primary-soft: rgba(91, 140, 255, .14);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, .12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, .12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
}

/* page backgrounds & headers */
[data-theme="dark"] .auth-page,
[data-theme="dark"] .lp-hero,
[data-theme="dark"] #screen-setup { background: linear-gradient(180deg, #111a33 0%, #0b1120 60%); }
[data-theme="dark"] .lp-show,
[data-theme="dark"] .lp-foot { background: var(--bg); }
[data-theme="dark"] .lp-sec.alt { background: var(--surface); }
[data-theme="dark"] .auth-page > .site-header,
[data-theme="dark"] .lp-nav,
[data-theme="dark"] #screen-setup > .site-header { background: rgba(11, 17, 32, .85); }
[data-theme="dark"] .site-header { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .lead { background: rgba(11, 17, 32, .55); }

/* company-logo wall: keep logos readable but quiet */
/* (tiles stay light so dark logos like Apple/Uber remain visible; the wall is just dimmed) */
[data-theme="dark"] .logo-wall { opacity: .22; }
[data-theme="dark"] .logo-tile { box-shadow: none; border-color: transparent; }

/* landing slideshow frame */
[data-theme="dark"] .browser { background: var(--surface); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
[data-theme="dark"] .browser-bar { background: var(--surface-2); }
[data-theme="dark"] .browser-bar span { background: var(--bg); }
[data-theme="dark"] .slide-nav { background: rgba(18, 26, 43, .92); }

/* controls */
[data-theme="dark"] .segmented,
[data-theme="dark"] .pill-neutral { background: var(--surface-2); }
[data-theme="dark"] .meter,
[data-theme="dark"] .bar { background: #222d44; }
[data-theme="dark"] .ring .track { stroke: #222d44; }
[data-theme="dark"] .btn-google { background: var(--surface-2); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: var(--text); }
[data-theme="dark"] .input { background-color: var(--surface-2); border-color: var(--border-strong); }
[data-theme="dark"] .input::placeholder { color: #66748c; }
[data-theme="dark"] .credit { background: rgba(18, 26, 43, .88); }

/* banners */
[data-theme="dark"] .ai-banner.warn,
[data-theme="dark"] .basic-note { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .3); color: #fcd34d; }
[data-theme="dark"] .ai-banner.error { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); color: #fca5a5; }
[data-theme="dark"] .ai-banner.ok { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .3); color: #6ee7b7; }

/* admin */
[data-theme="dark"] .thumb,
[data-theme="dark"] .d-photo { background: var(--surface-2); }

@media print { [data-theme="dark"] { color-scheme: light; } }