/* Haske shared tokens. Single dark world by design: a warm dining room at night, one amber light. */
:root {
  color-scheme: dark;
  --bg: #0E0C0A;
  --surface: #191613;
  --raised: #23201B;
  --line: #2E2924;
  --ink: #F4EEE4;
  --ink-2: #ABA194;
  --ink-3: #847A6E;
  --glow: #F2B04A;
  --glow-soft: rgba(242, 176, 74, 0.12);
  --ember: #E07A3B;
  --fresh: #9CC27E;
  --spice: #E0603F;
  --on-glow: #14110E;
  --display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --ui: "Geist", "Helvetica Neue", Arial, sans-serif;
  --r-card: 28px;
  --r-pill: 999px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 8px; }
.serif { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
.italic { font-style: italic; }
.overline { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.price { color: var(--glow); font-variant-numeric: tabular-nums; font-weight: 500; }

.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: var(--r-pill); padding: 14px 22px; font-weight: 500; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.btn:active { transform: scale(.98); }
.btn-glow { background: var(--glow); color: var(--on-glow); }
.btn-glow:hover { background: #F6BE63; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--raised); }
.btn-sm { padding: 9px 14px; font-size: 13px; }

.chip { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); padding: 10px 16px; background: var(--raised); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.chip[aria-pressed="true"], .chip.on { background: var(--glow); border-color: var(--glow); color: var(--on-glow); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }

/* Food photo slots. Replace a .food element with an <img class="food"> when photos arrive. */
.food { position: relative; overflow: hidden; border-radius: 18px; background:
  radial-gradient(120% 90% at 70% 20%, rgba(255, 210, 150, .22), transparent 55%),
  linear-gradient(140deg, var(--a, #3B2416), var(--b, #9A5426)); }
img.food { object-fit: cover; display: block; }

.orb { position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--glow); color: var(--on-glow); box-shadow: 0 0 0 0 rgba(242,176,74,.5), 0 0 48px rgba(242,176,74,.55); border: 0; }
.orb svg { width: 42%; height: 42%; }
.orb.listening { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(242,176,74,.45), 0 0 40px rgba(242,176,74,.5); } 50% { box-shadow: 0 0 0 18px rgba(242,176,74,0), 0 0 70px rgba(242,176,74,.7); } }

.lit { color: var(--ink); font-style: italic; transition: color .3s ease; }
.word { opacity: .2; transition: opacity .25s ease; }
.word.on { opacity: 1; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--fresh); flex: none; }
.dot.glow { background: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linkish { background: none; border: 0; padding: 4px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }