/* Mulu Code - System Dark Mode for Marketing Pages */
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #e5e7eb;
    --brand-dark: #f9fafb;
    --brand-deeper: #ffffff;
    --brand-light: #9ca3af;
    --brand-ultra-light: #1f2937;
    --brand-soft: #1e293b;
    --text: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --bg: #0a0a0f;
    --bg-soft: #111827;
    --bg-subtle: #1f2937;
    --border: #374151;
    --border-light: #1f2937;
    --border-strong: #4b5563;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 4px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 18px 56px rgba(0,0,0,0.5);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.6);
  }

  body {
    background: #0a0a0f !important;
    color: var(--text) !important;
  }

  /* Nav */
  nav {
    background: rgba(10,10,15,0.8) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 0.5px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4) !important;
  }
  nav:hover {
    background: rgba(10,10,15,0.9) !important;
    border-color: rgba(255,255,255,0.1) !important;
  }
  .nav-logo { color: var(--text) !important; }
  .nav-divider { background: rgba(255,255,255,0.1) !important; }
  .nav-links a:hover,
  .nav-links button:hover { background: rgba(255,255,255,0.08) !important; }
  .nav-download {
    color: var(--text) !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
  }
  .nav-download:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.18) !important;
  }

  /* Dropdowns */
  .dropdown-panel {
    background: #1a1a2e !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 24px 56px rgba(0,0,0,0.4) !important;
  }
  .dropdown-item:hover { background: rgba(255,255,255,0.06) !important; }
  .dropdown-icon { background: #262640 !important; }
  .dropdown-icon svg { color: var(--brand) !important; }

  /* Mobile menu */
  .mobile-menu-inner {
    background: rgba(15,15,25,0.97) !important;
    box-shadow: -4px 0 40px rgba(0,0,0,0.4) !important;
  }
  .mobile-menu-inner a { border-bottom-color: rgba(255,255,255,0.06) !important; }

  /* Cards */
  .hero-panel,
  .section-panel,
  .feature-card,
  .step-card,
  .page-link-card,
  .metric-card,
  .quote-card,
  .note-card,
  .shot-card,
  .table-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  /* Card icons */
  .card-icon {
    background: #1f2937 !important;
    color: #e5e7eb !important;
  }

  /* Gradient text */
  .gradient {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 40%, #6b7280 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }

  /* Eyebrow badges */
  .eyebrow {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.06) !important;
  }
  .eyebrow-dot {
    background: linear-gradient(135deg, #e5e7eb, #6b7280) !important;
  }

  /* Badges / chips */
  .badge, .chip {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
  }

  /* Buttons */
  .btn-primary {
    background: #e5e7eb !important;
    color: #111827 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4) !important;
  }
  .btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text) !important;
    border-color: rgba(255,255,255,0.12) !important;
  }

  /* Placeholders / shots */
  .shot-placeholder,
  .inline-shot {
    border-color: #374151 !important;
    background: linear-gradient(180deg, #1a1a2e 0%, #111827 100%) !important;
    color: #6b7280 !important;
  }

  /* Step numbers */
  .step-number {
    background: #e5e7eb !important;
    color: #111827 !important;
  }

  /* Mini list check icons */
  .mini-list svg { color: #e5e7eb !important; }

  /* Tables */
  .comparison-table th,
  .comparison-table td {
    border-bottom-color: #374151 !important;
  }
  .comparison-table .highlight {
    background: rgba(255,255,255,0.03) !important;
  }

  /* CTA panel */
  .cta-panel {
    background: linear-gradient(180deg, rgba(20,20,35,0.94) 0%, rgba(15,15,25,0.94) 100%) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  /* Footer */
  .footer-shell { border-top-color: rgba(255,255,255,0.08) !important; }
  .footer-bottom { border-top-color: rgba(255,255,255,0.08) !important; }

  /* Links */
  .link-arrow { color: var(--text) !important; }

  /* Code blocks */
  pre, code {
    background: #1a1a2e !important;
    color: #e5e7eb !important;
  }

  /* Inputs / forms */
  input, textarea, select {
    background: #1a1a2e !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
  }
  input::placeholder, textarea::placeholder {
    color: #6b7280 !important;
  }

  /* Images - add subtle brightness reduction for overly bright images */
  img:not(.nav-logo img) {
    opacity: 0.92;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #0a0a0f; }
  ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
}