/*
 * Tawaqa front door — the app's graphite design system translated to CSS.
 *
 * Tokens mirror src/theme (colors.ts + index.ts): near-black surfaces, hairline
 * borders, one quiet indigo accent, system type. Dark only, like the app.
 * The two deliberate deviations from app metrics, both medium adaptations:
 *   - the hero headline scales up on wide screens (28px is a phone metric);
 *   - long-form legal text reads at 1.55 line-height (22px is a card metric).
 * Everything else — colors, radii, control heights, the 4pt grid — is verbatim.
 */

:root {
  --bg: #0e0f13;            /* palette.indigo — page background */
  --surface: #16181d;       /* palette.charcoal — card surface */
  --raised: #1e2027;        /* palette.charcoalRaised */
  --hairline: #262932;      /* borders & dividers */
  --accent: #7c83ff;        /* palette.turquoise — the one accent */
  --accent-soft: rgba(124, 131, 255, 0.13);
  --accent-border: rgba(124, 131, 255, 0.35);
  --coral: #e0897a;
  --rose: #e0479e;          /* the incumbent monogram colour */
  --rose-soft: rgba(224, 71, 158, 0.2);
  --text: #f2f3f5;
  --text-2: #a7aebc;
  --text-3: #838b99;
  --gutter: 20px;           /* layout.gutter */
}

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

html { background: var(--bg); color-scheme: dark; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--accent-soft); }

.wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header: one 52px bar (control.bar), wordmark only ---- */

.site-header { padding-top: 8px; }
.site-header .wrap {
  height: 52px;
  display: flex;
  align-items: center;
}
.wordmark {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
  text-decoration: none;
}

main { flex: 1; }

/* ---- Type scale (typography tokens) ---- */

.display {
  font-size: clamp(28px, 20px + 2.2vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.3px; }
.lead { font-size: 16px; line-height: 24px; color: var(--text-2); }
.meta { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-3); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Landing ---- */

.hero { padding: 56px 0 8px; }
.hero .display { max-width: 480px; }
.hero .lead { margin-top: 16px; max-width: 460px; }

.coming {
  display: inline-block;
  margin-top: 28px;
  padding: 8px 14px;               /* control.pill */
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}
.frontdoor { margin-top: 12px; }

/* ---- The example card: PredictionCard's grammar, pre-commit state ---- */

.card-stage { padding: 40px 0 16px; }
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;             /* radius.lg */
  padding: 12px;                   /* layout.cardPad */
  max-width: 400px;
}
.card-head { display: flex; align-items: center; gap: 8px; }
.monogram {
  width: 26px; height: 26px;       /* avatar.inline */
  border-radius: 50%;
  background: var(--rose-soft);
  color: var(--rose);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.handle { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-2); }
.timer {
  margin-left: auto;
  padding: 5px 10px;               /* control.chip */
  border-radius: 999px;
  background: var(--raised);
  color: var(--text-2);
  font-size: 11px; line-height: 14px; font-weight: 600;
}
.question {
  margin: 12px 0;
  font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px;
}
.option {
  padding: 11px 14px;              /* 11 + 22 + 11 = control.tap (44) */
  border-radius: 12px;             /* radius.md */
  background: var(--raised);
  border: 1px solid var(--hairline);
  font-size: 16px; line-height: 22px; font-weight: 600;
}
.option + .option { margin-top: 8px; }
.card-hint {
  margin-top: 12px;
  font-size: 11px; line-height: 14px; font-weight: 600;
  color: var(--text-3);
}

/* ---- Card share pages (/c/<id>, rendered by _worker.js) ---- */

.card-page { padding: 40px 0 8px; }
.card-page .coming { margin-top: 28px; }
.card-meta { margin-top: 12px; }
.option--won {
  background: rgba(86, 194, 142, 0.13);    /* successSoft */
  border-color: rgba(86, 194, 142, 0.35);  /* successBorder */
  color: #56c28e;                          /* success */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.option-won-mark { font-weight: 700; }
.timer--settled { background: rgba(86, 194, 142, 0.13); color: #56c28e; }

/* Monogram colours — the app's avatarColors at the Avatar's own recipe:
   disc at 20% (`color + '33'`), initial at full strength. Classes, not inline
   styles, because the CSP forbids the latter and the set is closed. */
.mono-rose   { background: rgba(224, 71, 158, 0.2);  color: #e0479e; }
.mono-coral  { background: rgba(224, 137, 122, 0.2); color: #e0897a; }
.mono-amber  { background: rgba(210, 176, 105, 0.2); color: #d2b069; }
.mono-moss   { background: rgba(157, 190, 125, 0.2); color: #9dbe7d; }
.mono-teal   { background: rgba(111, 191, 174, 0.2); color: #6fbfae; }
.mono-sky    { background: rgba(116, 170, 209, 0.2); color: #74aad1; }
.mono-violet { background: rgba(172, 152, 222, 0.2); color: #ac98de; }
.mono-slate  { background: rgba(148, 155, 171, 0.2); color: #949bab; }
.mono-accent { background: rgba(124, 131, 255, 0.2); color: #7c83ff; }

/* ---- Long-form pages (privacy, terms, support, delete) ---- */

.page { padding: 40px 0 8px; }
.page .meta { margin-top: 8px; }
.prose { padding-bottom: 8px; }
.prose h2 {
  margin: 28px 0 8px;              /* rule 3: label belongs to what it labels */
  font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.2px;
}
.prose p, .prose li { font-size: 16px; line-height: 1.55; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { font-weight: 600; }

.note {
  margin: 16px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  font-size: 13px; line-height: 19px;
  color: var(--text-2);
}
.note--warn {
  background: rgba(224, 137, 122, 0.13);   /* coralSoft */
  border-color: rgba(224, 137, 122, 0.25);
  color: var(--coral);
}

/* ---- Footer ---- */

.site-footer { padding: 40px 0 28px; }
.site-footer .wrap {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
}
.site-footer a { color: var(--text-3); font-size: 13px; line-height: 18px; font-weight: 500; }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.site-footer .copyright { margin-left: auto; color: var(--text-3); font-size: 13px; line-height: 18px; }

/* ---- 404 ---- */

.nothing { padding: 96px 0; }
.nothing .lead { margin-top: 12px; }