:root{
  --bg:#f8f5ef;
  --card:#ffffff;
  --nav:#081225;
  --primary:#ff7a00;
  --primary-dark:#e56d00;
  --text:#0f172a;
  --muted:#475569;
  --border:#ece7dc;
  --soft:#fff7ed;
}

body{
  background:var(--bg) !important;
  color:var(--text) !important;
}

header,
.site-header,
.header,
.hero{
  background:var(--nav) !important;
  color:#fff !important;
}

nav a,
.header a,
.site-header a{
  color:#fff !important;
}

h1,h2,h3{
  color:var(--text);
}

.hero h1,
.header h1{
  color:#fff !important;
}

button,
.btn,
.start-btn,
.play-btn,
.restart,
.option.correct,
a.btn,
.small-link{
  background:var(--primary) !important;
  color:#fff !important;
  border-color:var(--primary) !important;
}

button:hover,
.btn:hover,
.start-btn:hover,
.play-btn:hover,
.restart:hover,
a.btn:hover,
.small-link:hover{
  background:var(--primary-dark) !important;
  color:#fff !important;
}

.panel,
.game,
.card,
.game-card,
.hero-left,
.hero-right,
.info-card,
.level-box-pop,
.sequence-box,
.challenge,
.stats .stat,
.stat,
.badge{
  border-color:var(--border) !important;
}

.panel,
.game,
.card,
.game-card,
.hero-left,
.hero-right,
.info-card{
  background:var(--card) !important;
  box-shadow:0 18px 45px rgba(15,23,42,.08) !important;
}

.badge,
.pill,
.stat{
  background:var(--soft) !important;
  color:var(--text) !important;
}

.brand span,
.highlight,
.orange,
.stage-road b{
  color:var(--primary) !important;
}

.progress-bar,
.bar{
  background:linear-gradient(90deg,var(--primary),#fb923c,var(--nav)) !important;
}

input,
textarea,
select{
  border-color:var(--border) !important;
}

@media(max-width:900px){
  nav{gap:12px}
}