/* Beit Isza — shared brand tokens (from the logo and printed menus) */
:root {
  --navy: #172C41;
  --navy-2: #2A4560;
  --sage: #7E8566;
  --sage-soft: #E9EADF;
  --terra: #B9573A;
  --terra-soft: #F5E2D9;
  --mustard: #D49A34;
  --mustard-soft: #F7E8C8;
  --cream: #F8EEE4;
  --paper: #FFFBF6;
  --ink: #1D2630;
  --muted: #6B6F66;
  --line: #E6DCCF;
  --ok: #3F7D4E;
  --ok-soft: #DCEEDF;
  --bad: #B3382C;
  --bad-soft: #F8DEDA;
  --info: #2F5F8A;
  --info-soft: #DDE8F3;
  --font-display: "Alexandria", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-latin: "Poppins", "Segoe UI", Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(23, 44, 65, .10);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.latin { font-family: var(--font-latin); letter-spacing: .08em; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1080px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.btn { border: 0; border-radius: 999px; padding: .7em 1.4em; font-weight: 700; background: var(--navy); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.gold { background: var(--mustard); color: var(--navy); }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn.small { padding: .4em .9em; font-size: .9rem; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: .92rem; }
.field input, .field select, .field textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: .65em .8em; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-2); outline: none; box-shadow: 0 0 0 3px var(--mustard-soft); }
.hint { color: var(--muted); font-size: .85rem; }
.pill { display: inline-flex; align-items: center; gap: .35em; border-radius: 999px; padding: .15em .7em; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pill.new { background: var(--mustard-soft); color: #7A5410; }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.go { background: var(--terra-soft); color: var(--terra); }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.toast { position: fixed; inset-inline: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin-inline: auto; width: max-content; max-width: calc(100% - 32px);
  background: var(--navy); color: var(--paper); padding: .7em 1.2em; border-radius: 12px; box-shadow: var(--shadow); z-index: 100; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }