/*
 * FC-37 (Q63): styles for the public holding site on flipcity.app (Cloudflare Pages, no build step, no scripts).
 * Colours mirror COLOR in packages/shared/src/tokens.ts under the same names as apps/web/src/app/globals.css;
 * scripts/site.test.mts fails if one drifts. Light only, like the web app. Trust layer: calm, no effects (DESIGN.md §1).
 */

/* Plus Jakarta Sans (DESIGN.md §3), self-hosted from site/fonts (OFL, see fonts/OFL.txt) so the page makes no
   third-party request and the CSP can stay 'self' only. swap: text shows in the fallback while the font loads. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Tokens the site uses, a subset of COLOR (tokens.ts) and SHADOW.sm / RADIUS.lg. */
:root {
  --page: #f5f5f5;
  --surface: #ffffff;
  --line: #e5e5e5;
  --ink: #333333;
  --ink2: #404040;
  --muted: #595959;
  --primary: #3f66fb;
  --primary-ink: #2f4cbc;
  --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  --radius-lg: 16px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Body type is TYPE.body (16/24); 16 px side gutters and no sideways scroll at 375 px (DESIGN.md §4). */
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-text-size-adjust: 100%;
}

/* One centred column, like the iPad forms (CONTENT_MAX_WIDTH is 640). */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

/* The wordmark is the name set in Plus Jakarta Sans; there's no logo yet (DESIGN.md §1). It links home, so 8 px of
   padding makes its 28 px line a 44 pt target, and the margin drops by as much to keep the card where it was. */
.wordmark {
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0 16px;
  color: var(--ink);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 16px;
}

@media (min-width: 600px) {
  .card {
    padding: 32px;
  }
}

/* TYPE.titleLg (28/32, −2%) for the page title, TYPE.heading (18/28) for sections. */
h1 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  margin: 24px 0 8px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

p,
ul,
ol {
  margin: 0 0 12px;
  color: var(--ink2);
}

ul,
ol {
  padding-left: 24px;
}

li + li {
  margin-top: 4px;
}

/* Links use primary-ink (AA on surface and page); underlined so colour isn't the only signal (DESIGN.md §2). */
a {
  color: var(--primary-ink);
  text-underline-offset: 2px;
}

/* Visible focus on every link (DESIGN.md §8). */
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The contact address: vertical padding makes a 44 pt target (DESIGN.md §4) around its ~18 px text box without
   opening a gap in the sentence (inline-flex did, on a 375 px phone); it can still wrap on a narrow phone. */
.contact {
  padding: 13px 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Small print: TYPE small (14/20) in muted, which keeps 4.5:1 on page. */
.fine {
  margin-top: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.fine p {
  color: var(--muted);
}

/* Small-print links get the same 44 pt target around their ~17 px text box. */
.fine a {
  padding: 14px 0;
}