/* Bond palette. One warm theme for every public page.
   Scoped to body.bond-site so the console keeps its own tokens. */

html[data-theme="dark"] body.bond-site,
body.bond-site {
  --bg: #100e0c;
  --bg-well: #16130f;
  --surface: #1c1814;
  --elev-2: #262119;
  --elev-3: #312b22;
  --ink: #f6f1e8;
  --ink-dim: #ddd4c6;
  --ink-mute: #c9bfb0;
  --ink-faint: #b7ad9e;
  --accent: #e7c98a;
  --accent-strong: #f3ddb0;
  --accent-deep: #c4a36a;
  --accent-glow: rgba(231, 201, 138, 0.45);
  --accent-soft: rgba(231, 201, 138, 0.14);
  --success: #8fd4ae;
  --success-glow: rgba(143, 212, 174, 0.35);
  --warn: #e2b15a;
  --danger: #f07178;
  --info: #e7c98a;
  --line: rgba(246, 241, 232, 0.14);
  --line-2: rgba(246, 241, 232, 0.07);
  --line-3: rgba(246, 241, 232, 0.22);
  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.85);
  --sh-3: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -36px rgba(0, 0, 0, 0.9);
  --glow-accent: 0 0 0 1px rgba(231, 201, 138, 0.35), 0 0 32px rgba(231, 201, 138, 0.16);
  --grad-brand: linear-gradient(100deg, #f6f1e8 0%, #e7c98a 100%);
}

html[data-theme="light"] body.bond-site {
  --bg: #f4efe6;
  --bg-well: #fffdf8;
  --surface: #fffdf8;
  --elev-2: #fffdf8;
  --elev-3: #fffdf8;
  --ink: #1c1915;
  --ink-dim: #3f3a33;
  --ink-mute: #5c564c;
  --ink-faint: #5c564c;
  --accent: #6b4510;
  --accent-strong: #3f2808;
  --accent-deep: #3f2808;
  --accent-glow: rgba(107, 69, 16, 0.28);
  --accent-soft: rgba(107, 69, 16, 0.08);
  --success: #0d6848;
  --warn: #8a5a08;
  --danger: #9f1239;
  --info: #6b4510;
  --line: rgba(28, 25, 21, 0.12);
  --line-2: rgba(28, 25, 21, 0.06);
  --line-3: rgba(28, 25, 21, 0.2);
  --sh-1: 0 1px 2px rgba(28, 25, 21, 0.05);
  --sh-2: 0 12px 32px -20px rgba(28, 25, 21, 0.18);
  --sh-3: 0 30px 70px -32px rgba(28, 25, 21, 0.28);
  --glow-accent: 0 0 0 1px rgba(107, 69, 16, 0.2);
  --grad-brand: linear-gradient(100deg, #1c1915 0%, #6b4510 100%);
}

body.bond-site .brand .mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: url("/design/mark.svg") center / cover no-repeat;
}

body.bond-site .atmos-aurora,
body.bond-site .atmos-stars,
body.bond-site .vignette,
body.bond-site .bg-orb,
body.bond-site .bg-grain {
  display: none;
}

/* Names older pages already use, pointed at the Bond palette. */
body.bond-site {
  --dim: var(--ink-mute);
  --dim2: var(--ink-faint);
  --hair: var(--line);
  --hair2: var(--line-2);
  --surface2: var(--elev-2);
  --surface3: var(--elev-3);
  --indigo: var(--ink);
  --indigo2: var(--accent);
  --teal: var(--success);
  --lock: var(--success);
  --ember: var(--warn);
  --glow: var(--accent-glow);
  --good: var(--success);
  --bad: var(--danger);
  --brand: var(--accent);
  --brand-2: var(--accent);
  --ink-2: var(--ink-dim);
  --panel: var(--surface);
  --panel-2: var(--elev-2);
  font-family: var(--font-sans, "Geist", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* v2.1 review follow-ups (Oct 2). Scoped, so they only touch the page they name.
   Taken from fix/website-v2.1-review (bd6aee4). */

/* Inner pages don't load home.css, so the skip link sat visible top-left. */
body.bond-site .skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
  border-radius: 10px;
}
body.bond-site .skip:focus { transform: none; }

/* 390px: long code and grid children shrink instead of widening the page. */
body.bond-site .split > *,
body.bond-site .feat > * { min-width: 0; }
body.bond-site pre { max-width: 100%; overflow-x: auto; }
body.bond-site .cli { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }

/* Old purple left on verify, developers and the sign-in button. */
body.bond-site .verify-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--sh-2);
}
body.bond-site .step .s-n { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
body.bond-site .av-col.we {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
body.bond-site .submit {
  background: var(--ink);
  color: var(--bg);
}
body.bond-site .submit:hover { box-shadow: var(--sh-2); }

/* Home: balanced headlines, no "it?" / "in?" orphans at 1440. */
body.bond-home .display .line,
body.bond-home h2 { text-wrap: balance; }
@media (min-width: 900px) {
  body.bond-home .display { font-size: clamp(2.7rem, 1rem + 3.7vw, 4.6rem); }
}
/* Home: the Example tag on the Paid card stretched across the whole card. */
body.bond-home .paid-card .bond-card-flag {
  display: inline-block;
  width: fit-content;
}
/* Home hero phone: Approve was dark ink on a dark card; it now reads, and turns green when approved. */
body.bond-home .phone-live .approve-chip {
  background: #f6f1e8;
  color: #1c1915;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
body.bond-home .phone-live.is-paid .approve-chip {
  background: #8fd4ae;
  color: #10241a;
  filter: none;
}