/* Dark theme — activated by data-theme="dark" on */ /* Initial state: JS reads prefers-color-scheme on load and sets data-theme accordingly */ html[data-theme="dark"] { --white: #1a1d21; --bg-light: #121417; --hero-start: #1a1d21; --hero-end: #121417; --emergency-start: #1a1d21; --emergency-end: #121417; --bg-light-dark: #0f1113; --teal: #5c85d1; --teal-light: #8aa2e0; --gray-metallic: #a0a3a5; --input-border: #2d3136; } html[data-theme="dark"] body { color: #e1e5e8; background: var(--white); } html[data-theme="dark"] .logo span, html[data-theme="dark"] .header-phone, html[data-theme="dark"] .hero h1, html[data-theme="dark"] .scenario-title, html[data-theme="dark"] .section-title { color: #e1e5e8; } html[data-theme="dark"] .scenario-card { background: rgba(30, 34, 39, 0.85); border-color: rgba(92, 133, 209, 0.2); } html[data-theme="dark"] .scenario-desc, html[data-theme="dark"] .trust-badge, html[data-theme="dark"] .back-link, html[data-theme="dark"] .service-subtitle { color: var(--gray-metallic); } html[data-theme="dark"] .btn-glass { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.1); color: #e1e5e8; } html[data-theme="dark"] .btn-light { background: linear-gradient(135deg, #2d3136 0%, #1a1d21 100%); color: #e1e5e8; } html[data-theme="dark"] .btn-success-state { background: #1a1d21; color: #e1e5e8; } html[data-theme="dark"] .header { background: #1a1d21; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }