:root {
  color-scheme: light;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  background: #f8f1e5;
  color: #333030;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
}

.primary-button {
  min-width: 210px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #cc444b;
  color: white;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(204, 68, 75, 0.22);
}

.primary-button:hover:not(:disabled) {
  background: #a93138;
}

.primary-button:focus-visible {
  outline: 3px solid rgba(204, 68, 75, 0.35);
  outline-offset: 4px;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.status-message {
  max-width: 360px;
  margin: 0;
  color: #5f5959;
  text-align: center;
  line-height: 1.5;
}

[hidden] {
  display: none !important;
}