:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f !important;
  --surface: rgba(15, 23, 42, 0.9) !important;
  --paper: rgba(15, 23, 42, 0.92) !important;
  --soft: rgba(30, 41, 59, 0.88) !important;
  --ink: #e5edf7 !important;
  --muted: #9fb0c5 !important;
  --line: rgba(148, 163, 184, 0.3) !important;
  --brand: #f8fafc !important;
  --accent: rgba(6, 78, 59, 0.34) !important;
  --accent-ink: #7dd3ae !important;
  --ok: #34d399 !important;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .inn-gradient {
  background:
    radial-gradient(circle at 18% 8%, rgba(16, 185, 129, 0.12), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.1), transparent 28%),
    #07111f !important;
  color: #e5edf7 !important;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-slate-100,
:root[data-theme="dark"] .bg-slate-200,
:root[data-theme="dark"] .bg-slate-300,
:root[data-theme="dark"] .glass,
:root[data-theme="dark"] .mock-frame,
:root[data-theme="dark"] details > div,
:root[data-theme="dark"] nav,
:root[data-theme="dark"] footer,
:root[data-theme="dark"] form,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: rgba(15, 23, 42, 0.9) !important;
  color: #e5edf7 !important;
}

:root[data-theme="dark"] .hover\:bg-slate-50:hover,
:root[data-theme="dark"] .hover\:bg-slate-100:hover,
:root[data-theme="dark"] .hover\:bg-slate-200:hover,
:root[data-theme="dark"] .hover\:bg-slate-300:hover {
  background-color: rgba(30, 41, 59, 0.95) !important;
}

:root[data-theme="dark"] .bg-slate-900,
:root[data-theme="dark"] .btn-primary {
  background-color: #f8fafc !important;
  color: #07111f !important;
}

:root[data-theme="dark"] .bg-emerald-50 {
  background-color: rgba(6, 78, 59, 0.36) !important;
}

:root[data-theme="dark"] .bg-emerald-700 {
  background-color: #059669 !important;
}

:root[data-theme="dark"] .text-slate-950,
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-black {
  color: #dbe7f4 !important;
}

:root[data-theme="dark"] .text-emerald-700,
:root[data-theme="dark"] .text-emerald-800 {
  color: #7dd3ae !important;
}

:root[data-theme="dark"] .border-slate-900,
:root[data-theme="dark"] .border-slate-300,
:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-slate-900\/50,
:root[data-theme="dark"] .border-emerald-300 {
  border-color: rgba(148, 163, 184, 0.32) !important;
}

:root[data-theme="dark"] [disabled],
:root[data-theme="dark"] .disabled\:opacity-40:disabled,
:root[data-theme="dark"] .disabled\:opacity-50:disabled,
:root[data-theme="dark"] .disabled\:opacity-60:disabled {
  opacity: 0.78 !important;
}

