/* Shared base for the home page, menu, owner screens and QR cards. Uses tokens.css only. Logical properties throughout,
   so a right-to-left language can be added later without rework. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-md)/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-family: var(--font-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
/* The name in text (where the traced logo can't go): League Gothic capitals, as on their logo. */
.wordmark { font-family: var(--font-wordmark); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
/* Section titles: tall condensed capitals like "YO GELO!". No underline, no tracking: the letterforms do the work. */
.heading { font-family: var(--font-heading); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
bdi.num, .num { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }

/* The order plate (top right of the menu): O! yellow with ink, like the rim of their cups. */
.plate {
  display: inline-grid; place-items: center; align-content: center; gap: 2px;
  min-width: 64px; padding: 6px 10px 7px; border-radius: var(--r-md);
  background: var(--signal); color: var(--signal-ink);
  line-height: 1; text-align: center;
}
.plate small { font: 800 13px/1.1 var(--font-body); letter-spacing: .02em; white-space: nowrap; }
.plate b { font: 400 36px/1 var(--font-display); color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.plate.lg { min-width: 96px; padding: 10px 14px 12px; border-radius: var(--r-lg); }
.plate.lg small { font-size: 13px; }
.plate.lg b { font-size: 56px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-6); border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: var(--t-md);
  text-decoration: none; transition: background-color .15s;
}
.btn:hover { background: var(--brand-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn.wide { width: 100%; }
.btn.quiet { background: var(--surface); color: var(--ink); }
.btn.quiet:hover { background: var(--surface-2); }
.btn.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}