/* Saigon Deli design tokens.
   Palette comes from the logo: espresso brown, warm tan and cream, with chilli red for warnings. */
:root {
  --shutter: #412B22;
  --shutter-deep: #2E1E17;
  --wall: #D9BFA6;
  --wall-soft: #EFE1CF;
  --plaster: #F6EEE0;
  --paper: #FFFDF8;
  --ink: #2E1E17;
  --ink-soft: #7A6355;
  --line: #E4D6C2;
  --chili: #c8382a;
  --cane: #7fa23a;
  --cane-soft: #e3eec5;
  --radius: 14px;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--plaster);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--wall); outline-offset: 2px; border-radius: 6px; }
.on-dark :focus-visible, .shutters :focus-visible { outline-color: var(--wall); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border: 2px solid var(--shutter); border-radius: 999px;
  background: var(--shutter); color: var(--plaster);
  font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:hover { background: var(--shutter-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.wall { background: var(--wall); border-color: var(--wall); color: var(--ink); }
.btn.wall:hover { background: #C9AA8C; }
.btn.ghost { background: transparent; color: var(--shutter); }
.btn.ghost:hover { background: rgba(65, 42, 34, 0.08); }
.btn.danger { background: transparent; border-color: var(--chili); color: var(--chili); }
.btn.danger:hover { background: rgba(200, 56, 42, 0.08); }
.btn.danger.confirm { background: var(--chili); color: #fff; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }

/* Fields */
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: 14px; }
.field small { color: var(--ink-soft); }
input[type='text'], input[type='tel'], input[type='number'], input[type='date'], input[type='password'], input[type='url'], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--shutter); box-shadow: 0 0 0 3px rgba(176, 138, 105, 0.55); }
.error-text { color: var(--chili); font-weight: 600; font-size: 14px; }

/* Switch */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i {
  position: absolute; inset: 0; background: #CDBBA6; border-radius: 999px; transition: background 0.15s;
  pointer-events: none;
}
.switch i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; transition: transform 0.15s;
}
.switch input:checked + i { background: var(--shutter); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--wall); outline-offset: 2px; }

/* Status and channel chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; min-height: 26px;
  border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--wall-soft); color: #5A3D2C; white-space: nowrap;
}
.chip.green { background: var(--cane-soft); color: #3d5a10; }
.chip.red { background: #f8d9d4; color: #8d2116; }
.chip.grey { background: #EADCC8; color: var(--ink-soft); }
.chip.zomato { background: #fbd5da; color: #a1182b; }
.chip.swiggy { background: #fde0c8; color: #a04a05; }
.chip.app { background: #EADCC8; color: #4A3226; }

/* Toast */
.toasts { position: fixed; left: 0; right: 0; bottom: 88px; display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 100; padding: 0 16px; }
.toast {
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px;
  max-width: 480px; animation: toast-in 0.2s ease-out;
}
.toast.bad { background: var(--chili); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Dialog / sheet */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--plaster); max-width: 100vw; }
dialog::backdrop { background: rgba(46, 30, 23, 0.6); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }