/* ── Marketing + legal pages ───────────────────────────────────────────
   Shared by index.html (.page-home) and legal/base.html (.page-legal),
   whose <style> blocks held an identical reset, token set and dark-mode
   block, then diverged. Both style bare `body`, `h1` and `footer`, so
   everything page-specific is scoped under a body class rather than
   left global.

   Palette follows ../stitch-portal/docs/style-guide.md. Three light-mode
   values were below WCAG AA before this file existed and are corrected
   here (dark mode already passed):
     --ink-xfaint  #718096 -> #515c6c   (3.66/3.31 -> 6.18/5.59)
     brand as TEXT #c8623e -> #8d4026   (3.63/3.29 -> 6.61/5.99)
     status green  #22c55e -> #2f6a45   (1.73        -> 4.52)
   The brand split is the style guide's own rule: --brand is a fill tone,
   --brand-ink is the text tone. h1 and links are text, so they use ink.
   ──────────────────────────────────────────────────────────────────── */

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

:root {
  --canvas:     #f7f4ee;
  --surface:    #ede9df;
  --rim:        #d8d2c7;
  --ink:        #1a2332;
  --ink-faint:  #4a5568;
  --ink-xfaint: #515c6c;
  --brand:      #c8623e;
  --brand-ink:  #8d4026;
  --success:    #2f6a45;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:     #111820;
    --surface:    #1a2332;
    --rim:        #34465e;
    --ink:        #f7f4ee;
    --ink-faint:  #d6d1c6;
    --ink-xfaint: #b7b0a2;
    --brand:      #e07a56;
    --brand-ink:  #e89b80;
    --success:    #8fd4aa;
  }
}

/* ── Shared base ───────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.logo { margin-bottom: 1.5rem; }

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

footer {
  font-size: 0.75rem;
  color: var(--ink-xfaint);
}

/* ── Home page (index.html) ────────────────────────────────────────── */
html { height: 100%; }            /* harmless for the legal doc, which scrolls */
.page-home { height: 100%; }

.page-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.page-home .card {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-radius: 14px;
  padding: 2.5rem 3rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.page-home .logo { height: 44px; }
.page-home h1    { margin-bottom: 0.5rem; }

.page-home .tagline {
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-bottom: 2rem;
}

.page-home .status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.page-home .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.page-home footer { margin-top: 2.5rem; }

/* ── Legal pages (legal/base.html) ─────────────────────────────────── */
.page-legal { padding: 2.5rem 1.5rem 4rem; }

.page-legal .doc {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-radius: 14px;
  padding: 2.5rem 3rem;
  max-width: 720px;
  margin: 0 auto;
}

.page-legal .logo { height: 32px; }
.page-legal h1    { margin-bottom: 0.25rem; }

.page-legal .updated {
  font-size: 0.8rem;
  color: var(--ink-xfaint);
  margin-bottom: 2rem;
}

.page-legal h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.page-legal p,
.page-legal li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.page-legal p      { margin-bottom: 0.9rem; }
.page-legal ul,
.page-legal ol     { margin: 0 0 0.9rem 1.4rem; }
.page-legal li     { margin-bottom: 0.4rem; }
.page-legal a      { color: var(--brand-ink); }

.page-legal .nav {
  max-width: 720px;
  margin: 0 auto 1rem;
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
}

.page-legal .nav a:hover { text-decoration: underline; }
.page-legal .nav a       { text-decoration: none; }

.page-legal footer {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
}