:root {
  --cream: #ebe9e1;
  --paper: #f7f5ef;
  --orange: #e43d12;
  --rose: #d6536d;
  --pink: #ffa2b6;
  --gold: #efb11d;
}

body.stage {
  color: var(--orange);
  background-color: var(--cream);
  background-image: none;
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}

body.stage h1,
body.stage h2,
body.stage h3,
body.stage .display,
body.stage .figure {
  font-family: Fraunces, Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 560;
  letter-spacing: -0.025em;
}

body.stage .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

body.stage .text-white,
body.stage .text-zinc-300,
body.stage .text-zinc-400,
body.stage .text-zinc-500,
body.stage .hover\:text-white:hover { color: var(--orange); }
body.stage .text-emerald-300 { color: var(--rose); }
body.stage .text-red-300 { color: var(--rose); }
body.stage .border-white\/10,
body.stage .border-dashed { border-color: rgba(228, 61, 18, 0.16); }
body.stage .bg-white\/10 { background-color: rgba(228, 61, 18, 0.06); }
body.stage .bg-zinc-950 { background-color: var(--paper); color: var(--orange); }

body.stage > header {
  background: var(--cream);
  border-bottom-color: rgba(228, 61, 18, 0.12);
  box-shadow: none;
}
body.stage > header .mark,
body.stage > header a,
body.stage > header .text-zinc-400,
body.stage > header .text-white {
  color: var(--orange);
}
body.stage > header a:hover { color: var(--rose); }

.mark,
.display,
.figure {
  background: none;
  color: var(--orange);
  filter: none;
}

.cta {
  background: var(--orange);
  color: var(--cream);
  box-shadow: none;
}
.cta:hover { filter: brightness(1.06); }

.badge {
  background: var(--pink);
  color: var(--orange);
  box-shadow: none;
}

.panel,
.panel-gold,
.panel-rose,
.panel-ember {
  background: var(--paper);
  border: 1px solid rgba(228, 61, 18, 0.1);
  box-shadow: none;
}

.tone-a,
.tone-b,
.tone-c,
.tone-num,
.tone-metric { color: var(--orange); }

.track { background: rgba(228, 61, 18, 0.1); }
.heat { background: var(--gold); box-shadow: none; }
.heat-dim { background: var(--rose); box-shadow: none; }

.pill {
  background: var(--paper);
  color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(228, 61, 18, 0.22);
}
.pill:hover { background: var(--pink); }
.pill-on {
  background: var(--orange);
  color: var(--cream);
  box-shadow: none;
}

.field {
  background: var(--paper);
  color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(228, 61, 18, 0.22);
}
.field:focus { box-shadow: inset 0 0 0 1px var(--orange); }

.shop-card {
  background: var(--paper);
  border: 1px solid rgba(228, 61, 18, 0.1);
}
.shop-fail {
  background: rgba(239, 177, 29, 0.35);
}
.shop-muted { opacity: 0.55; }
.tag-stop {
  background: var(--pink);
  color: var(--orange);
}
.tag-done {
  background: rgba(228, 61, 18, 0.08);
  color: var(--orange);
}
.step-now {
  background: var(--gold);
  color: var(--orange);
}
.step-wait {
  background: transparent;
  color: var(--orange);
  opacity: 0.45;
  box-shadow: inset 0 0 0 1px rgba(228, 61, 18, 0.2);
}
.shop-shot {
  width: 100%;
  max-height: 28rem;
  object-fit: contain;
  object-position: top;
  background: var(--cream);
}