:root[data-theme="dark"] button:disabled,
:root[data-theme="dark"] input:disabled,
:root[data-theme="dark"] select:disabled,
:root[data-theme="dark"] textarea:disabled,
:root[data-theme="dark"] .disabled\:cursor-not-allowed:disabled {
  background-color: rgba(30, 41, 59, 0.78) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

:root[data-theme="dark"] .shadow-sm,
:root[data-theme="dark"] .shadow-lg {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: rgba(203, 213, 225, 0.66) !important;
}

:root[data-theme="dark"] img[src*="logo.png"] {
  filter: brightness(1.18) contrast(1.04);
}

:root[data-theme="dark"] .hero-motion-card {
  background:
    radial-gradient(circle at 20% 10%, rgba(16, 185, 129, 0.2), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.16), transparent 30%),
    linear-gradient(145deg, #101b2d 0%, #0b1627 52%, #082217 100%) !important;
}

:root[data-theme="dark"] .motion-screen,
:root[data-theme="dark"] .motion-plan,
:root[data-theme="dark"] .motion-chip,
:root[data-theme="dark"] .motion-output,
:root[data-theme="dark"] .motion-step,
:root[data-theme="dark"] .home-compare-label {
  background-color: rgba(15, 23, 42, 0.78) !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .tool-card,
:root[data-theme="dark"] .sample-card,
:root[data-theme="dark"] .showcase-card,
:root[data-theme="dark"] .compare-card,
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .slide-card,
:root[data-theme="dark"] .screen-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .community-strip,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .slide,
:root[data-theme="dark"] .page,
:root[data-theme="dark"] .paper,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .feature,
:root[data-theme="dark"] .feature-card {
  background-color: rgba(15, 23, 42, 0.9) !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="dark"] .pill-link,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .boq-chip,
:root[data-theme="dark"] .sample-chip,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .badge {
  background-color: rgba(30, 41, 59, 0.86) !important;
  color: #dbe7f4 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

:root[data-theme="dark"] .overview-row,
:root[data-theme="dark"] .overview-media,
:root[data-theme="dark"] .overview-tool-visual,
:root[data-theme="dark"] .tool-window,
:root[data-theme="dark"] .layout-mock-body,
:root[data-theme="dark"] .product-mock-body,
:root[data-theme="dark"] .product-mock-list,
:root[data-theme="dark"] .boq-panel,
:root[data-theme="dark"] .boq-head,
:root[data-theme="dark"] .boq-table,
:root[data-theme="dark"] .slide-screen,
:root[data-theme="dark"] .room-note,
:root[data-theme="dark"] .summary-row {
  background: rgba(15, 23, 42, 0.88) !important;
  background-color: rgba(15, 23, 42, 0.88) !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

:root[data-theme="dark"] .boq-table th,
:root[data-theme="dark"] .boq-table td,
:root[data-theme="dark"] .boq-total td {
  background: rgba(15, 23, 42, 0.88) !important;
  background-color: rgba(15, 23, 42, 0.88) !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

:root[data-theme="dark"] .boq-table tbody tr:nth-child(even) td,
:root[data-theme="dark"] .summary-row,
:root[data-theme="dark"] .room-note {
  background-color: rgba(30, 41, 59, 0.72) !important;
}

:root[data-theme="dark"] .overview-copy h3,
:root[data-theme="dark"] .overview-copy p,
:root[data-theme="dark"] .overview-list li,
:root[data-theme="dark"] .overview-list span,
:root[data-theme="dark"] .overview-icon,
:root[data-theme="dark"] .boq-head h3,
:root[data-theme="dark"] .boq-head p,
:root[data-theme="dark"] .tier-name,
:root[data-theme="dark"] .metric-note,
:root[data-theme="dark"] .slide-kicker,
:root[data-theme="dark"] .slide-title,
:root[data-theme="dark"] .slide-copy,
:root[data-theme="dark"] .room-note,
:root[data-theme="dark"] .summary-row,
:root[data-theme="dark"] .summary-row strong,
:root[data-theme="dark"] .screen-copy h3,
:root[data-theme="dark"] .screen-copy p {
  color: #e5edf7 !important;
}

:root[data-theme="dark"] .overview-tag {
  background: rgba(30, 41, 59, 0.86) !important;
  color: #dbe7f4 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

:root[data-theme="dark"] .mock-field,
:root[data-theme="dark"] .mock-line {
  background: rgba(148, 163, 184, 0.36) !important;
}

:root[data-theme="dark"] .mock-sheet-title,
:root[data-theme="dark"] .product-mock-image,
:root[data-theme="dark"] .mock-plan {
  background-color: rgba(2, 6, 23, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] small,
:root[data-theme="dark"] span,
:root[data-theme="dark"] div {
  border-color: rgba(148, 163, 184, 0.24);
}

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #0f172a;
  padding: 8px 12px;
  font: 700 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
}

:root[data-theme="dark"] .theme-toggle {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.82);
  color: #e5edf7;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"] .theme-toggle__icon {
  background: #f8fafc;
  color: #07111f;
}

@media (max-width: 640px) {
  .theme-toggle {
    right: 12px;
    bottom: 12px;
    padding: 8px 10px;
  }

  .theme-toggle__label {
    display: none;
  }
}