:root {
  --bg: #1B1114;
  --surface: #271A1E;
  --surface-border: #3A262B;
  --text: #F1E7DD;
  --text-muted: #B39C90;
  --gold: #C6A15B;
  --gold-deep: #A4813F;
  --wine: #8C2F3D;
  --focus: #D9B877;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 56px 20px 80px;
}

h1, h2 {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-weight: 500;
  margin: 0;
}

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

.muted { color: var(--text-muted); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Page container: one shared class instead of index's .screen and the doc
   pages' .doc. Width is the only thing that legitimately differs by content
   type (a form vs. a page of prose), so that's a modifier, not a new class. */

.page {
  width: 100%;
  margin-inline: auto;
}

.page--app { max-width: 400px; }
.page--doc { max-width: 640px; }

/* Shared surface component: index's .card and the doc pages' .callout were
   the same box (background, border, radius) with different padding/type
   scale, so they now share this base and layer their own modifier. */

.panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
}

/* Doc pages (terms/privacy) are structurally identical, so their whole
   type scale is scoped off the container class rather than repeated per
   page. Nothing page-specific needs to live in terms.html or privacy.html
   at all beyond the content itself. */

.page--doc .back-link {
  color: var(--text-muted);
  font-size: 13px;
}

.page--doc .back-link:hover { color: var(--text); }

.page--doc h1 {
  font-size: 32px;
  margin: 24px 0 4px;
}

.page--doc .updated {
  font-size: 13px;
  margin: 0 0 40px;
}

.page--doc h2 {
  font-size: 19px;
  margin: 36px 0 10px;
}

.page--doc p,
.page--doc li {
  font-size: 15px;
  line-height: 1.7;
}

.page--doc ul { padding-left: 20px; }

.page--doc .callout {
  padding: 16px 18px;
  margin: 20px 0;
  font-size: 14px;
}