/* Design tokens — ported verbatim from the prototype. */
:root {
  --bg: oklch(0.985 0.006 85);
  --ink: oklch(0.22 0.02 60);
  --ink-2: oklch(0.42 0.02 60);
  --ink-3: oklch(0.62 0.015 60);
  --line: oklch(0.90 0.01 70);
  --line-2: oklch(0.94 0.008 70);
  --card: oklch(0.995 0.004 85);

  --apricot: oklch(0.78 0.09 55);
  --sage:    oklch(0.78 0.07 150);
  --peri:    oklch(0.78 0.07 275);
  --clay:    oklch(0.78 0.08 30);
  --hazel:   oklch(0.68 0.11 85);

  --apricot-soft: oklch(0.95 0.035 55);
  --sage-soft:    oklch(0.95 0.03 150);
  --peri-soft:    oklch(0.95 0.03 275);
  --clay-soft:    oklch(0.95 0.035 30);
  --hazel-soft:   oklch(0.95 0.05 85);

  --serif: 'Newsreader', ui-serif, Georgia, serif;
  --sans: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 20% 0%, oklch(0.97 0.02 85) 0%, transparent 60%),
    radial-gradient(1000px 500px at 80% 100%, oklch(0.97 0.02 275) 0%, transparent 60%),
    oklch(0.96 0.006 85);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

#root {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* App shell — max-width for desktop, full-bleed on mobile. */
.app-shell {
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}
@media (max-width: 520px) {
  #root { padding: 0; }
  .app-shell {
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

.screen-body::-webkit-scrollbar { width: 0; }

.token-gate {
  display: flex; flex-direction: column; gap: 10px;
  padding: 40px 28px;
}
.token-gate h1 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -0.02em;
}
.token-gate p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.token-gate input {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  outline: none;
}
.token-gate input:focus { border-color: var(--hazel); }
.token-gate button {
  padding: 10px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}
.token-gate .err {
  color: oklch(0.55 0.15 30);
  font-size: 12px;
}