/* Foylee — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f8f5ef;
  --surface-raised: #ffffff;
  --surface-sunken: #efebe3;
  --line: #e2ddd2;
  --line-strong: #7a8294;
  --ink: #13213a;
  --ink-muted: #56617a;
  --brand: #1d4f78;
  --brand-strong: #123a5c;
  --brand-soft: #dde9f2;
  --on-brand: #ffffff;
  --glow: #e2694f;
  --glow-soft: #fbe3dc;
  --glow-ink: #a8432c;
  --on-glow: #13213a;
  --danger: #b3261e;
  --danger-soft: #f8deda;
  --focus: #123a5c;
  --shadow-raised: 0 1px 2px rgba(19,33,58,0.06), 0 6px 20px rgba(19,33,58,0.08);
  --shadow-overlay: 0 12px 40px rgba(19,33,58,0.18);
}
[data-theme="dark"] {
  --surface: #0c1424;
  --surface-raised: #14203a;
  --surface-sunken: #080e1a;
  --line: #22304d;
  --line-strong: #5f7090;
  --ink: #eef1f7;
  --ink-muted: #a5b0c4;
  --brand: #7fb4e2;
  --brand-strong: #b5d4ef;
  --brand-soft: #15304a;
  --on-brand: #0c1424;
  --glow: #e2694f;
  --glow-soft: #3d2019;
  --glow-ink: #f4a08c;
  --on-glow: #13213a;
  --danger: #f08a75;
  --danger-soft: #3d1f1a;
  --focus: #f4a08c;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.35);
  --shadow-overlay: 0 12px 40px rgba(0,0,0,0.55);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.02em; }
.display-lg { font-family: var(--font-display); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.015em; }
.heading-1 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; }
.heading-2 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.heading-3 { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }
.stat { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Foylee components — plain CSS on the tokens. Prefix: .fy- */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }

/* ---------- Button ---------- */
.fy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-4) 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: 600 15px/20px var(--font-sans); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fy-btn svg { width: 18px; height: 18px; flex: none; }
.fy-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fy-btn--primary { background: var(--brand); color: var(--on-brand); }
.fy-btn--primary:hover { background: var(--brand-strong); }
.fy-btn--glow { background: var(--glow); color: var(--on-glow); }
.fy-btn--glow:hover { background: var(--glow-ink); color: var(--surface); }
.fy-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.fy-btn--secondary:hover { background: var(--surface-sunken); }
.fy-btn--ghost { background: transparent; color: var(--brand); }
.fy-btn--ghost:hover { background: var(--brand-soft); color: var(--brand-strong); }
.fy-btn--danger { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.fy-btn--sm { height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 14px; }
.fy-btn[disabled], .fy-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Status badge ---------- */
.fy-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.fy-badge svg { width: 14px; height: 14px; flex: none; }
.fy-badge--new { background: var(--brand-soft); color: var(--brand-strong); }
.fy-badge--replied, .fy-badge--booked { background: var(--brand-soft); color: var(--brand-strong); }
.fy-badge--human { background: var(--danger-soft); color: var(--danger); }
.fy-badge--quiet { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- Text field ---------- */
.fy-field { display: grid; gap: var(--space-2); max-width: 360px; }
.fy-field__label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.fy-field__hint { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.fy-field__hint--error { color: var(--danger); }
.fy-input {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 var(--space-3);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: 400 16px/24px var(--font-sans);
}
.fy-input::placeholder { color: var(--ink-muted); }
.fy-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.fy-input[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- Lead card ---------- */
.fy-lead {
  box-sizing: border-box; max-width: 440px; padding: var(--space-6);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.fy-lead__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fy-lead__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fy-lead__avatar {
  width: 40px; height: 40px; border-radius: var(--radius-pill); flex: none;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong);
  font: 600 15px/1 var(--font-sans);
}
.fy-lead__name { font: 600 17px/24px var(--font-sans); color: var(--ink); }
.fy-lead__meta { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.fy-lead__thread { display: grid; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.fy-msg { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font: 400 14px/20px var(--font-sans); }
.fy-msg--in { justify-self: start; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); }
.fy-msg--out { justify-self: end; background: var(--brand); color: var(--on-brand); }
.fy-lead__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.fy-stat__num { font: 600 36px/40px var(--font-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fy-stat__cap { font: 600 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- helpers for previews ---------- */
.fy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.fy-stack { display: grid; gap: var(--space-4); padding: var(--space-4); }

/* site */
html{scroll-behavior:smooth}
body{margin:0;background:#f8f5ef}
a{color:#1d4f78}a:hover{color:#123a5c}
.lang-btn{height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:#56617a;font:600 14px/20px var(--font-sans);cursor:pointer}
.lang-btn[aria-pressed="true"]{background:#1d4f78;color:#fff}
.hp{position:absolute;left:-9999px}
@media (max-width:640px){header nav a:not(.fy-btn){display:none}}