/* ── Base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1 {
  font-size: var(--fs-xlarge);
  margin: 0;
}
h2 {
  font-size: var(--fs-medium);
  margin: 0;
}
p { margin: 0; }
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
data { font-variant-numeric: tabular-nums; }

/* Every button: 12px padding + a 22px line + a 1px border each side = 48px,
   regardless of context — a chrome button and a plain "Add hotel" button are
   the same control at different volumes, not two different size scales.
   min-height alone does not centre a button's label — wrapped text pins to the
   top, hence the flex centring. */
button {
  font: inherit;
  color: inherit;
  background: var(--bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: var(--space-regular);
  font-size: var(--fs-regular);
  line-height: var(--lh-regular);
}
button:disabled {
  opacity: .4;
  cursor: default;
}
@media (hover: hover) {
  button:hover:not(:disabled) { border-color: var(--ink); }
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.scroll :focus-visible { outline-offset: -2px; }

small { color: var(--muted); }