/* Authentication Styles - Specific overrides or additions */

/* Auth Container */
.auth-container {
  max-width: 32rem; /* Limit width of auth forms */
  margin: var(--space-6) auto; /* Center with top/bottom margin - Replaced --space-8 */
}

.auth-header {
    text-align: center;
}

.auth-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-regular);
}

.auth-links {
  text-align: center;
  margin-top: var(--space-4);
}

.auth-form {
  button {
    width: 100%;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0px 40rem #000 inset;
    font-size: var(--font-size-regular);
  }
}

.auth-message {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.75rem; /* Replaced undefined --font-size-sm */
  display: none; /* Initially hidden */
}

.auth-message--error {
  background-color: color-mix(in srgb, var(--color-error) 15%, var(--color-surface)); /* Use global colors */
  color: var(--color-error); /* Use global color */
  border: 1px solid var(--color-error);
  display: block; /* Show when error class is present */
}

.auth-message--success {
  background-color: color-mix(in srgb, var(--color-success) 15%, var(--color-surface)); /* Use global colors */
  color: var(--color-success); /* Use global color */
  border: 1px solid var(--color-success);
  display: block; /* Show when success class is present */
}