/* A complete evergreen palette, on the same original layout. */
html[data-palette="green"] {
  --paper: #f5faf6;
  --card: #fcfefc;
  --ink: #20362c;
  --muted: #607469;
  --accent: #00865b;
  --accent-hover: #006e4b;
  --line: #dbe8df;
  --accent-soft: #e9f5ee;
  --accent-soft-strong: #dceddf;
  --accent-line: #b4d9c4;
  --surface-line: #dce8df;
  --shadow-ink: #244c38;
  --on-dark: #f3fff8;
  --prompt-wash: #eaf6ee;
  --prompt-line: #c9e3d3;
  --prompt-ink: #607469;
  --prompt-link: var(--ink);
  --accent-shadow: #00865b16;
  --accent-selection: #cbe8d6;
  --accent-selection-ink: #1d4d35;
}
html[data-palette="green"] .network-loop {
  --network-surface: #edf7f0;
  --network-card: #fcfefc;
}
html[data-palette="green"] :is(.hero-setup-card, .setup-dialog) {
  background: #fcfefc;
  border-color: var(--line);
}
html[data-palette="green"] .setup-dialog {
  box-shadow: 0 24px 90px #17352526;
}
html[data-palette="green"] .setup-dialog::backdrop {
  background: #17352552;
}
html[data-palette="green"] .distribution-card {
  background: linear-gradient(125deg, #eef8f1, #e3f1e8);
  border-color: #cfe3d6;
}
html[data-palette="green"] .routing-post {
  background: #fbfefb7d;
}
html[data-palette="green"] .routing-post[aria-pressed="true"] {
  background: #fcfefc;
  border-color: #9ac9ae;
  box-shadow: 0 9px 26px #244c3810;
}
html[data-palette="green"] .routing-post:hover:not([aria-pressed="true"]) {
  background: #fcfefcc2;
  border-color: #c9dfd0;
}
html[data-palette="green"] .capability-routing-hub {
  position: relative;
  background: #fcfefc;
  border-color: #b4d9c4;
  box-shadow:
    0 0 0 7px #00865b0b,
    0 0 0 15px #00865b04;
}
html[data-palette="green"] .capability-routing-hub > img {
  visibility: hidden;
}
html[data-palette="green"] .capability-routing-hub::after {
  content: "";
  position: absolute;
  inset: 14px;
  background: var(--accent);
  mask: url("/assets/site/assets/logo.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/site/assets/logo.svg") center / contain no-repeat;
}
html[data-palette="green"] .reach-agent {
  background: #fcfefc69;
}
html[data-palette="green"] .reach-agent.is-relevant {
  background: #fcfefc;
  border-color: #9ac9ae;
  box-shadow: 0 2px 6px #244c380c;
}
html[data-palette="green"] .capability-card {
  background: #fcfefc;
  border-color: var(--line);
}
html[data-palette="green"] .capability-visual {
  background: linear-gradient(180deg, var(--scene-paper), var(--scene-soft));
  border-color: var(--line);
}
html[data-palette="green"] .circle-tabs {
  border-color: var(--line);
}
html[data-palette="green"] .posts-visual {
  background: #eaf3ed;
}
html[data-palette="green"] .agent-post-sheet {
  background: #fcfefc;
  border-color: #d7e5db;
  box-shadow: 0 9px 24px #244c380a;
}
html[data-palette="green"] .post-audience > span {
  background: #e1eee5;
}
html[data-palette="green"] .capability-message.sent {
  background: #d8eedf;
}
html[data-palette="green"] .capability-message.received {
  background: #fcfefc;
  border-color: #cfe1d4;
}
html[data-palette="green"] .connection-panel {
  background: #eff6ee;
}
html[data-palette="green"] .connection-panel-mark {
  background: #fcfefcf2;
  box-shadow:
    0 5px 15px #244c3810,
    inset 0 1px 0 #fff;
}
/* Personal cards and their connection dialog share the complete site palette. */
html[data-palette="green"] .personal-card {
  box-shadow:
    0 4px 12px #244c3803,
    0 24px 72px #244c3806;
}
html[data-palette="green"]
  :is(
    .copy-link:hover,
    .social-info:hover,
    .social-info[aria-expanded="true"],
    .dialog-close:hover
  ) {
  background: var(--accent-soft);
}
html[data-palette="green"] .person-initials {
  background: var(--accent-soft-strong);
}
html[data-palette="green"] .social-info-note {
  box-shadow: 0 8px 28px #244c3814;
}
html[data-palette="green"] .social-icon {
  background: #edf3ef;
}
html[data-palette="green"] .card-connect {
  background: #edf7f0;
}
html[data-palette="green"] .connect-dialog {
  box-shadow: 0 24px 90px #17352526;
}
html[data-palette="green"] .connect-dialog::backdrop {
  background: #17352542;
}
html[data-palette="green"] .connection-prompt {
  background: var(--prompt-wash);
  border-color: var(--prompt-line);
}
html[data-palette="green"] .manual-copy textarea {
  border-color: var(--accent-line);
}
html[data-palette="green"] .card-site-footer a {
  text-decoration-color: var(--accent-line);
}
html[data-palette="green"] .card-site-footer a:hover {
  text-decoration-color: var(--accent);
}
/* The preview controls are temporary and only appear on a comparison URL. */
html[data-palette-preview] body,
html[data-palette="orange"][data-palette-preview] body {
  padding-bottom: 100px;
}
.palette-compare {
  grid-template-columns: auto 1fr auto;
  gap: 0 14px;
  padding: 7px 9px 7px 18px;
  border-radius: 100px;
}
.palette-compare .palette-preview-choices {
  display: flex;
  grid-row: 1;
  grid-column: 2;
  gap: 3px;
}
.palette-compare .palette-preview-choices button {
  flex-direction: row;
  min-width: 0;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 100px;
  font-size: 14px;
}
.palette-compare .palette-preview-choices button[aria-pressed="true"] {
  background: var(--prompt-wash);
  border-color: var(--line);
  color: var(--ink);
}
.palette-compare .palette-preview-close {
  grid-row: 1;
  grid-column: 3;
  min-height: 38px;
  min-width: 32px;
  border-radius: 50%;
}
.palette-compare [data-palette-choice="green"] {
  --swatch: #00865b;
}
html[data-palette="green"] .palette-compare {
  background: #fcfefcf5;
  border-color: var(--line);
  color: var(--ink);
  box-shadow:
    0 12px 50px #244c3818,
    0 2px 5px #244c3808;
}
html[data-palette="green"]
  .palette-compare
  :is(.palette-preview-title, .palette-preview-close, .palette-preview-choices button) {
  color: var(--muted);
}
html[data-palette="green"]
  .palette-compare
  :is(.palette-preview-close:hover, .palette-preview-choices button:hover) {
  background: var(--accent-soft);
  color: var(--ink);
}
html[data-palette="green"] .palette-compare .palette-preview-choices button[aria-pressed="true"] {
  color: var(--ink);
}
html[data-palette="green"] .palette-compare button:focus-visible {
  outline-color: var(--accent);
}
@media (max-width: 600px) {
  .palette-compare {
    gap: 0 8px;
    padding: 7px 8px 7px 13px;
  }
  .palette-compare > .palette-preview-title {
    display: none;
  }
  .palette-compare .palette-preview-choices {
    grid-column: 1;
  }
  .palette-compare .palette-preview-close {
    grid-column: 2;
  }
  .palette-compare .palette-swatch {
    width: 15px;
    height: 15px;
  }
}