* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

body:not([class*="theme-"]) {
  --bg: #0f0d0a;
  --text: #f5ead4;
  --text-muted: rgba(245,234,212,0.75);
  --accent: #f5a854;
  --accent-text: #0f0d0a;
  --accent-soft: rgba(245,168,84,0.12);
  --card: #1a1714;
  --card-hover: #221d18;
  --border: rgba(245,234,212,0.08);
  --border-strong: rgba(245,234,212,0.18);
  --error: #e57373;
  --success: #81c784;
}

body.theme-dark-premium {
  --bg: #0f0d0a;
  --text: #f5ead4;
  --text-muted: rgba(245,234,212,0.75);
  --accent: #f5a854;
  --accent-text: #0f0d0a;
  --accent-soft: rgba(245,168,84,0.12);
  --card: #1a1714;
  --card-hover: #221d18;
  --border: rgba(245,234,212,0.08);
  --border-strong: rgba(245,234,212,0.18);
  --error: #e57373;
  --success: #81c784;
}

body.theme-warm-editorial {
  --bg: #f7f3ed;
  --text: #2a2a2a;
  --text-muted: #6a6a6a;
  --accent: #2a2a2a;
  --accent-text: #f7f3ed;
  --accent-soft: rgba(42,42,42,0.08);
  --card: #ffffff;
  --card-hover: #fbf8f3;
  --border: #e0d9cf;
  --border-strong: #cfc6b9;
  --error: #c4422a;
  --success: #4a7c4a;
}

body.theme-crisp-modern {
  --bg: #ffffff;
  --text: #0a0a0a;
  --text-muted: #707070;
  --accent: #000000;
  --accent-text: #ffffff;
  --accent-soft: rgba(0,0,0,0.05);
  --card: #fafafa;
  --card-hover: #f0f0f0;
  --border: #e8e8e8;
  --border-strong: #c8c8c8;
  --error: #d63031;
  --success: #00b894;
}

body.theme-forest-tavern {
  --bg: #0d2e1f;
  --text: #e8d9b8;
  --text-muted: rgba(232,217,184,0.6);
  --accent: #c89f4a;
  --accent-text: #0d2e1f;
  --accent-soft: rgba(200,159,74,0.1);
  --card: #163d2a;
  --card-hover: #1c4a35;
  --border: rgba(232,217,184,0.1);
  --border-strong: rgba(232,217,184,0.22);
  --error: #f5a3a3;
  --success: #a8d5a8;
}

body.theme-terracotta-bistro {
  --bg: #fff1e0;
  --text: #3a1a0f;
  --text-muted: #8a5a40;
  --accent: #d24a1f;
  --accent-text: #fff1e0;
  --accent-soft: rgba(210,74,31,0.08);
  --card: #ffffff;
  --card-hover: #fde9d4;
  --border: #f0d8b8;
  --border-strong: #e0bc94;
  --error: #a02a14;
  --success: #5a8a4a;
}

body.theme-midnight-indigo {
  --bg: #0a0f3d;
  --text: #ebe2c9;
  --text-muted: rgba(235,226,201,0.6);
  --accent: #e8c873;
  --accent-text: #0a0f3d;
  --accent-soft: rgba(232,200,115,0.08);
  --card: #141a52;
  --card-hover: #1a2266;
  --border: rgba(235,226,201,0.1);
  --border-strong: rgba(235,226,201,0.22);
  --error: #f5a3a3;
  --success: #a8d5a8;
}

body.theme-sun-sand {
  --bg: #fff8de;
  --text: #3a2a18;
  --text-muted: #8a6a4a;
  --accent: #ff8a3d;
  --accent-text: #3a2a18;
  --accent-soft: rgba(255,138,61,0.1);
  --card: #ffffff;
  --card-hover: #fff0c4;
  --border: #f1e0a8;
  --border-strong: #e0c878;
  --error: #c4422a;
  --success: #6a8a4a;
}

body.theme-bombay-blue {
  --bg: #063540;
  --text: #ead8a8;
  --text-muted: rgba(234,216,168,0.65);
  --accent: #c89548;
  --accent-text: #063540;
  --accent-soft: rgba(200,149,72,0.08);
  --card: #0d4150;
  --card-hover: #144d5e;
  --border: rgba(234,216,168,0.12);
  --border-strong: rgba(234,216,168,0.24);
  --error: #f5a3a3;
  --success: #a8d5a8;
}

body.theme-spice-market {
  --bg: #f7e0c4;
  --text: #4a1206;
  --text-muted: #8a3a20;
  --accent: #a02a14;
  --accent-text: #f7e0c4;
  --accent-soft: rgba(160,42,20,0.08);
  --card: #ffffff;
  --card-hover: #f5d4ae;
  --border: #ebc890;
  --border-strong: #d4a85a;
  --error: #6a0a04;
  --success: #5a7a3a;
}

