/* ---------- DRAFTROOM DESIGN TOKENS (sampled from concept boards) ---------- */
:root {
  /* single-surface system: one warm cream everywhere, thin strokes do the separating */
  --cream-page:    #F7F4EE;
  --cream-surface: #F7F4EE;
  --cream-card:    #F7F4EE;
  --cream-rail:    #F7F4EE;
  --cream-inset:   #F1EDE4;
  --stroke:        rgba(23,22,26,0.12);
  --ink:           #17161A;
  --ink-soft:      #3A383E;
  --gray:          #8A847A;
  --gray-light:    #B1AB9F;
  --purple:        #5240A8;
  --purple-deep:   #43348C;
  --purple-wash:   #EDEAF8;
  --green:         #3E7A4E;
  --hairline:      rgba(23,22,26,0.09);
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --shadow-soft: 0 10px 34px rgba(23,22,26,0.07), 0 2px 8px rgba(23,22,26,0.04);
  --shadow-card: 0 18px 54px rgba(23,22,26,0.10), 0 4px 12px rgba(23,22,26,0.05);
  --font: 'Inter', -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--cream-surface); color: var(--ink); letter-spacing: -0.01em; }

.kicker  { font-weight: 700; letter-spacing: .2em; color: var(--gray); text-transform: uppercase; }
.avatar {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
}
.btn-primary {
  display: block; text-align: center; border: 0; cursor: pointer; width: 100%;
  padding: 16px 0; border-radius: 999px; background: var(--purple); color: #fff;
  font-family: var(--font); font-size: 17px; font-weight: 800;
  box-shadow: 0 14px 34px rgba(82,64,168,.4);
  transition: transform .15s cubic-bezier(.22,1,.36,1);
}
.btn-primary:active { transform: scale(.97); }
.btn-ghost {
  display: block; text-align: center; cursor: pointer; width: 100%;
  padding: 14px 0; border-radius: 999px; border: 1.5px solid var(--hairline);
  background: var(--cream-card); font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--ink-soft);
}
.rise { animation: rise .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* app-feel: no double-tap-to-zoom on taps that miss a button */
html { touch-action: manipulation; }