/* Fanyello site: shared tokens, header, footer, buttons and document pages.
   Values mirror the app (fanyello-mobile src/lib/theme.tsx and src/lib/design.ts). */
:root {
  color-scheme: light dark;
  --bg: #f4f8ff;
  --surface: #ffffff;
  --surface-alt: #edf2fa;
  --glass: rgba(255, 255, 255, .66);
  --glass-strong: rgba(255, 255, 255, .84);
  --glass-edge: rgba(255, 255, 255, .8);
  --line: #dce5f3;
  --ink: #17233b;
  --muted: #64728a;
  --faint: #7d8aa1;
  --accent: #376bff;
  --accent-2: #7d5cff;
  --accent-soft: #e9e4ff;
  --link: #2b5cf0;
  --success: #1f9d6c;
  --warn: #c88a14;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --hero: linear-gradient(140deg, #376bff 0%, #5966ff 46%, #7d5cff 100%);
  --blob-a: rgba(55, 107, 255, .16);
  --blob-b: rgba(125, 92, 255, .14);
  --edge: 0 0 0 1px rgba(255, 255, 255, 0);
  --shadow-card: 0 8px 18px rgba(27, 43, 75, .06), 0 20px 44px rgba(27, 43, 75, .06);
  --shadow-raised: 0 12px 24px rgba(27, 43, 75, .1), 0 32px 64px rgba(27, 43, 75, .1);
  --shadow-float: 0 6px 14px rgba(42, 59, 176, .32);
  --r-card: 24px;
  --r-sheet: 30px;
  --r-button: 20px;
  --r-chip: 14px;
  --r-pill: 999px;
  --font-display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070d1a;
    --surface: #111a2c;
    --surface-alt: #1a2538;
    --glass: rgba(17, 26, 44, .66);
    --glass-strong: rgba(17, 26, 44, .88);
    --glass-edge: rgba(255, 255, 255, .07);
    --line: #243149;
    --ink: #eef2f8;
    --muted: #8f9db6;
    --faint: #7c89a1;
    --accent: #5b8bff;
    --accent-2: #9b7cff;
    --accent-soft: #243063;
    --link: #8fb0ff;
    --success: #41c98d;
    --warn: #f0b84a;
    --hero: linear-gradient(140deg, #2d55e6 0%, #4747d8 50%, #6a48dc 100%);
    --blob-a: rgba(91, 139, 255, .12);
    --blob-b: rgba(155, 124, 255, .1);
    --edge: 0 0 0 1px #243149;
    --shadow-card: 0 0 0 1px #1c2740, 0 12px 30px rgba(0, 0, 0, .35);
    --shadow-raised: 0 0 0 1px #243149, 0 20px 50px rgba(0, 0, 0, .5);
    --shadow-float: 0 8px 16px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* Soft brand-coloured light behind the frosted surfaces. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 32rem at 88% 8%, var(--blob-b), transparent 70%),
    radial-gradient(36rem 30rem at 6% 42%, var(--blob-a), transparent 70%),
    radial-gradient(40rem 30rem at 80% 92%, var(--blob-a), transparent 70%);
}
img { max-width: 100%; }
a { color: var(--link); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; }

.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.wrap-narrow { width: min(780px, calc(100% - 40px)); margin-inline: auto; }

/* Brand + header */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 900; font-size: 21px; letter-spacing: -.01em; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-float); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav a:not(.pill) { padding: 9px 12px; border-radius: var(--r-pill); color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.site-header nav a:not(.pill):hover { color: var(--ink); background: var(--glass); }

/* Pills */
.pill {
  min-height: 50px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #fff;
  font: 800 15.5px/1 var(--font-body);
  text-decoration: none;
  box-shadow: var(--shadow-float);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: scale(.97); }
.pill.small { min-height: 40px; padding: 0 17px; font-size: 14px; }
.pill.ghost { background: var(--glass); color: var(--ink); box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }

/* Frosted glass surface */
.glass {
  background: var(--glass);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
.eyebrow { color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .04em; }

/* Footer */
.site-footer { margin-top: 40px; padding: 30px 0 44px; color: var(--faint); font-size: 13.5px; }
.site-footer .row { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); }
.site-footer .brand { font-size: 17px; }
.site-footer .brand img { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer .links a { color: var(--muted); font-weight: 700; text-decoration: none; }
.site-footer .links a:hover { color: var(--ink); }

/* Document pages (privacy, terms, support) */
.doc-head { padding: 34px 0 8px; }
.doc-head h1 { margin: 10px 0 12px; font-size: clamp(38px, 8vw, 64px); line-height: 1.02; }
.doc-head .date { color: var(--faint); font-size: 13.5px; font-weight: 600; }
.doc .lead { margin: 26px 0; padding: 22px 24px; color: var(--ink); }
.doc .sheet { padding: clamp(22px, 5vw, 44px); border-radius: var(--r-sheet); background: var(--glass-strong); box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.doc .sheet > h2:first-child { margin-top: 0; }
.doc h2 { margin: 34px 0 8px; font-size: 22px; line-height: 1.2; font-weight: 800; }
.doc p, .doc li { color: var(--muted); }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 20px; }

@media (max-width: 620px) {
  .wrap, .wrap-narrow { width: calc(100% - 32px); }
  .site-header { padding: 16px 0; }
  .site-header nav a:not(.pill) { display: none; }
  .doc .lead { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill { transition: none; }
}