:root {
  --brand: #3d4b8c;
  --brand-soft: #eef0fa;
  --brand-ink: #262f5e;
  --accent: #d97a3f;
  --bg: #fdfcfa;
  --bg-tint: #f6f4ef;
  --surface: #ffffff;
  --border: #e7e3d9;
  --border-soft: #f0ede4;
  --text: #1c1c1e;
  --text-dim: #5c5a54;
  --text-faint: #9a978d;
  --green: #1f8a5c;
  --green-soft: #e7f5ee;
  --amber: #b8791a;
  --amber-soft: #fbf0dc;
  --red: #b8433a;
  --red-soft: #fbeae8;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(28,28,30,.04), 0 8px 24px -12px rgba(28,28,30,.10);
  --shadow-pop: 0 20px 50px -12px rgba(28,28,30,.22);
}
body { font-family: var(--sans); background: var(--bg); color: var(--text); }
.font-serif-display { font-family: var(--serif); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.btn-primary { background: var(--brand); color: white; border-radius: var(--radius-sm); transition: all .15s; }
.btn-primary:hover { background: var(--brand-ink); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.dot-available { background: var(--green); }
.dot-filling { background: var(--amber); }
.dot-full { background: var(--red); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeUp .5s ease both; }