/* Blue-black Routey palette. Keep this file color-only so the original layout stays intact. */
:root {
  color-scheme: dark;
  --bg-rgb: 9,14,23;
}

body.light {
  color-scheme: light;
  --bg-rgb: 242,245,250;
}

html, body, .screen { background-color: var(--bg); color: var(--text); }
.navbar, .mobile-nav { background-color: var(--bg2); border-color: var(--border); }
.nav-logo-mark { background: var(--blue); box-shadow: 0 4px 14px rgba(91,150,247,.24); }
.nav-logo-text { color: var(--text); -webkit-text-fill-color: currentColor; }
.nav-link::after { background: var(--blue); }
.nav-link.active, .nav-link:hover, .mnav-btn.active, .mnav-btn:hover { color: var(--blue); }
.mnav-btn.active .mnav-icon { color: var(--blue); background: rgba(91,150,247,.12); }

#screen-landing { background-color: var(--bg); }
.hero-label { background: rgba(91,150,247,.10); border-color: rgba(91,150,247,.24); color: var(--indigo); }
.hero-dot { background: var(--blue); box-shadow: 0 0 10px rgba(91,150,247,.35); }
.hero-title { color: var(--text); }
.hero-grad {
  background: linear-gradient(120deg,#75a9ff,#b4d2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { color: var(--text2); }
.btn-cta-main, .hero-cta .btn-cta-main, .hero-cta button:first-child {
  background: var(--grad);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(55,120,219,.28);
}
.btn-cta-sec, .hero-cta button + button {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border2);
}
.stats-bar { background: var(--card); border-color: var(--border); }
.stats-bar-item { border-color: var(--border); }
.stats-bar-n { background: none; color: var(--blue); -webkit-text-fill-color: currentColor; }
.features-heading { background: var(--bg2); border-color: var(--border); }
.feat, .dash-card, .dash-profile-card, .sett-card, .plan-card, .q-card, .choice,
.tts-player, .chat-bubble, .chat-msg-bubble, .rm-chapter {
  background-color: var(--bg2);
  border-color: var(--border);
}
.feat-icon, .mhome-action-icon { background-color: rgba(91,150,247,.12); }
.feat-icon svg { fill: var(--blue); }
input, textarea, select, .form-inp { background-color: var(--bg2); border-color: var(--border2); color: var(--text); }
.form-inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91,150,247,.15); }

.hero-cta button, .btn-form, .btn-next, .exam-start-button, .buy-btn, .pay-btn,
.primary-button, .mobile-primary-action, .chat-send, .chat-send-button,
.chat-mode.active, .lesson-start, .learn-tab.active, .tab-button.active,
.mhome-continue {
  background: var(--grad);
  border-color: var(--blue);
  color: #fff;
}
.map-prog-fill, .node-bar-fill, .node-connector, .sb-level-badge,
.sb-level-dot, .xp-bar-fill { background: var(--blue); }
.rm-cat-tab.active { border-color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.rm-cat-section,
.rm-zone-signs, .rm-zone-priority, .rm-zone-speed, .rm-zone-danger,
.rm-zone-safety, .rm-zone-cross, .rm-zone-highway, .rm-zone-maneuver,
.rm-zone-lights, .rm-zone-expert { --zone-clr: var(--blue); }
/* Keep the journey’s dimensional blue and green stage markers. */
.mhome-actions button, .mhome-daily { background: var(--bg2); border-color: var(--border); }
.mobile-section-icon.purple, .mobile-section-icon.blue, .mobile-section-icon.red,
.mobile-section-icon.amber, .mobile-section-icon.green, .mobile-section-icon.orange {
  background-color: rgba(91,150,247,.12);
}

body.light .navbar, body.light .mobile-nav { background-color: #f2f5fa; border-color: var(--border); }
body.light .hero-grad { background-image: linear-gradient(120deg,#2458b8,#3978db); }
body.light .mnav-btn.active .mnav-icon { background: rgba(36,88,184,.12); }
body.light .feat, body.light .dash-card, body.light .dash-profile-card,
body.light .sett-card, body.light .plan-card, body.light .q-card,
body.light .choice, body.light .tts-player, body.light .chat-bubble,
body.light .chat-msg-bubble, body.light .rm-chapter { background-color: #fff; }