/* ============================================
   SNAPAPI DESIGN SYSTEM v1.0
   Universal color tokens for light & dark themes
   Import this FIRST in every page.
   ============================================ */

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-page: #0a0a0f;
  --bg-surface: #12121a;
  --bg-elevated: #18182a;
  --bg-input: rgba(0,0,0,0.3);
  --bg-hover: rgba(255,255,255,0.05);
  --bg-active: rgba(99,102,241,0.2);
  
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --text-muted: #4b5563;
  --text-inverse: #111827;
  
  /* Borders */
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --border-focus: #6366f1;
  
  /* Brand */
  --brand-primary: #6366f1;
  --brand-primary-dark: #4f46e5;
  --brand-primary-light: #818cf8;
  --brand-secondary: #8b5cf6;
  --brand-accent: #ec4899;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  
  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 60px rgba(99,102,241,0.3);
  
  /* Components */
  --navbar-bg: rgba(3,7,18,0.8);
  --navbar-scrolled: rgba(3,7,18,0.95);
  --sidebar-bg: linear-gradient(180deg, #12121a 0%, #0e0e16 100%);
  --card-bg: linear-gradient(145deg, #1a1a2e 0%, #141420 100%);
  --card-border: rgba(255,255,255,0.06);
  --code-bg: #08080e;
  --code-text: #d4d4d8;
  --modal-bg: linear-gradient(145deg, #1a1a2e 0%, #141420 100%);
  --toast-bg: #1f2937;
  --dropdown-bg: linear-gradient(145deg, #1a1a2e 0%, #141420 100%);
}

/* Light theme */
[data-theme="light"] {
  /* Backgrounds */
  --bg-page: #f5f5f0;
  --bg-surface: #fafaf8;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: rgba(0,0,0,0.04);
  --bg-active: rgba(99,102,241,0.08);
  
  /* Text */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;
  
  /* Borders */
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.15);
  --border-focus: #6366f1;
  
  /* Shadows (lighter) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 40px rgba(99,102,241,0.1);
  
  /* Components */
  --navbar-bg: rgba(245,245,240,0.9);
  --navbar-scrolled: rgba(245,245,240,0.97);
  --sidebar-bg: #fafaf8;
  --card-bg: #fafaf8;
  --card-border: rgba(0,0,0,0.08);
  --code-bg: #1e1e2e;
  --code-text: #d4d4d8;
  --modal-bg: #ffffff;
  --toast-bg: #ffffff;
  --dropdown-bg: #ffffff;
}

/* ============================================
   LIGHT THEME UNIVERSAL OVERRIDES
   These use the design tokens above
   ============================================ */

/* Backgrounds */
[data-theme="light"] body { background: var(--bg-page) !important; color: var(--text-primary) !important; }
[data-theme="light"] .bg-gradient,
[data-theme="light"] .bg-grid,
[data-theme="light"] .bg-glow,
[data-theme="light"] .bg-glow-1,
[data-theme="light"] .bg-glow-2,
[data-theme="light"] .bg-glow-3 { display: none !important; }

/* Navbar */
[data-theme="light"] .navbar { background: var(--navbar-bg) !important; border-bottom: 1px solid var(--border) !important; }
[data-theme="light"] .navbar.scrolled { background: var(--navbar-scrolled) !important; backdrop-filter: blur(20px) !important; }
[data-theme="light"] .logo-text { color: var(--text-primary) !important; }
[data-theme="light"] .nav-links a { color: var(--text-tertiary) !important; }
[data-theme="light"] .nav-links a:hover { color: var(--text-primary) !important; }
[data-theme="light"] .nav-user-btn,
[data-theme="light"] .user-btn { background: var(--bg-hover) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
[data-theme="light"] .nav-user-name,
[data-theme="light"] .user-name { color: var(--text-primary) !important; }
[data-theme="light"] .nav-user-dropdown,
[data-theme="light"] .user-dropdown { background: var(--dropdown-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; }
[data-theme="light"] .nav-user-dropdown a,
[data-theme="light"] .user-dropdown a { color: var(--text-secondary) !important; }
[data-theme="light"] .nav-user-dropdown a:hover,
[data-theme="light"] .user-dropdown a:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
[data-theme="light"] .mobile-menu-btn span { background: var(--text-primary) !important; }

/* Typography */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--text-primary) !important; }
[data-theme="light"] p { color: var(--text-secondary) !important; }
[data-theme="light"] li { color: var(--text-secondary) !important; }
[data-theme="light"] .gradient-text { -webkit-text-fill-color: var(--brand-primary-dark) !important; color: var(--brand-primary-dark) !important; background: none !important; }
[data-theme="light"] .section-title { color: var(--text-primary) !important; }
[data-theme="light"] .section-subtitle { color: var(--text-tertiary) !important; }
[data-theme="light"] .section-badge { background: rgba(99,102,241,0.06) !important; border-color: rgba(99,102,241,0.12) !important; }

/* Cards (universal) */
[data-theme="light"] .feature-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .docs-card,
[data-theme="light"] .sdk-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .value-card,
[data-theme="light"] .benefit-card,
[data-theme="light"] .info-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .stat-card,
[data-theme="light"] .card,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .admin-card,
[data-theme="light"] .key-card,
[data-theme="light"] .step,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .community-card,
[data-theme="light"] .social-proof-card,
[data-theme="light"] .tool-card,
[data-theme="light"] .use-case-card,
[data-theme="light"] .storage-overview-card,
[data-theme="light"] .s3-config-card,
[data-theme="light"] .gallery-card,
[data-theme="light"] .contact-form-card,
[data-theme="light"] .newsletter-section,
[data-theme="light"] .right-card,
[data-theme="light"] .incident-item,
[data-theme="light"] .service-item,
[data-theme="light"] .status-overview,
[data-theme="light"] .position-card,
[data-theme="light"] .empty-state,
[data-theme="light"] .plan-option,
[data-theme="light"] .upgrade-plan-option,
[data-theme="light"] .current-plan-compact,
[data-theme="light"] .upgrade-options-card,
[data-theme="light"] .upgrade-card {
  background: var(--bg-surface) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .card-header { border-bottom-color: var(--border) !important; }
[data-theme="light"] .card-header h3 { color: var(--text-primary) !important; }

/* Card text */
[data-theme="light"] .feature-card h3,
[data-theme="light"] .docs-card h3,
[data-theme="light"] .blog-card h3,
[data-theme="light"] .blog-card h3 a,
[data-theme="light"] .step-content h3,
[data-theme="light"] .plan-name,
[data-theme="light"] .faq-item h4,
[data-theme="light"] .testimonial-name,
[data-theme="light"] .community-card h4,
[data-theme="light"] .social-proof-card h4 { color: var(--text-primary) !important; }

[data-theme="light"] .feature-card p,
[data-theme="light"] .docs-card p,
[data-theme="light"] .blog-card p,
[data-theme="light"] .step-content p,
[data-theme="light"] .plan-desc,
[data-theme="light"] .faq-item p,
[data-theme="light"] .testimonial-text,
[data-theme="light"] .community-card p,
[data-theme="light"] .social-proof-card p,
[data-theme="light"] .pricing-features li { color: var(--text-secondary) !important; }

/* Buttons */
[data-theme="light"] .btn-outline { color: var(--text-secondary) !important; border-color: var(--border-hover) !important; }
[data-theme="light"] .btn-outline:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
[data-theme="light"] .btn-ghost { color: var(--text-tertiary) !important; }
[data-theme="light"] .btn-ghost:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
[data-theme="light"] .btn-primary { color: var(--text-inverse) !important; }

/* Inputs */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; }
[data-theme="light"] label { color: var(--text-tertiary) !important; }

/* Code blocks - ALWAYS dark for readability */
[data-theme="light"] pre,
[data-theme="light"] .code-block,
[data-theme="light"] .code-window,
[data-theme="light"] .quick-start-code,
[data-theme="light"] .sdk-example,
[data-theme="light"] .pg-code-block,
[data-theme="light"] .code-content {
  background: var(--code-bg) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] pre code,
[data-theme="light"] .code-block code,
[data-theme="light"] .quick-start-code code,
[data-theme="light"] .sdk-example code,
[data-theme="light"] .pg-code-block code,
[data-theme="light"] .code-content code { color: var(--code-text) !important; }
[data-theme="light"] code:not(pre code) { background: rgba(99,102,241,0.08) !important; color: var(--brand-primary) !important; }
[data-theme="light"] .code-header,
[data-theme="light"] .code-tabs { background: #15151f !important; border-color: rgba(255,255,255,0.05) !important; }
[data-theme="light"] .code-tab { color: #9ca3af !important; }
[data-theme="light"] .code-tab.active { color: #fff !important; background: rgba(99,102,241,0.3) !important; }

/* Sidebar (dashboard/playground) */
[data-theme="light"] .sidebar,
[data-theme="light"] .dashboard-page .sidebar {
  background: var(--bg-surface) !important;
  border-right-color: var(--border) !important;
}
[data-theme="light"] .sidebar-header { border-bottom-color: var(--border) !important; }
[data-theme="light"] .sidebar-footer { border-top-color: var(--border) !important; }
[data-theme="light"] .nav-item,
[data-theme="light"] .dashboard-page .nav-item { color: var(--text-tertiary) !important; }
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .dashboard-page .nav-item:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
[data-theme="light"] .nav-item.active,
[data-theme="light"] .dashboard-page .nav-item.active { color: var(--text-primary) !important; background: var(--bg-active) !important; }

/* Dashboard */
[data-theme="light"] .dashboard-page { background: var(--bg-page) !important; }
[data-theme="light"] .dashboard-main { background: var(--bg-page) !important; }
[data-theme="light"] .dashboard-header { background: var(--navbar-scrolled) !important; border-bottom-color: var(--border) !important; }
[data-theme="light"] .dashboard-header h1 { color: var(--text-primary) !important; }
[data-theme="light"] .stat-card-label,
[data-theme="light"] .stat-label { color: var(--text-tertiary) !important; }
[data-theme="light"] .stat-card-value,
[data-theme="light"] .stat-value { color: var(--text-primary) !important; }
[data-theme="light"] .stat-detail,
[data-theme="light"] .progress-text { color: var(--text-tertiary) !important; }
[data-theme="light"] .stat-detail a,
[data-theme="light"] .card-link { color: var(--brand-primary) !important; }
[data-theme="light"] .key-name { color: var(--text-primary) !important; }
[data-theme="light"] .key-full { color: var(--brand-primary-light) !important; }
[data-theme="light"] .key-meta { color: var(--text-muted) !important; }
[data-theme="light"] .key-value-row { background: var(--bg-page) !important; border-color: var(--border) !important; }
[data-theme="light"] .plan-quota { color: var(--text-primary) !important; }
[data-theme="light"] .plan-reset { color: var(--text-tertiary) !important; }
[data-theme="light"] .quick-link { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-tertiary) !important; }
[data-theme="light"] .quick-link:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }

/* Pricing */
[data-theme="light"] .price-amount { color: var(--text-primary) !important; }
[data-theme="light"] .price-period { color: var(--text-tertiary) !important; }
[data-theme="light"] .pricing-features strong { color: var(--text-primary) !important; }
[data-theme="light"] .pricing-features li { border-bottom-color: var(--border) !important; }
[data-theme="light"] .pricing-card.popular { border-color: var(--brand-primary) !important; box-shadow: 0 4px 20px rgba(99,102,241,0.12) !important; }
[data-theme="light"] .toggle-label { color: var(--text-tertiary) !important; }
[data-theme="light"] .toggle-slider { background: rgba(0,0,0,0.12) !important; }

/* Tables */
[data-theme="light"] table { background: var(--bg-surface) !important; }
[data-theme="light"] th { background: rgba(99,102,241,0.06) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="light"] td { color: var(--text-secondary) !important; border-color: var(--border) !important; }
[data-theme="light"] tr:hover td { background: var(--bg-hover) !important; }

/* Footer */
[data-theme="light"] .footer { border-top-color: var(--border) !important; }
[data-theme="light"] .footer-brand p { color: var(--text-tertiary) !important; }
[data-theme="light"] .footer-links h4 { color: var(--text-primary) !important; }
[data-theme="light"] .footer-links a { color: var(--text-tertiary) !important; }
[data-theme="light"] .footer-links a:hover { color: var(--text-primary) !important; }
[data-theme="light"] .footer-bottom { border-top-color: var(--border) !important; }
[data-theme="light"] .footer-bottom p { color: var(--text-muted) !important; }
[data-theme="light"] .social-links a { background: var(--bg-hover) !important; color: var(--text-tertiary) !important; }
[data-theme="light"] .social-links a:hover { color: var(--text-primary) !important; }

/* Auth pages */
[data-theme="light"] .auth-page { background: var(--bg-page) !important; }
[data-theme="light"] .auth-card { background: var(--bg-elevated) !important; border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; }
[data-theme="light"] .auth-header h1 { color: var(--text-primary) !important; }
[data-theme="light"] .auth-header p { color: var(--text-tertiary) !important; }
[data-theme="light"] .auth-form label { color: var(--text-tertiary) !important; }
[data-theme="light"] .social-btn { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="light"] .auth-divider span { color: var(--text-muted) !important; }
[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after { background: var(--border) !important; }

/* Blog */
[data-theme="light"] .blog-hero h1 { color: var(--text-primary) !important; }
[data-theme="light"] .blog-content h2 { color: var(--text-primary) !important; }
[data-theme="light"] .blog-content h3 { color: var(--text-primary) !important; }
[data-theme="light"] .blog-content p { color: var(--text-secondary) !important; }
[data-theme="light"] .blog-content li { color: var(--text-secondary) !important; }
[data-theme="light"] .blog-content strong { color: var(--text-primary) !important; }
[data-theme="light"] .blog-content a { color: var(--brand-primary) !important; }
[data-theme="light"] .blog-tag { background: rgba(99,102,241,0.06) !important; color: var(--brand-primary) !important; }
[data-theme="light"] .blog-date,
[data-theme="light"] .blog-meta { color: var(--text-muted) !important; }
[data-theme="light"] .blog-content blockquote { background: rgba(99,102,241,0.03) !important; }
[data-theme="light"] .blog-content blockquote p { color: var(--text-tertiary) !important; }

/* Legal pages */
[data-theme="light"] .legal-body { background: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="light"] .legal-body h2 { color: var(--text-primary) !important; }
[data-theme="light"] .legal-body p,
[data-theme="light"] .legal-body li { color: var(--text-secondary) !important; }
[data-theme="light"] .legal-body section { border-bottom-color: var(--border) !important; }
[data-theme="light"] .legal-nav a { color: var(--text-tertiary) !important; }
[data-theme="light"] .legal-nav a:hover { color: var(--text-primary) !important; }

/* Modals */
[data-theme="light"] .modal-content { background: var(--modal-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; }
[data-theme="light"] .modal-header h3 { color: var(--text-primary) !important; }

/* Toast */
[data-theme="light"] .toast { background: var(--toast-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; }
[data-theme="light"] .toast-message { color: var(--text-primary) !important; }

/* Changelog */
[data-theme="light"] .changelog-item { border-bottom-color: var(--border) !important; }
[data-theme="light"] .changelog-details h3 { color: var(--text-primary) !important; }
[data-theme="light"] .changelog-details p,
[data-theme="light"] .change-list li { color: var(--text-tertiary) !important; }

/* CTA section */
[data-theme="light"] .cta::before { opacity: 0.03 !important; }
[data-theme="light"] .cta-content h2 { color: var(--text-primary) !important; }
[data-theme="light"] .cta-content p { color: var(--text-secondary) !important; }
[data-theme="light"] .floating-card { background: rgba(255,255,255,0.9) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }

/* How it works / pricing backgrounds */
[data-theme="light"] .how-it-works,
[data-theme="light"] .pricing,
[data-theme="light"] .sdks { background: transparent !important; }

/* Quick try */
[data-theme="light"] .quick-try-input { background: var(--bg-elevated) !important; border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; }
[data-theme="light"] .quick-try-input input { color: var(--text-primary) !important; }
[data-theme="light"] .quick-try-hint { color: var(--text-muted) !important; }

/* SDK install */
[data-theme="light"] .sdk-install { background: var(--bg-page) !important; border-color: var(--border) !important; }
[data-theme="light"] .sdk-install code { color: var(--text-secondary) !important; }
[data-theme="light"] .sdk-info h3 { color: var(--text-primary) !important; }
[data-theme="light"] .sdk-link { color: var(--brand-primary) !important; }
[data-theme="light"] .docs-link { color: var(--brand-primary) !important; }
[data-theme="light"] .docs-icon { background: rgba(99,102,241,0.06) !important; }

/* Playground */
[data-theme="light"] .pg-results { background: var(--bg-surface) !important; }
[data-theme="light"] .pg-response-bar { background: var(--bg-surface) !important; border-bottom-color: var(--border) !important; }
[data-theme="light"] .pg-preview { background: var(--bg-page) !important; }
[data-theme="light"] .pg-preview-empty { color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-preview-empty h3 { color: var(--text-secondary) !important; }
[data-theme="light"] .pg-config { background: var(--bg-surface) !important; border-right-color: var(--border) !important; }
[data-theme="light"] .pg-label { color: var(--brand-primary) !important; }
[data-theme="light"] .pg-input,
[data-theme="light"] .pg-textarea { background: var(--bg-input) !important; border-color: var(--border-hover) !important; color: var(--text-primary) !important; }
[data-theme="light"] .pg-chip { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-chip.active { background: var(--bg-active) !important; border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }
[data-theme="light"] .pg-toggle { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-toggle.active { background: var(--brand-primary) !important; color: var(--text-inverse) !important; }
[data-theme="light"] .pg-preset { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-preset.active { background: var(--bg-active) !important; border-color: var(--brand-primary) !important; }
[data-theme="light"] .pg-execute-btn { color: var(--text-inverse) !important; }
[data-theme="light"] .pg-hint { color: var(--text-muted) !important; }
[data-theme="light"] .pg-hint a { color: var(--brand-primary) !important; }
[data-theme="light"] .pg-status { color: var(--text-primary) !important; }
[data-theme="light"] .pg-meta-item { color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-code-tab { color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-code-tab.active { color: var(--text-primary) !important; background: var(--bg-active) !important; }
[data-theme="light"] .pg-copy-btn { color: var(--text-tertiary) !important; border-color: var(--border) !important; }
[data-theme="light"] .pg-wf-track { background: var(--border) !important; }
[data-theme="light"] .pg-wf-label { color: var(--text-tertiary) !important; }
[data-theme="light"] .pg-wf-time { color: var(--text-secondary) !important; }
[data-theme="light"] .pg-check span { color: var(--text-secondary) !important; }
[data-theme="light"] .pg-divider { background: var(--bg-hover) !important; }
[data-theme="light"] .pg-divider-line { background: var(--border-hover) !important; }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-page) !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d1d5db !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

/* Theme toggle button */
.theme-toggle-fixed {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
  z-index: 9999;
  transition: all 0.2s ease;
  border: none;
}
.theme-toggle-fixed:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(99,102,241,0.5); }
.theme-toggle-fixed svg { width: 20px; height: 20px; }
[data-theme="dark"] .theme-toggle-sun { display: block; }
[data-theme="dark"] .theme-toggle-moon { display: none; }
[data-theme="light"] .theme-toggle-sun { display: none; }
[data-theme="light"] .theme-toggle-moon { display: block; }

/* Compare section - has inline dark gradient */
[data-theme="light"] .comparison-section,
[data-theme="light"] #compare {
  background: var(--bg-page) !important;
}
[data-theme="light"] .comparison-section .section-title,
[data-theme="light"] .comparison-section h2 { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; }
[data-theme="light"] .comparison-section p { color: var(--text-secondary) !important; }
[data-theme="light"] .comparison-section .section-badge { background: rgba(99,102,241,0.06) !important; }

/* Compare table - header stays dark, body light */
[data-theme="light"] .comparison-table thead,
[data-theme="light"] .comparison-section thead { background: #1e1e2e !important; }
[data-theme="light"] .comparison-table thead th { color: #fff !important; }
[data-theme="light"] .comparison-table tbody td { background: var(--bg-surface) !important; color: var(--text-secondary) !important; }
[data-theme="light"] .comparison-table tbody tr:nth-child(even) td { background: var(--bg-page) !important; }
[data-theme="light"] .comparison-table { border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; }

/* Any other sections with inline dark backgrounds on index.html */
[data-theme="light"] section[style*="background"] { background: var(--bg-page) !important; }
[data-theme="light"] .demo-section[style*="background"],
[data-theme="light"] .features-section[style*="background"],
[data-theme="light"] .pricing-section[style*="background"],
[data-theme="light"] .sdks-section[style*="background"],
[data-theme="light"] .cta-section[style*="background"] { background: var(--bg-page) !important; }

/* Hero section */
[data-theme="light"] .hero { background: var(--bg-page) !important; }
[data-theme="light"] .hero h1 { color: var(--text-primary) !important; }
[data-theme="light"] .hero p { color: var(--text-secondary) !important; }

/* Status badges */
[data-theme="light"] .status-badge { background: rgba(16,185,129,0.06) !important; border-color: rgba(16,185,129,0.15) !important; color: #065f46 !important; }
[data-theme="light"] .status-badge-free { background: rgba(99,102,241,0.06) !important; border-color: rgba(99,102,241,0.15) !important; color: var(--brand-primary) !important; }

/* NUCLEAR: Override ALL remaining dark backgrounds in light mode */

/* Demo animation */
[data-theme="light"] .demo-animation-container,
[data-theme="light"] .demo-animation-container::before {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .demo-step { background: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="light"] .demo-step .step-label { color: var(--brand-primary) !important; }
[data-theme="light"] .demo-step input,
[data-theme="light"] .demo-step .demo-url-input { background: var(--bg-page) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }
[data-theme="light"] .demo-step .post-method { background: rgba(99,102,241,0.08) !important; color: var(--brand-primary) !important; }
[data-theme="light"] .demo-step .endpoint { color: var(--text-secondary) !important; }
[data-theme="light"] .demo-step .processing { color: var(--text-tertiary) !important; }
[data-theme="light"] .demo-step .file-name { color: var(--brand-primary) !important; }
[data-theme="light"] .demo-step .file-meta { color: var(--text-tertiary) !important; }
[data-theme="light"] .demo-step .file-preview { background: var(--bg-page) !important; border-color: var(--border) !important; }

/* Demo container (alternative class names) */
[data-theme="light"] .demo-container { background: var(--bg-surface) !important; }
[data-theme="light"] .demo-window { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="light"] .demo-window-header { background: var(--bg-page) !important; }
[data-theme="light"] .demo-window-dot { background: #ddd !important; }

/* ANY element with dark inline background */
[data-theme="light"] [style*="background: linear-gradient"],
[data-theme="light"] [style*="background:linear-gradient"],
[data-theme="light"] [style*="background-color: #0"],
[data-theme="light"] [style*="background-color: #1"],
[data-theme="light"] [style*="background-color: rgb(1"],
[data-theme="light"] [style*="background: #0"],
[data-theme="light"] [style*="background: #1"],
[data-theme="light"] [style*="background: rgba(10"],
[data-theme="light"] [style*="background: rgba(18"],
[data-theme="light"] [style*="background: rgba(5"] {
  background: var(--bg-page) !important;
}

/* Quick start code section */
[data-theme="light"] .quick-start-section { background: var(--bg-page) !important; }
[data-theme="light"] .quick-start-tabs { background: var(--bg-surface) !important; }

/* Features grid */
[data-theme="light"] .features-grid { background: transparent !important; }

/* Pricing section toggle area */
[data-theme="light"] .pricing-toggle { background: var(--bg-surface) !important; }

/* Any remaining dark divs */
[data-theme="light"] div[style*="rgba(10,10,15"],
[data-theme="light"] div[style*="rgba(18,18,26"],
[data-theme="light"] div[style*="rgba(5,5,8"] {
  background: var(--bg-page) !important;
}

/* Step cards with dark borders/shadows */
[data-theme="light"] .step { box-shadow: var(--shadow-sm) !important; }
[data-theme="light"] .step-number { background: rgba(99,102,241,0.08) !important; color: var(--brand-primary) !important; }
[data-theme="light"] .step-content h3 { color: var(--text-primary) !important; }
[data-theme="light"] .step-content p { color: var(--text-secondary) !important; }
[data-theme="light"] .step-connector { background: var(--border) !important; }

/* ========== MEGA FIX: All inline-styled elements ========== */

/* How it Works step cards */
[data-theme="light"] .how-step,
[data-theme="light"] .step-card,
[data-theme="light"] [class*="how-it-works"] .step { 
  background: #ffffff !important; 
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .step-connector,
[data-theme="light"] .how-connector,
[data-theme="light"] [class*="connector"] { 
  background: rgba(99,102,241,0.15) !important; 
}

/* Pricing table with inline colors */
[data-theme="light"] td[style*="color:#e2e8f0"],
[data-theme="light"] td[style*="color: #e2e8f0"] { color: #374151 !important; }
[data-theme="light"] tr[style*="border-bottom:1px solid rgba(30"],
[data-theme="light"] tr[style*="border-bottom: 1px solid rgba(30"] { 
  border-bottom-color: rgba(0,0,0,0.06) !important; 
}
[data-theme="light"] tr[style*="background:rgba(139,92,246,0.03)"],
[data-theme="light"] tr[style*="background: rgba(139,92,246,0.03)"] { 
  background: rgba(99,102,241,0.03) !important; 
}
[data-theme="light"] tr[style*="background: rgba(139,92,246,0.1)"],
[data-theme="light"] tr[style*="background:rgba(139,92,246,0.1)"] {
  background: rgba(99,102,241,0.08) !important;
}
[data-theme="light"] tr[style*="border-bottom:2px solid rgba(139"],
[data-theme="light"] tr[style*="border-bottom: 2px solid rgba(139"] {
  border-bottom-color: rgba(99,102,241,0.3) !important;
}

/* ALL td and th in any table */
[data-theme="light"] td { color: #374151 !important; }
[data-theme="light"] td[style*="text-align"] { color: #374151 !important; }
[data-theme="light"] td[style*="padding"] { color: #374151 !important; }

/* Feature icons with colored backgrounds - these are fine, keep them */

/* Cards with var(--bg-card) - fix for light */
[data-theme="light"] [style*="var(--bg-card)"] { 
  background: #fafaf8 !important; 
  border-color: rgba(0,0,0,0.06) !important; 
}

/* Community/testimonial card text */
[data-theme="light"] [style*="var(--bg-card)"] h3,
[data-theme="light"] [style*="var(--bg-card)"] h4 { color: #111827 !important; }
[data-theme="light"] [style*="var(--bg-card)"] p { color: #6b7280 !important; }

/* "Why SnapAPI" section */
[data-theme="light"] .why-snapapi { background: transparent !important; }
[data-theme="light"] .why-snapapi div[style*="background: rgba(139"] { 
  background: rgba(139,92,246,0.04) !important; 
  border-color: rgba(139,92,246,0.1) !important; 
}
[data-theme="light"] .why-snapapi div[style*="background: rgba(0,212"] { 
  background: rgba(0,212,255,0.04) !important; 
  border-color: rgba(0,212,255,0.1) !important; 
}
[data-theme="light"] .why-snapapi div[style*="background: rgba(34,197"] { 
  background: rgba(34,197,94,0.04) !important; 
  border-color: rgba(34,197,94,0.1) !important; 
}
[data-theme="light"] .why-snapapi div[style*="background: rgba(245,158"] { 
  background: rgba(245,158,11,0.04) !important; 
  border-color: rgba(245,158,11,0.1) !important; 
}
[data-theme="light"] .why-snapapi div[style*="background: rgba(239,68"] { 
  background: rgba(239,68,68,0.04) !important; 
  border-color: rgba(239,68,68,0.1) !important; 
}
[data-theme="light"] .why-snapapi div[style*="background: rgba(168,85"] { 
  background: rgba(168,85,247,0.04) !important; 
  border-color: rgba(168,85,247,0.1) !important; 
}
[data-theme="light"] .why-snapapi h3 { color: #111827 !important; }
[data-theme="light"] .why-snapapi p { color: #6b7280 !important; }

/* LLM cards */
[data-theme="light"] .llm-card { background: #fafaf8 !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .llm-card-icon[style*="background"] {
  /* keep the colored gradients but reduce opacity */
  opacity: 0.8 !important;
}
[data-theme="light"] .llm-card h4 { color: #111827 !important; }
[data-theme="light"] .llm-card p { color: #6b7280 !important; }

/* Inline badges/stats */
[data-theme="light"] div[style*="background:rgba(34,197,94,0.1)"],
[data-theme="light"] div[style*="background: rgba(34,197,94,0.1)"] {
  background: rgba(34,197,94,0.06) !important;
  border-color: rgba(34,197,94,0.15) !important;
}
[data-theme="light"] div[style*="background:rgba(139,92,246,0.1)"],
[data-theme="light"] div[style*="background: rgba(139,92,246,0.1)"] {
  background: rgba(139,92,246,0.06) !important;
  border-color: rgba(139,92,246,0.15) !important;
}
[data-theme="light"] div[style*="background:rgba(0,212,255,0.1)"],
[data-theme="light"] div[style*="background: rgba(0,212,255,0.1)"] {
  background: rgba(0,212,255,0.06) !important;
  border-color: rgba(0,212,255,0.15) !important;
}

/* CTA section */
[data-theme="light"] .cta { background: #f0f0ea !important; }

/* API code snippet key display */
[data-theme="light"] .key-display,
[data-theme="light"] [class*="api-key"] { 
  background: #fafaf8 !important; 
  border-color: rgba(0,0,0,0.08) !important; 
  color: #374151 !important; 
}

/* Hero terminal window */
[data-theme="light"] .code-window,
[data-theme="light"] .hero-code-window,
[data-theme="light"] .terminal-window { 
  box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important; 
  border-color: rgba(0,0,0,0.1) !important;
}

/* Mobile phone mockup */
[data-theme="light"] .phone-mockup,
[data-theme="light"] .device-mockup {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* Newsletter/contact section */
[data-theme="light"] .newsletter-input { 
  background: #fff !important; 
  border-color: rgba(0,0,0,0.1) !important; 
  color: #111827 !important;
}

/* Feature detail elements */
[data-theme="light"] .feature-detail { color: #6b7280 !important; }
[data-theme="light"] .feature-icon { background: rgba(99,102,241,0.06) !important; }

/* Stats bar */
[data-theme="light"] .stats-bar { background: #fafaf8 !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .stat-item h3 { color: #111827 !important; }
[data-theme="light"] .stat-item p { color: #6b7280 !important; }

/* Glow effects - hide in light mode */
[data-theme="light"] [class*="glow"] { opacity: 0 !important; }
[data-theme="light"] .hero::before,
[data-theme="light"] .hero::after { display: none !important; }

/* Light code blocks per Alex's request */
[data-theme="light"] pre,
[data-theme="light"] .code-block,
[data-theme="light"] .code-window,
[data-theme="light"] .quick-start-code,
[data-theme="light"] .sdk-example,
[data-theme="light"] .pg-code-block,
[data-theme="light"] .code-content,
[data-theme="light"] .terminal-window,
[data-theme="light"] .hero-code-window {
  background: #fafaf8 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] pre code,
[data-theme="light"] .code-block code,
[data-theme="light"] .quick-start-code code,
[data-theme="light"] .sdk-example code,
[data-theme="light"] .pg-code-block code,
[data-theme="light"] .code-content code,
[data-theme="light"] .terminal-window code { color: #1f2937 !important; }

/* Syntax highlighting for light mode */
[data-theme="light"] .token-keyword, [data-theme="light"] .hljs-keyword { color: #7c3aed !important; }
[data-theme="light"] .token-string, [data-theme="light"] .hljs-string { color: #059669 !important; }
[data-theme="light"] .token-comment, [data-theme="light"] .hljs-comment { color: #9ca3af !important; }
[data-theme="light"] .token-function, [data-theme="light"] .hljs-title { color: #2563eb !important; }
[data-theme="light"] .token-number, [data-theme="light"] .hljs-number { color: #d97706 !important; }
[data-theme="light"] .token-operator { color: #374151 !important; }
[data-theme="light"] .token-punctuation { color: #6b7280 !important; }

/* Code header/tabs also light */
[data-theme="light"] .code-header,
[data-theme="light"] .code-tabs {
  background: #f0f0ea !important;
  border-color: rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .code-tab { color: #6b7280 !important; }
[data-theme="light"] .code-tab.active { color: #4f46e5 !important; background: rgba(99,102,241,0.08) !important; }

/* Terminal window header dots */
[data-theme="light"] .window-dot,
[data-theme="light"] .code-window-dot { opacity: 0.6 !important; }

/* Copy button */
[data-theme="light"] .copy-btn,
[data-theme="light"] .code-copy-btn { 
  color: #6b7280 !important; 
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Inline code */
[data-theme="light"] code:not(pre code) { 
  background: rgba(99,102,241,0.06) !important; 
  color: #4f46e5 !important; 
  border: 1px solid rgba(99,102,241,0.1) !important;
}

/* curl/command coloring in light mode */
[data-theme="light"] pre .command,
[data-theme="light"] pre span[style*="color: #89b4fa"],
[data-theme="light"] pre span[style*="color:#89b4fa"] { color: #2563eb !important; }
[data-theme="light"] pre span[style*="color: #a6e3a1"],
[data-theme="light"] pre span[style*="color:#a6e3a1"] { color: #059669 !important; }
[data-theme="light"] pre span[style*="color: #f9e2af"],
[data-theme="light"] pre span[style*="color:#f9e2af"] { color: #d97706 !important; }
[data-theme="light"] pre span[style*="color: #cba6f7"],
[data-theme="light"] pre span[style*="color:#cba6f7"] { color: #7c3aed !important; }
[data-theme="light"] pre span[style*="color: #f38ba8"],
[data-theme="light"] pre span[style*="color:#f38ba8"] { color: #dc2626 !important; }
[data-theme="light"] pre span[style*="color: #94e2d5"],
[data-theme="light"] pre span[style*="color:#94e2d5"] { color: #0d9488 !important; }
[data-theme="light"] pre span[style*="color: #cdd6f4"],
[data-theme="light"] pre span[style*="color:#cdd6f4"] { color: #374151 !important; }

/* Dashboard Quick Start code block - remove dark border */
[data-theme="light"] .quick-start-card pre,
[data-theme="light"] .dashboard-card pre,
[data-theme="light"] .card pre,
[data-theme="light"] .overview-card pre {
  background: #fafaf8 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
[data-theme="light"] .quick-start-card code,
[data-theme="light"] .dashboard-card code,
[data-theme="light"] .overview-card code { color: #374151 !important; }

/* Blog card images in light mode - ensure gradient ones look ok */
[data-theme="light"] .card-image[style*="linear-gradient"] {
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1)) !important;
}

/* Dashboard code window wrapper */
[data-theme="light"] .code-window-wrapper,
[data-theme="light"] .code-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Force toggle visible everywhere */
.theme-toggle-fixed {
  position: fixed !important;
  bottom: 80px !important;
  right: 24px !important;
  z-index: 999999 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ============ NUCLEAR LIGHT MODE FIX ============ */
/* Target EVERYTHING that could be dark in light mode */

/* Any element with dark background colors */
[data-theme="light"] [style*="background: #0"],
[data-theme="light"] [style*="background: #1"],
[data-theme="light"] [style*="background: #2"],
[data-theme="light"] [style*="background:#0"],
[data-theme="light"] [style*="background:#1"],
[data-theme="light"] [style*="background:#2"],
[data-theme="light"] [style*="background-color: #0"],
[data-theme="light"] [style*="background-color: #1"],
[data-theme="light"] [style*="background-color:#0"],
[data-theme="light"] [style*="background-color:#1"],
[data-theme="light"] [style*="background: rgb(1"],
[data-theme="light"] [style*="background: rgb(2"],
[data-theme="light"] [style*="background: rgb(3"],
[data-theme="light"] [style*="background: rgb(4"],
[data-theme="light"] [style*="background: rgb(5"],
[data-theme="light"] [style*="background:rgb(1"],
[data-theme="light"] [style*="background:rgb(2"] {
  background: #fafaf8 !important;
  color: #374151 !important;
}

/* All pre/code elements - force light */
[data-theme="light"] pre {
  background: #f5f5f0 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: #374151 !important;
  box-shadow: none !important;
}
[data-theme="light"] pre * { color: inherit !important; }
[data-theme="light"] pre code { color: #374151 !important; background: transparent !important; }
[data-theme="light"] pre .token-keyword, [data-theme="light"] pre .hljs-keyword { color: #7c3aed !important; }
[data-theme="light"] pre .token-string, [data-theme="light"] pre .hljs-string { color: #059669 !important; }
[data-theme="light"] pre .token-function, [data-theme="light"] pre .hljs-title { color: #2563eb !important; }
[data-theme="light"] pre .token-number, [data-theme="light"] pre .hljs-number { color: #d97706 !important; }

/* Code windows / terminal mockups */
[data-theme="light"] .code-window,
[data-theme="light"] .terminal,
[data-theme="light"] .terminal-window,
[data-theme="light"] .hero-code-window,
[data-theme="light"] .hero-terminal,
[data-theme="light"] [class*="terminal"],
[data-theme="light"] [class*="code-window"],
[data-theme="light"] [class*="code-block"],
[data-theme="light"] [class*="code-card"],
[data-theme="light"] [class*="code-example"],
[data-theme="light"] [class*="code-demo"],
[data-theme="light"] [class*="quick-start"] pre {
  background: #f5f5f0 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  color: #374151 !important;
}

/* Terminal header bar - keep slightly different */
[data-theme="light"] .code-window > div:first-child,
[data-theme="light"] .terminal-header,
[data-theme="light"] [class*="terminal"] > div:first-child,
[data-theme="light"] [class*="code-window"] > div:first-child {
  background: #eeeee8 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  color: #6b7280 !important;
}

/* SDK code examples */
[data-theme="light"] .sdk-code,
[data-theme="light"] .sdk-example,
[data-theme="light"] .sdk-card pre,
[data-theme="light"] .sdk-card code {
  background: #f5f5f0 !important;
  color: #374151 !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* Inline colored spans in code blocks - override catppuccin/dark colors */
[data-theme="light"] pre span[style*="color: #89b4fa"],
[data-theme="light"] pre span[style*="color:#89b4fa"],
[data-theme="light"] pre span[style*="color: #74c7ec"],
[data-theme="light"] pre span[style*="color:#74c7ec"] { color: #2563eb !important; }
[data-theme="light"] pre span[style*="color: #a6e3a1"],
[data-theme="light"] pre span[style*="color:#a6e3a1"],
[data-theme="light"] pre span[style*="color: #94e2d5"],
[data-theme="light"] pre span[style*="color:#94e2d5"] { color: #059669 !important; }
[data-theme="light"] pre span[style*="color: #f9e2af"],
[data-theme="light"] pre span[style*="color:#f9e2af"],
[data-theme="light"] pre span[style*="color: #fab387"],
[data-theme="light"] pre span[style*="color:#fab387"] { color: #d97706 !important; }
[data-theme="light"] pre span[style*="color: #cba6f7"],
[data-theme="light"] pre span[style*="color:#cba6f7"],
[data-theme="light"] pre span[style*="color: #f38ba8"],
[data-theme="light"] pre span[style*="color:#f38ba8"] { color: #7c3aed !important; }
[data-theme="light"] pre span[style*="color: #cdd6f4"],
[data-theme="light"] pre span[style*="color:#cdd6f4"],
[data-theme="light"] pre span[style*="color: #bac2de"],
[data-theme="light"] pre span[style*="color:#bac2de"],
[data-theme="light"] pre span[style*="color: #a6adc8"],
[data-theme="light"] pre span[style*="color:#a6adc8"],
[data-theme="light"] pre span { color: #374151 !important; }

/* Tables - header should be light purple, not dark */
[data-theme="light"] thead,
[data-theme="light"] thead tr,
[data-theme="light"] thead th {
  background: rgba(99,102,241,0.08) !important;
  color: #111827 !important;
  border-color: rgba(99,102,241,0.15) !important;
}
[data-theme="light"] tbody td {
  background: #fafaf8 !important;
  color: #374151 !important;
  border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] tbody tr:nth-child(even) td {
  background: #f5f5f0 !important;
}

/* AI/LLM section cards with gradient overlays */
[data-theme="light"] [class*="llm"] pre,
[data-theme="light"] [class*="ai-"] pre,
[data-theme="light"] [class*="analyze"] pre {
  background: #f5f5f0 !important;
  color: #374151 !important;
}

/* The "Analyze" code demo card - has grey/gradient bg */
[data-theme="light"] [class*="analyze-demo"],
[data-theme="light"] [class*="ai-demo"],
[data-theme="light"] [class*="llm-demo"] {
  background: #fafaf8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Dashboard code wrapper - the thick dark border issue */
[data-theme="light"] .overview-section pre,
[data-theme="light"] .dashboard-card pre,
[data-theme="light"] .card pre {
  background: #f5f5f0 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
/* The wrapper div around the code block */
[data-theme="light"] .overview-section [class*="code"],
[data-theme="light"] .dashboard-card [class*="code"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Playground code panel at bottom */
[data-theme="light"] .pg-code-panel,
[data-theme="light"] .pg-code-block {
  background: #f5f5f0 !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #374151 !important;
}
[data-theme="light"] .pg-code-panel pre,
[data-theme="light"] .pg-code-block pre {
  background: #f5f5f0 !important;
  color: #374151 !important;
}

/* Install command boxes (npm i, pip install) */
[data-theme="light"] .install-cmd,
[data-theme="light"] .sdk-install-cmd,
[data-theme="light"] [class*="install"] code {
  background: #f5f5f0 !important;
  color: #374151 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Demo section - live demo widget */
[data-theme="light"] .demo { background: var(--bg-page) !important; }
[data-theme="light"] .demo-container {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .demo-controls {
  background: var(--bg-surface) !important;
  border-right-color: var(--border) !important;
}
[data-theme="light"] .demo-controls label { color: var(--text-tertiary) !important; }
[data-theme="light"] .demo-controls input { background: var(--bg-input) !important; border-color: var(--border-hover) !important; color: var(--text-primary) !important; }
[data-theme="light"] .option-buttons .btn,
[data-theme="light"] .option-btn,
[data-theme="light"] .demo-controls .btn {
  background: var(--bg-page) !important;
  border-color: var(--border) !important;
  color: var(--text-tertiary) !important;
}
[data-theme="light"] .option-buttons .btn.active,
[data-theme="light"] .option-btn.active,
[data-theme="light"] .demo-controls .btn.active {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
}
[data-theme="light"] .checkbox-option,
[data-theme="light"] .demo-checkbox {
  background: var(--bg-page) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .demo-preview {
  background: var(--bg-page) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .demo-preview-header {
  background: var(--bg-surface) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .demo-preview-placeholder { color: var(--text-muted) !important; }
[data-theme="light"] .demo-preview-placeholder svg { color: var(--text-muted) !important; opacity: 0.4 !important; }
[data-theme="light"] .demo-format-select select {
  background: var(--bg-input) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .demo-warning { color: #d97706 !important; }
[data-theme="light"] .scroll-video-btn {
  background: var(--bg-page) !important;
  border-color: var(--border) !important;
  color: var(--text-tertiary) !important;
}

/* Browser mockup in hero */
[data-theme="light"] .preview-browser {
  background: #fafaf8 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .browser-bar {
  background: #eeeee8 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .browser-dots span { opacity: 0.6 !important; }
[data-theme="light"] .browser-url { color: #6b7280 !important; background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .browser-content {
  background: #fafaf8 !important;
}
[data-theme="light"] .preview-skeleton {
  background: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .preview-badge {
  background: rgba(16,185,129,0.08) !important;
  border-color: rgba(16,185,129,0.15) !important;
  color: #059669 !important;
}

/* ============ RESTORE COLORS IN LIGHT MODE ============ */
/* Icons should keep their brand colors, not be greyed out */

/* Feature card icons - restore gradient/purple colors */
[data-theme="light"] .feature-icon,
[data-theme="light"] .feature-card .icon,
[data-theme="light"] .feature-card svg,
[data-theme="light"] .card-icon,
[data-theme="light"] [class*="icon-wrap"],
[data-theme="light"] [class*="icon-box"] {
  color: #6366f1 !important;
  opacity: 1 !important;
}
[data-theme="light"] .feature-icon svg,
[data-theme="light"] .feature-card .icon svg,
[data-theme="light"] .card-icon svg {
  color: #6366f1 !important;
  stroke: #6366f1 !important;
  opacity: 1 !important;
}

/* Icon containers with gradient backgrounds - make them vibrant */
[data-theme="light"] .feature-card .icon-container,
[data-theme="light"] .feature-icon-bg,
[data-theme="light"] [class*="icon-circle"] {
  background: rgba(99,102,241,0.1) !important;
  border-color: rgba(99,102,241,0.2) !important;
}

/* SVGs everywhere should NOT be greyed - restore their colors */
[data-theme="light"] svg { color: inherit !important; }
[data-theme="light"] svg path,
[data-theme="light"] svg circle,
[data-theme="light"] svg line,
[data-theme="light"] svg polyline,
[data-theme="light"] svg rect { stroke: inherit !important; }

/* Navigation icons */
[data-theme="light"] .nav-item svg,
[data-theme="light"] .sidebar svg { color: currentColor !important; opacity: 1 !important; }

/* Dashboard stat icons */
[data-theme="light"] .stat-icon { color: #6366f1 !important; opacity: 1 !important; }
[data-theme="light"] .stat-icon svg { color: #6366f1 !important; }

/* Checkmarks should be green */
[data-theme="light"] .check-icon,
[data-theme="light"] [class*="check"] svg,
[data-theme="light"] .pricing-features svg { color: #10b981 !important; stroke: #10b981 !important; }
[data-theme="light"] .pricing-features .check { color: #10b981 !important; }
[data-theme="light"] .pricing-features .cross { color: #ef4444 !important; }

/* Colored badges/pills - keep their colors */
[data-theme="light"] .badge-new { background: #6366f1 !important; color: #fff !important; }
[data-theme="light"] .badge-popular { background: #6366f1 !important; color: #fff !important; }
[data-theme="light"] .badge-usecase { background: rgba(99,102,241,0.08) !important; color: #4f46e5 !important; }
[data-theme="light"] .badge-tutorial { background: rgba(16,185,129,0.08) !important; color: #059669 !important; }
[data-theme="light"] .badge-guide { background: rgba(245,158,11,0.08) !important; color: #d97706 !important; }
[data-theme="light"] .badge-comparison { background: rgba(236,72,153,0.08) !important; color: #db2777 !important; }

/* Brand gradient text - keep purple */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Primary buttons keep their gradient */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
}
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}

/* CTA/action buttons */
[data-theme="light"] .capture-btn,
[data-theme="light"] .execute-btn,
[data-theme="light"] .demo-capture-btn {
  background: linear-gradient(135deg, #6366f1, #ec4899) !important;
  color: #fff !important;
}

/* Progress bars should have color */
[data-theme="light"] .progress-bar,
[data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
}
[data-theme="light"] .progress-track {
  background: rgba(99,102,241,0.1) !important;
}

/* Status indicators */
[data-theme="light"] .status-operational { color: #10b981 !important; }
[data-theme="light"] .status-dot-green { background: #10b981 !important; }
[data-theme="light"] .status-dot-red { background: #ef4444 !important; }
[data-theme="light"] .status-dot-yellow { background: #f59e0b !important; }

/* Links should be purple not grey */
[data-theme="light"] a:not(.btn):not(.nav-cta):not(.sidebar a) { color: #4f46e5 !important; }
[data-theme="light"] a:not(.btn):hover { color: #4338ca !important; }

/* Section badges - colorful */
[data-theme="light"] .section-badge {
  background: rgba(99,102,241,0.08) !important;
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,0.15) !important;
}

/* Tags */
[data-theme="light"] .tag,
[data-theme="light"] .chip { 
  background: rgba(99,102,241,0.06) !important; 
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,0.12) !important;
}

/* Emoji/icon circles on "Why SnapAPI" etc */
[data-theme="light"] [style*="border-radius: 50%"][style*="background"] {
  opacity: 1 !important;
}

/* Dashboard page specific */
[data-theme="light"] .overview-icon,
[data-theme="light"] .quick-link-icon { color: #6366f1 !important; }
[data-theme="light"] .usage-chart-bar { background: #6366f1 !important; }

/* Pricing popular card highlight */
[data-theme="light"] .pricing-card.popular {
  border: 2px solid #6366f1 !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.15) !important;
}

/* Colorful accents on cards */
[data-theme="light"] .feature-card:hover {
  border-color: rgba(99,102,241,0.2) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.08) !important;
}

/* Footer social icons */
[data-theme="light"] .social-links a svg { color: #6b7280 !important; }
[data-theme="light"] .social-links a:hover svg { color: #6366f1 !important; }

/* Undo the blanket span rule that killed icon colors */
/* Only grey out spans INSIDE pre/code, not everywhere */
[data-theme="light"] span { color: inherit !important; }
[data-theme="light"] pre span { color: #374151 !important; }
[data-theme="light"] code span { color: #374151 !important; }

/* CODE WINDOW FRAME FIX - remove dark wrapper */
[data-theme="light"] .code-window {
  background: #fafaf8 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  transform: none !important;
}
[data-theme="light"] .code-window:hover {
  transform: none !important;
}
[data-theme="light"] .code-header {
  background: #eeeee8 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .code-title { color: #6b7280 !important; }
[data-theme="light"] .code-body { background: #fafaf8 !important; }
[data-theme="light"] .code-body code { color: #374151 !important; }
[data-theme="light"] .code-body pre { background: transparent !important; border: none !important; box-shadow: none !important; }
[data-theme="light"] .code-prompt { color: #059669 !important; }
[data-theme="light"] .code-cmd { color: #2563eb !important; }
[data-theme="light"] .code-flag { color: #7c3aed !important; }
[data-theme="light"] .code-string { color: #d97706 !important; }
[data-theme="light"] .code-success { color: #059669 !important; }
[data-theme="light"] .code-key { color: #2563eb !important; }

/* Playground capture/preview area during and after capture */
[data-theme="light"] .pg-preview,
[data-theme="light"] .pg-results,
[data-theme="light"] .pg-response-area,
[data-theme="light"] .result-frame,
[data-theme="light"] .pg-preview-area,
[data-theme="light"] .pg-result-frame,
[data-theme="light"] #previewFrame,
[data-theme="light"] .pg-image-container {
  background: #f0f0ea !important;
}
[data-theme="light"] .result-loading p,
[data-theme="light"] .pg-loading-text { color: #6b7280 !important; }
[data-theme="light"] .spinner {
  border-color: rgba(99,102,241,0.15) !important;
  border-top-color: #6366f1 !important;
}
[data-theme="light"] .result-placeholder { color: #9ca3af !important; }
[data-theme="light"] .result-placeholder svg { color: #d1d5db !important; }