/* ─── Caravan web ───────────────────────────────────────────────────────────
   One stylesheet for every page on joincaravan.co. The tokens below are the
   app's own palette, copied value-for-value from CaravanColors in
   lib/theme/app_theme.dart — if a colour changes there, change it here too.

   The app ships a single light theme (AppTheme has no .dark), and the app icon
   itself is a warm cream field, so the site commits to the same light palette
   rather than inventing a dark one the app has no counterpart for. That is a
   deliberate choice, not a missing media query — hence every colour below is
   stated outright and nothing is left to inherit from the browser.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:     #F3EFE6;  /* CaravanColors.bg    warm off-white */
  --paper:  #FBF8F1;  /* CaravanColors.paper card surface   */
  --ink:    #1E2821;  /* CaravanColors.ink   forest         */
  --muted:  #6B766D;  /* CaravanColors.muted secondary text */
  --amber:  #C8691F;  /* CaravanColors.amber accent         */
  --moss:   #4A6B4F;  /* CaravanColors.moss                 */
  --sand:   #E8DFC9;  /* CaravanColors.sand  button ground  */
  --line:   rgba(30, 40, 33, 0.08);  /* CaravanColors.line = ink @ 8% */

  /* Lighter than --line on purpose: at 8% the dot field reads as a pattern
     behind long body copy on the privacy page rather than as paper texture. */
  --dot:    rgba(30, 40, 33, 0.045);

  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* The faint dot field from the app icon's background, carried onto the page
     so the two read as one product. Kept very low contrast — it should be felt
     rather than seen. */
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
}

/* ─── Type ─────────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 12px;
}
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 38px 0 10px; }
p  { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: var(--amber); }
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.lede   { font-size: 17px; color: var(--muted); }
.muted  { color: var(--muted); }

/* Uppercase micro-label used for the wordmark and field labels, matching the
   tracked-out small caps the app uses above its inputs. */
.label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ─── Brand mark ───────────────────────────────────────────────────────── */

/* The real app icon rather than a stand-in glyph, so the page someone lands on
   from an invite shows the same thing they'll look for on their home screen.
   The icon art already contains its own background and border radius is applied
   here to match how iOS masks it. */
.appicon {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(30, 40, 33, 0.10);
}
.appicon-lg { width: 104px; height: 104px; border-radius: 26px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.wordmark .appicon { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.wordmark span {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: block;
  padding: 16px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-primary   { background: var(--amber); color: #FFF; }
.btn-secondary { background: var(--sand);  color: var(--ink); border-color: var(--line); }
.btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30, 40, 33, 0.12); }
.btn:active { transform: translateY(0); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ─── Surfaces ─────────────────────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 20px;
}

/* ─── Document pages (privacy, support) ────────────────────────────────── */

.doc { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.doc header {
  padding: 44px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.doc header h1 { margin-top: 18px; }
.doc footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}