.head-cta { gap: 12px; }
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.theme-switch:hover { border-color: var(--lime); color: var(--lime); }

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #142742;
  --red: #c52c45;
  --red-soft: #fff0f2;
  --blue: #204fc5;
  --blue-deep: #173c99;
  --blue-soft: #edf3ff;
  --soft: #f6f8fc;
  --muted: #485970;
  --line: #d6deea;
  --surface: #ffffff;
  --lime: var(--blue);
  --card-title: var(--ink);
  --card-copy: var(--muted);
  --card-tag-ink: #385373;
  --card-tag-bg: #eef3fa;
  background: #fff;

  & body { background: #fff; color: var(--ink); }
  & ::selection { background: #cddfff; color: #132c60; }
  & header, & .head nav.open { background: #fff; border-color: var(--line); }
  & .brand svg, & .trust-box > svg { color: var(--red); }
  & .head nav a { color: var(--muted); }
  & .head nav a.active, & .head nav a:hover { color: var(--blue); }
  & .head nav a.active::before, & .kicker i, & .mini i, & .callout i { background: var(--red); }
  & .btn, & .wa-bubble, & .skip { color: #fff; background: var(--blue); }
  & .btn:hover, & .wa-bubble:hover { background: var(--blue-deep); }
  & .btn.secondary, & .menu { color: var(--ink); background: #fff; border-color: #b8c7dc; }
  & .btn.secondary:hover, & .theme-switch:hover { color: var(--blue); background: var(--blue-soft); border-color: #93b0ec; }
  & .hero {
    background: radial-gradient(ellipse at 83% 59%,#e2ecff 0%,transparent 49%),
      linear-gradient(111deg,#fff 23%,#f8faff 67%,#f3f6fe);
  }
  & .hero-grid, & .stage::before {
    background-image: linear-gradient(#5275bd17 1px,transparent 1px), linear-gradient(90deg,#5275bd17 1px,transparent 1px);
  }
  & .hero h1, & .intro h1 { color: #14233f; }
  & .kicker, & .mini { color: #465a77; }
  & .hero .kicker { background: #fff3f4; border-color: #eccbd1; color: #a12439; }
  & .hero .kicker i { box-shadow: 0 0 7px #d3334730; }
  & .halo { background: radial-gradient(ellipse,#8cabf244,transparent 70%); }
  & .processor { filter: drop-shadow(0 20px 16px #273e681c); }
  & .orbit { border-color: #748ac650; }
  & .axis { background: #8a9abd22; }
  & .cross { color: #7289a9; }
  & .callout { color: #354c70; background: #fffffff2; border-color: #bccce4; }
  & .callout::after { background: #889bb8; }
  & .proof, & .proof svg { color: #435b77; }
  & .proof b { background: #bac7d9; }
  & .toolbelt, & .university, & footer { background: var(--soft); border-color: var(--line); }
  & .belt-actions a, & .text-link { color: var(--blue); }
  & .belt-actions button, & .uni-list, & .form-card, & .wapanel {
    background: #fff; border-color: var(--line); color: var(--ink);
  }
  & .card { background: #fff; border-color: var(--line); box-shadow: 0 3px 16px #183a7907; }
  & .card:hover { border-color: #95b0e0; }
  & .service-ico { background: var(--blue-soft); color: var(--blue); border-color: #c8d8f8; }
  & .card:nth-child(3n + 2) .service-ico { color: var(--red); background: var(--red-soft); border-color: #f1cfd5; }
  & .card-arrow { color: #627591; }
  & .card-arrow:hover { color: var(--blue); }
  & .tabs button, & .filters button { color: #39506d; border-color: #c7d1e1; background: #fff; }
  & .tabs button.chosen, & .filters button.chosen { color: #1540a3; background: var(--blue-soft); border-color: #96b1e8; }
  & .uni-list li { color: var(--ink); border-color: var(--line); }
  & .uni-list li svg, & .steps svg { color: var(--blue); }
  & .deliverable b, & .contact-aside a b { color: var(--ink); }
  & .search, & .contact-aside, & .trust-box { background: var(--soft); border-color: var(--line); color: var(--ink); }
  & .search input, & .form-card label { color: var(--ink); }
  & input::placeholder, & textarea::placeholder { color: #62728a; opacity: 1; }
  & .tool-items span, & .ref { color: #364b6c; background: #eef3fa; }
  & summary span, & .form-card label small, & .footlinks, & .foot small,
  & .years span, & .contact-aside a span { color: #4a5e79; }
  & .about-block { background: radial-gradient(ellipse at 0% 60%,#e3ecff,transparent 62%),var(--soft); border-color: var(--line); }
  & .years strong, & .lime { color: var(--red); }
  & .steps > div { border-color: #bccce4; }
  & .form-card input, & .form-card select, & .form-card textarea { color: var(--ink); background: #fff; border-color: #afbed2; }
  & .error { color: #a52237; }
  & .wa-bubble { border-color: var(--blue-deep); box-shadow: 0 4px 15px #133c842e; }
  & .wapanel { box-shadow: 0 9px 32px #19366228; }
  & .wapanel a { color: var(--blue); }
  /* These monochrome marks use pale ink in the original dark-theme assets. */
  & .tool-logo:is([src$="/bash.svg"],[src$="/express.svg"],[src$="/flask.svg"],
    [src$="/framermotion.svg"],[src$="/github.svg"],[src$="/json.svg"],[src$="/unifiedmodelinglanguage.svg"]) {
    filter: brightness(.2);
  }
}
@media (max-width: 700px) {
  .head { gap: 10px; }
  .head-cta { gap: 7px; }
  .theme-switch { width: 35px; min-height: 35px; padding: 0; }
  .theme-switch span { display: none; }
}
/* Maintain the monochrome silhouettes' contrast on the unframed logo strip. */
:root[data-theme="dark"] .belt-mark .tool-logo:is([src$="/flask.svg"], [src$="/bash.svg"], [src$="/vmware.svg"]) {
  filter: brightness(0) invert(.92);
}
:root[data-theme="light"] .belt-mark .tool-logo[src$="/mitreattack.png"] {
  filter: brightness(.22);
}