/* Landing colour unification — warm Connect preview.
   Colour-only layer: the existing landing structure and interaction contracts stay intact. */

:root {
  --bg: #F5F0E8;
  --bg-2: #ECE2D4;
  --surface: #FFFDF8;
  --surface-2: #F2E9DC;
  --ink: #171B1E;
  --muted: #6B6862;
  --line: rgba(78, 62, 43, .15);
  --line-strong: rgba(78, 62, 43, .27);
  --accent: #B9732D;
  --accent-2: #DEA665;
  --accent-soft: #F6E6D2;
  --accent-text: #8D551E;
  --green: #1A7E70;
  --blue: #315E75;
  --amber: #B9732D;
  --shadow: 0 28px 80px rgba(52, 39, 24, .12);
  --shadow-soft: 0 14px 40px rgba(52, 39, 24, .08);
}

.connect-site {
  --bg: #F5F0E8;
  --bg-2: #ECE2D4;
  --surface: #FFFDF8;
  --surface-2: #F2E9DC;
  --ink: #171B1E;
  --muted: #6B6862;
  --line: rgba(78, 62, 43, .15);
  --line-strong: rgba(78, 62, 43, .27);
  --accent: #B9732D;
  --accent-2: #DEA665;
  --accent-soft: #F6E6D2;
  --accent-text: #8D551E;
  --lp-navy: #171D22;
  --lp-on-navy: #FFF8ED;
  --lp-navy-muted: #C8C0B5;
  --lp-success: #1A7E70;
  --lp-success-soft: #E4F3EE;
}

html[data-theme="dark"] {
  --bg: #0E1418;
  --bg-2: #141C21;
  --surface: #171F24;
  --surface-2: #1E282E;
  --ink: #F7F0E7;
  --muted: #B7B0A7;
  --line: rgba(245, 219, 184, .12);
  --line-strong: rgba(245, 219, 184, .24);
  --accent: #D9924E;
  --accent-2: #F0BF80;
  --accent-soft: rgba(217, 146, 78, .13);
  --accent-text: #F0BF80;
  --green: #52C6B3;
  --blue: #8AB6C9;
  --amber: #E7AE69;
  --shadow: 0 30px 90px rgba(0, 0, 0, .42);
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .connect-site {
  --bg: #0E1418;
  --bg-2: #141C21;
  --surface: #171F24;
  --surface-2: #1E282E;
  --ink: #F7F0E7;
  --muted: #B7B0A7;
  --line: rgba(245, 219, 184, .12);
  --line-strong: rgba(245, 219, 184, .24);
  --accent: #D9924E;
  --accent-2: #F0BF80;
  --accent-soft: rgba(217, 146, 78, .13);
  --lp-navy: #0A1014;
  --lp-on-navy: #FFF8ED;
  --lp-navy-muted: #B9B2A9;
  --lp-success: #52C6B3;
  --lp-success-soft: rgba(82, 198, 179, .12);
}

/* Brand atmosphere: champagne light, graphite depth, teal only as a micro-accent. */
body.connect-site::before {
  display: block !important;
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 78% 4%, rgba(218, 169, 110, .19), transparent 68%),
    radial-gradient(760px 480px at 8% 22%, rgba(255, 255, 255, .76), transparent 70%),
    linear-gradient(180deg, #FAF6EF 0%, #F4EDE3 46%, #EFE5D7 100%);
}

html[data-theme="dark"] body.connect-site::before {
  background:
    radial-gradient(820px 520px at 76% 8%, rgba(217, 146, 78, .14), transparent 68%),
    radial-gradient(640px 420px at 10% 18%, rgba(82, 198, 179, .055), transparent 72%),
    linear-gradient(180deg, #0D1317 0%, #10171B 54%, #0A1014 100%);
}