body.theme-charcoal-linen {
  --bg: #f3eee5;
  --text: #1a1a1f;
  --text-muted: #6a6a70;
  --accent: #2a3a5a;
  --accent-text: #f3eee5;
  --accent-soft: rgba(42,58,90,0.07);
  --card: #ffffff;
  --card-hover: #ede7da;
  --border: #ddd5c6;
  --border-strong: #c8bea8;
  --error: #c4422a;
  --success: #4a7c4a;
}

body.theme-brick-birch {
  --bg: #fff4d6;
  --text: #3a1206;
  --text-muted: #8a4a30;
  --accent: #8c2a14;
  --accent-text: #fff4d6;
  --accent-soft: rgba(140,42,20,0.07);
  --card: #ffffff;
  --card-hover: #faedc4;
  --border: #ead098;
  --border-strong: #d4ae5a;
  --error: #6a1a08;
  --success: #5a7a3a;
}

body.theme-cloud-mint {
  --bg: #eaf4ea;
  --text: #1a3d2a;
  --text-muted: #5a7a6a;
  --accent: #d4577e;
  --accent-text: #ffffff;
  --accent-soft: rgba(212,87,126,0.08);
  --card: #ffffff;
  --card-hover: #def0de;
  --border: #c8e0c8;
  --border-strong: #a8c8a8;
  --error: #c4422a;
  --success: #2e7d32;
}

/* === App-shell light theme (used on auth + setup pages) === */
body.landing-light {
  --bg: #faf8f3;
  --text: #1a1814;
  --text-muted: rgba(26,24,20,0.72);
  --accent: #f5a854;
  --accent-text: #1a1814;
  --accent-soft: rgba(245,168,84,0.14);
  --card: #ffffff;
  --card-hover: #f6f3ed;
  --border: rgba(26,24,20,0.08);
  --border-strong: rgba(26,24,20,0.18);
  --error: #c4422a;
  --success: #4a7c4a;
}

body.theme-light-amber {
  --bg: #faf8f3;
  --text: #1a1814;
  --text-muted: rgba(26,24,20,0.72);
  --accent: #f5a854;
  --accent-text: #1a1814;
  --accent-soft: rgba(245,168,84,0.14);
  --card: #ffffff;
  --card-hover: #f6f3ed;
  --border: rgba(26,24,20,0.08);
  --border-strong: rgba(26,24,20,0.18);
  --error: #c4422a;
  --success: #4a7c4a;
}

/* === Theme toggle button === */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  font-family: inherit;
}
.theme-toggle:hover {
  background: var(--card-hover);
  transform: translateY(-1px);
}
.theme-toggle-fixed {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px;
}

/* Landing */
.landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 14vw, 88px);
  color: var(--text);
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.logo .accent {
  color: var(--accent);
}

.tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  padding: 16px 36px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(245, 168, 84, 0.18);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.cta:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(245, 168, 84, 0.28);
}

.cta-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* Cards */
.card {
  background: var(--card);
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

/* Headings */
.heading {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.subheading {
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 22px;
  line-height: 1.55;
}

.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* Inputs */
.input-group { margin-bottom: 14px; }
.input-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Buttons */
.button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: 15px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.button:hover { opacity: 0.9; }

.button-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* Status messages */
.error { color: var(--error); font-size: 14px; margin-top: 10px; line-height: 1.5; }
.success { color: var(--success); font-size: 14px; margin-top: 10px; line-height: 1.5; }

/* Chips */
.chip {
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.chip:hover { border-color: var(--accent); }
.chip.selected { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip.add-chip { border-style: dashed; opacity: 0.7; }
.chip-remove { font-size: 14px; opacity: 0.6; padding: 0 2px; }

.seating-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Queue entry */
.queue-entry {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.queue-entry:hover { border-color: var(--border-strong); }

.queue-entry-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.queue-entry-info h4 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.2px;
}

.queue-entry-info .meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.preference-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.wait-time {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.queue-actions button {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.btn-notify { background: var(--accent); color: var(--accent-text); }
.btn-seat { background: var(--success); color: white; }
.btn-call {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-cancel {
  background: transparent;
  color: var(--error);
  border: 1px solid var(--border);
}

/* Empty states */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Inline pill links (guest status) */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin: 6px 4px;
  transition: all 0.2s;
}
.pill-link:hover { border-color: var(--accent); color: var(--accent); }

/* Position number (guest status) */
.position {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(96px, 24vw, 120px);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -3px;
}

@media (max-width: 480px) {
  .container { padding: 24px 16px; }
  .card { padding: 22px 18px; border-radius: 16px; }
  .heading { font-size: 24px; }
}