:root {
  --qsp-orange: #f5861f;
  --qsp-orange-light: #fff1e3;
  --qsp-navy: #002248;
  --qsp-navy-light: #123b64;
  --qsp-ink: #202124;
  --qsp-muted: #596579;
  --qsp-paper: #f6f6f6;
  --qsp-line: #e5e7eb;
  --navy: #002248;
  --navy2: #123b64;
  --teal: #f5861f;
  --gold: #ff512f;
  --ink: #202124;
  --white: #202124;
  --muted: #596579;
  --paper: #f6f6f6;
  --line: #e5e7eb;
  --bg: #f6f6f6;
  --panel: #fff;
  --panel2: #fff7f0;
}

body {
  background: var(--qsp-paper);
  color: var(--qsp-ink);
}

body > header,
.nav {
  background: var(--qsp-navy);
  border-color: #ffffff24;
  color: #fff;
}

.nav {
  background: #002248f2;
}

.hero,
header.hero {
  background:
    radial-gradient(circle at 85% 12%, #f5861f50, transparent 30%),
    linear-gradient(125deg, var(--qsp-navy), var(--qsp-navy-light));
  color: #fff;
}

.hero .eyebrow,
.eyebrow {
  color: var(--qsp-orange);
}

.hero h1,
.hero h2,
.hero h3 {
  color: #fff;
}

.hero p,
.hero .sub {
  color: #e3eaf3;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 78px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand small {
  color: #d0d9e8;
}

.nav .brand,
.nav a.nl,
.nav button.nl {
  color: #fff;
}

.nav .brand {
  color: #ffad5c;
}

.nav a.nl:hover,
.nav button.nl:hover,
.nav button.nl[aria-expanded="true"] {
  background: #ffffff1f;
}

.topnote {
  background: var(--qsp-orange-light);
  border-color: var(--qsp-orange);
  color: var(--qsp-navy);
}

.placement-page .hero {
  background: transparent;
}

.placement-page .eyebrow {
  color: #a84316;
}

.hero-copy {
  background: #fff;
  border-color: var(--qsp-line);
  color: var(--qsp-ink);
}

.hero-copy .eyebrow {
  color: #a84316;
}

.hero-copy h2 {
  color: var(--qsp-ink);
}

.hero-copy p {
  color: var(--qsp-muted);
}

.menu {
  background: #fff;
  color: var(--qsp-ink);
  border-color: var(--qsp-line);
  box-shadow: 0 18px 40px #00224824;
}

.menu a:hover,
.menu a:focus-visible {
  background: var(--qsp-orange-light);
}

.chooser,
.card,
.module,
.metric,
.path,
.project,
.skill,
.batch {
  background: #fff;
  border-color: var(--qsp-line);
  color: var(--qsp-ink);
}

.card,
.module {
  box-shadow: 0 4px 18px #0022480d;
}

.card p,
.sub,
.fine,
.small,
.project p {
  color: var(--qsp-muted);
}

.topic,
.dsa-item,
.pill,
.tag {
  background: #fff7f0;
  border-color: #f4d5ba;
  color: #7a3a08;
}

.common span {
  background: #fff1e3;
  border-color: #f5861f;
  color: #002248;
}

#roundingNote,
.calc-grid .note {
  background: #fff1e3;
  border: 1px solid #f5861f;
  border-left: 4px solid #f5861f;
  border-radius: 10px;
  color: #002248;
  padding: 12px 14px;
}

.num {
  background: #fff1e3;
  color: #a54f06;
}

.project-stat,
.dsa-item,
.skill,
.batch {
  background: #fffaf6;
  border-color: #f4d5ba;
}

.project-stat strong,
.dsa-item strong,
.statnum,
.count,
.spot,
.metric .highlight,
.urgent {
  color: #b95d0b;
}

.metric b {
  color: var(--qsp-ink);
}

.cta p,
.cta > div {
  color: var(--qsp-ink) !important;
}

.cta .urgent {
  color: #a84316 !important;
}

.note {
  background: linear-gradient(120deg, var(--qsp-navy), var(--qsp-navy-light));
  color: #fff;
}

.note b {
  background: var(--qsp-orange);
  color: var(--qsp-navy);
}

.stat span,
.statlabel,
.statsecond strong {
  color: #344159;
}

.btn.primary,
.download-btn,
.tab.active,
.batch h3 {
  background: var(--qsp-orange);
  border-color: var(--qsp-orange);
  color: var(--qsp-navy);
}

.btn.gold {
  background: var(--qsp-navy);
  border-color: var(--qsp-navy);
  color: #fff;
}

.btn.secondary {
  border-color: #ffffff70;
  background: #ffffff12;
  color: #fff;
}

.tab,
.toolbar button,
.action {
  background: #fff;
  border-color: var(--qsp-line);
  color: var(--qsp-ink);
}

input,
select,
.toolbar input,
.toolbar select {
  background: #fff;
  border-color: #d5d9e0;
  color: var(--qsp-ink);
}

input:focus,
select:focus,
.toolbar input:focus,
.toolbar select:focus {
  border-color: var(--qsp-orange);
}

.notice,
.callout {
  background: #fff7f0;
  border-color: #f4d5ba;
  color: #5b3b20;
}

.strip.place,
.strip.emi,
.cta {
  background: linear-gradient(120deg, #fff1e3, #fffaf6);
  border-color: #f4d5ba;
}

.hero-stat {
  background: linear-gradient(135deg, #f5861f, #f9a34f);
  border-color: #f4d5ba;
}

.hero-stat .statnum,
.hero-stat .statsecond strong,
.hero-stat .statlabel,
.hero-stat .fine {
  color: var(--qsp-navy);
}

.hero .stats .stat,
.project-stats .project-stat {
  display: flex;
  min-height: 100px;
  flex-direction: column;
  justify-content: center;
  border-color: var(--qsp-orange);
  background: var(--qsp-orange-light);
  text-align: center;
}

.hero .stats .stat strong,
.hero .stats .stat span,
.project-stats .project-stat strong,
.project-stats .project-stat span {
  color: var(--qsp-navy);
}

.callout {
  border-left-color: var(--qsp-orange);
}

.pill.teal,
.tag.teal {
  background: #fff1e3;
  border-color: #f4d5ba;
  color: #8a4307;
}

.card.match {
  border-color: var(--qsp-orange);
  box-shadow:
    0 0 0 2px #f5861f33,
    0 8px 24px #00224812;
}

.badge {
  background: var(--qsp-orange);
  color: var(--qsp-navy);
}

table {
  background: #fff;
  color: var(--qsp-ink);
}

th {
  background: #fff1e3;
  color: #5b3b20;
}

th,
td {
  border-color: var(--qsp-line);
}

td strong {
  color: var(--qsp-ink);
}

footer,
.footer {
  box-sizing: border-box;
  width: 100%;
  margin-top: 24px;
  background: var(--qsp-navy);
  border-color: #ffffff24;
  color: #d0d9e8;
  line-height: 1.6;
  text-align: center;
}

footer strong,
.footer strong {
  color: #ffad5c;
}

:focus-visible {
  outline-color: var(--qsp-orange);
}

@media print {
  body {
    background: #fff !important;
    color: #202124 !important;
  }

  footer,
  .footer {
    background: #fff !important;
    border-top: 1px solid #aaa;
    color: #333;
  }
}