.auth-page {
  background: var(--color-background);
}

.auth-card {
  width: min(100%, 28rem);
  padding: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);

  h1 {
    font-size: 2.5rem;
    letter-spacing: -.04em;
  }

  p {
    color: var(--color-muted);
    font-family: var(--font-sans);
    line-height: 1.5;
  }

  form {
    display: grid;
    gap: .75rem;
    margin-top: 1.5rem;
  }

  input,
  input[type="submit"],
  button {
    padding: .8rem 1rem;
    border: 1px solid var(--color-input-border);
    border-radius: .45rem;
    font: inherit;
  }

  input[type="submit"],
  button {
    border-color: var(--color-action);
    color: var(--color-action-text);
    background: var(--color-action);
    cursor: pointer;
  }
}