/* منوی کافه — token ها یک بار ست می‌شوند، همه‌جا مصرف می‌شوند.
   معادل "Open Design" = همون CSS custom properties. */
:root {
  --bg: #faf7f2;
  --fg: #333;
  --muted: #777;
  --brand: #795548;
  --radius: 12px;
  --space: 16px;
  --maxw: 600px;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space);
}
.hero { text-align: center; padding: var(--space) 0; }
.hero img {
  border-radius: 50%; width: 80px; height: 80px; object-fit: cover;
}
.hero h1 { margin: 6px 0 2px; }
.cat { margin-top: 20px; }
.cat h3 { border-bottom: 2px solid var(--brand); }
.item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
}
.item .desc { color: var(--muted); font-size: 0.9em; }
.soldout { opacity: .5; text-decoration: line-through; }
footer { text-align: center; margin-top: 30px; color: var(--muted); font-size: .85em; }