/*
 * Table Tribe authentication pages
 *
 * Registration and sign-in cards, form controls, validation display, and
 * buttons. Uses the tokens in token.css.
 */

.tt-auth {
  display: flex;
  justify-content: center;
}

.tt-auth-card {
  width: 100%;
  max-width: 480px;
  background-color: var(--tt-color-surface);
  border: var(--tt-border-width-default) solid var(--tt-color-border-subtle);
  border-radius: var(--tt-radius-sharp);
  padding: var(--tt-space-xl);
}

.tt-auth-title {
  margin: 0 0 var(--tt-space-sm);
  font-family: var(--tt-text-headline-family);
  font-size: var(--tt-text-headline-size);
  line-height: var(--tt-text-headline-line-height);
  font-weight: var(--tt-text-headline-weight);
}

.tt-auth-lede {
  margin: 0 0 var(--tt-space-lg);
  color: var(--tt-color-text-secondary);
}

.tt-form {
  display: grid;
  gap: var(--tt-space-lg);
}

.tt-field {
  display: grid;
  gap: var(--tt-space-xs);
}

.tt-field__label {
  font-size: var(--tt-text-body-large-size);
  font-weight: var(--tt-font-weight-medium);
  color: var(--tt-input-label);
}

.tt-field__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tt-size-touch-target-min);
  padding: var(--tt-input-padding-block) var(--tt-input-padding-inline);
  background-color: var(--tt-input-background);
  color: var(--tt-input-foreground);
  border: var(--tt-input-border-width) solid var(--tt-input-border);
  border-radius: var(--tt-input-radius);
  font-family: var(--tt-font-family-interface);
  font-size: var(--tt-text-body-large-size);
}

.tt-field__input:focus {
  border-color: var(--tt-input-border-focus);
  border-width: var(--tt-input-border-width-focus);
  outline: none;
}

.tt-field__input:focus-visible {
  outline: var(--tt-border-width-focus) solid var(--tt-color-border-focus);
  outline-offset: 1px;
}

.tt-field__input--invalid,
.tt-field__input--invalid:focus {
  border-color: var(--tt-input-border-error);
}

.tt-field__input--invalid:focus-visible {
  outline-color: var(--tt-color-danger);
}

.tt-field__hint {
  margin: 0;
  font-size: var(--tt-text-caption-size);
  line-height: var(--tt-text-caption-line-height);
  color: var(--tt-text-caption-color);
}

.tt-field__error {
  margin: 0;
  font-size: var(--tt-text-caption-size);
  line-height: var(--tt-text-caption-line-height);
  font-weight: var(--tt-font-weight-medium);
  color: var(--tt-input-error);
}

.tt-error-summary {
  margin: 0 0 var(--tt-space-lg);
  padding: var(--tt-space-md);
  background-color: var(--tt-color-danger-surface);
  border: var(--tt-border-width-default) solid var(--tt-color-danger-accent);
  border-radius: var(--tt-radius-sharp);
  color: var(--tt-color-danger);
}

.tt-error-summary__title {
  margin: 0 0 var(--tt-space-sm);
  font-family: var(--tt-text-title-medium-family);
  font-size: var(--tt-text-title-medium-size);
  line-height: var(--tt-text-title-medium-line-height);
  font-weight: var(--tt-text-title-medium-weight);
}

.tt-error-summary__list {
  margin: 0;
  padding-inline-start: var(--tt-space-lg);
  display: grid;
  gap: var(--tt-space-xxs);
}

.tt-error-summary__note {
  margin: var(--tt-space-sm) 0 0;
  font-size: var(--tt-text-caption-size);
  line-height: var(--tt-text-caption-line-height);
}

.tt-button {
  min-height: var(--tt-size-touch-target-min);
  padding: var(--tt-space-sm) var(--tt-space-lg);
  border: var(--tt-border-width-default) solid transparent;
  border-radius: var(--tt-radius-sharp);
  font-family: var(--tt-font-family-interface);
  font-size: var(--tt-text-body-large-size);
  font-weight: var(--tt-font-weight-medium);
  cursor: pointer;
}

.tt-button--primary {
  background-color: var(--tt-color-primary);
  color: var(--tt-color-on-primary);
}

.tt-button--primary:hover {
  background-color: var(--tt-color-forest-mid);
}

.tt-button:focus-visible {
  outline: var(--tt-border-width-focus) solid var(--tt-color-border-focus);
  outline-offset: 2px;
}

.tt-auth-links {
  margin: var(--tt-space-lg) 0 0;
  color: var(--tt-color-text-secondary);
}

.tt-link {
  color: var(--tt-color-text-accent);
  text-underline-offset: var(--tt-space-xxs);
}