/* Pho Sapa demo. Colours read off the restaurant's logo: slate letters, sand shadow. */
:root {
  --slate: #5A7068;
  --ink: #22302B;
  --ink-2: #55625D;
  --ink-3: #8A948F;
  --sand: #E8C890;
  --sand-soft: #F6EBD6;
  --cream: #FAF7F0;
  --card: #FFFFFF;
  --line: #E7E1D5;
  --ok: #2F7D4F;
  --ok-soft: #E3F1E8;
  --warn: #B86E00;
  --warn-soft: #FBEBD3;
  --bad: #B3261E;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(34, 48, 43, .06), 0 4px 16px rgba(34, 48, 43, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-font: "Avenir Next", "Avenir", "Futura", "Century Gothic", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--cream); color: var(--ink); font: 16px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

/* Wordmark stand-in until the logo file is approved: stacked, slate, sand shadow. */
.logo { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--brand-font);
  font-weight: 500; color: var(--slate); line-height: .86; letter-spacing: -.01em; text-shadow: .06em .06em 0 var(--sand); }
.logo span { font-size: 30px; }
.logo small { font-size: 9px; letter-spacing: .08em; color: var(--ink-2); text-shadow: none; margin-top: 5px; font-weight: 400; }
.logo.sm span { font-size: 22px; }
.logo.xs span { font-size: 15px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip.open { background: var(--warn-soft); color: var(--warn); }
.chip.paid, .chip.ready { background: var(--ok-soft); color: var(--ok); }
.chip.kitchen { background: var(--sand-soft); color: #7A5A1E; }
.err { background: #FCE8E6; color: var(--bad); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }