/* fartroulette.app — same tokens as the app (design-handoff/tokens). */
@font-face { font-family: 'Lilita One'; src: url('/assets/LilitaOne.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Figtree; font-weight: 500; src: url('/assets/Figtree-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Figtree; font-weight: 700; src: url('/assets/Figtree-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Figtree; font-weight: 800; src: url('/assets/Figtree-ExtraBold.ttf') format('truetype'); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fr-color-ground-night);
  color: var(--fr-color-ink-chalk);
  font: var(--fr-typography-body);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 420px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
main.doc { max-width: 680px; gap: 12px; }
.hero { width: min(100%, 336px); height: auto; align-self: center; }
h1 { font: var(--fr-typography-titleSmall); margin: 0; text-align: center; }
.doc h1 { text-align: left; margin-bottom: 8px; }
h2 { font: var(--fr-typography-heading); margin: 20px 0 4px; }
p { margin: 0; }
.sub { color: var(--fr-color-ink-fog); text-align: center; }
.doc p, .doc li { color: var(--fr-color-ink-fog); font: var(--fr-typography-bodyLarge); }
.doc a { color: var(--fr-color-fuse-base); }
.muted { color: var(--fr-color-ink-smoke); font: var(--fr-typography-caption); text-align: center; }

.code {
  display: flex; justify-content: center; align-items: center; height: 96px;
  border-radius: var(--fr-radius-lg); background: var(--fr-color-ground-surface); border: 1px solid var(--fr-color-ground-line);
  font: var(--fr-typography-codeDisplay); letter-spacing: var(--fr-typography-codeDisplay-tracking);
  padding-left: var(--fr-typography-codeDisplay-tracking); font-variant-numeric: tabular-nums;
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; border-radius: var(--fr-radius-md); text-decoration: none;
  font: var(--fr-typography-button); transition: transform 80ms, box-shadow 80ms;
}
.btn.primary { background: var(--fr-color-fuse-base); color: var(--fr-color-fuse-on); box-shadow: var(--fr-elevation-fuseEdge); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--fr-color-fuse-edge); background: var(--fr-color-fuse-pressed); }
.btn.secondary { background: var(--fr-color-ground-raised); color: var(--fr-color-ink-chalk); border: 1px solid var(--fr-color-ground-lineStrong); box-shadow: var(--fr-elevation-darkEdge); }
.btn.secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--fr-color-ground-edgeDark); }
.btn[aria-disabled='true'] { background: var(--fr-color-disabled-fill); color: var(--fr-color-disabled-text); box-shadow: var(--fr-elevation-disabledEdge); pointer-events: none; }

.card {
  border-radius: var(--fr-radius-lg); background: var(--fr-color-ground-surface); border: 1px solid var(--fr-color-ground-lineSubtle);
  padding: 16px 18px; color: var(--fr-color-ink-fog);
}
.card strong { color: var(--fr-color-ink-chalk); }
footer { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
footer a { color: var(--fr-color-ink-smoke); font: var(--fr-typography-caption); text-decoration: none; }
footer a:hover { color: var(--fr-color-ink-fog); }