/*
 * Vybe — public site.
 *
 * Every value here is transcribed from frontend/mobile/src/theme/tokens.ts. The site exists to be
 * recognised by someone who has just installed the app, so it borrows the app's identity rather
 * than inventing a second one. If a token changes there, it changes here — this file is downstream.
 *
 * Deliberately single-theme. Vybe has no dark mode; a site that inverted would stop looking like
 * the product. Every colour is therefore painted explicitly rather than inherited from the host.
 */

:root {
  /* Neutrals */
  --canvas: #E7DFD8;
  --surface: #FFFCFA;
  --surface-warm: #FFF4EF;
  --surface-subtle: #FBF3EE;
  --fill: #F4ECE7;
  --hairline: #EFE6E0;
  --border: #E2D8D0;

  /* Ink */
  --ink: #2A2320;
  --ink-strong: #3A322E;
  --ink-2: #6A5F59;
  --ink-3: #8A7F79;
  --ink-4: #9A8E86;

  /* Brand — spent on actions only */
  --brand-from: #FF8A6B;
  --brand-to: #FF6F86;
  --primary: #FF6F71;

  /* Mode accents. Friends is amber, Events is blue-violet. */
  --dating: #FF6F71;
  --dating-tint: #FFE3DB;
  --friends: #B7740A;
  --friends-to: #D9973B;
  --friends-tint: #FEF1D9;
  --events: #6C63F6;
  --events-to: #8C7CFF;
  --events-tint: #ECEAFE;

  --success: #13B7A6;
  --warning: #F59E0B;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-card: 16px;
  --r-card-lg: 18px;
  --shadow-soft: 0 14px 34px rgba(42, 35, 32, .09);
  --shadow-lift: 0 18px 44px rgba(42, 35, 32, .13);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }

a { color: var(--ink); text-decoration-color: var(--border); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 22px 0;
}
.wordmark {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
}
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
  box-shadow: 0 10px 22px rgba(255, 111, 113, .30);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(255, 111, 113, .34); }
.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn.ghost:hover { transform: none; box-shadow: none; border-color: var(--ink-4); }

/* Inert by design: there is no App Store listing yet, and a link that 404s is worse than none. */
.btn.inert {
  background: var(--fill);
  color: var(--ink-3);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: default;
}
.btn.inert:hover { transform: none; box-shadow: none; }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { text-wrap: balance; }
h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 6.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0 0 10px;
}
h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.005em; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 60ch; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.grad {
  background: linear-gradient(120deg, var(--brand-from), var(--brand-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
code, .mono {
  font-family: var(--mono); font-size: 13.5px;
  background: var(--fill); padding: 2px 7px; border-radius: 6px; color: var(--ink-strong);
}

section { padding: 56px 0; }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 24px 26px 26px;
  box-shadow: var(--shadow-soft);
}
.card p { color: var(--ink-2); font-size: 14.5px; }

/* Mode cards — one accent each, the only place accents are used */
.mode .tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.mode .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mode.dating .tag  { color: var(--dating);  background: var(--dating-tint); }
.mode.friends .tag { color: var(--friends); background: var(--friends-tint); }
.mode.events .tag  { color: var(--events);  background: var(--events-tint); }
.mode h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; margin-bottom: 8px; }

/* ── Notice ─────────────────────────────────────────────────────────────── */
.notice {
  background: var(--friends-tint);
  border: 1px solid #F0DEB4;
  border-radius: var(--r-card);
  padding: 20px 24px;
  color: #6B4A08;
}
.notice strong { color: #4A340A; }
.notice .label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; display: block; margin-bottom: 8px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
  padding: 40px 0 48px;
  margin-top: 24px;
}
.foot-grid {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: baseline; justify-content: space-between;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-note { font-size: 13.5px; color: var(--ink-3); }

/* Marks a non-production deployment. Nothing else on the page says which one this is. */
.env-banner {
  background: var(--ink);
  color: #F3EDE9;
  font-size: 13px;
  padding: 9px 0;
  text-align: center;
  letter-spacing: .01em;
}
.env-banner strong { font-weight: 700; }

@media (max-width: 720px) {
  .nav { gap: 16px; }
  .nav .nav-hide { display: none; }
  section { padding: 42px 0; }
}