/* Authentication Layout Styles */

.auth-body {
  min-height: 100vh;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-4);
}

.auth-container {
  width: 100%;
  max-width: 400px;
}

.auth-card {
  background: var(--surface-2);
  border-radius: var(--radius-3);
  padding: var(--size-6);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--surface-3);
}

.auth-card__header {
  text-align: center;
  margin-bottom: var(--size-6);
}

.auth-card__avatar {
  margin: 0 auto var(--size-3);
  display: inline-block;
}

.auth-card__title {
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-7);
  color: var(--text-1);
  margin: 0 0 var(--size-1);
}

.auth-card__subtitle {
  font-size: var(--font-size-2);
  color: var(--text-2);
  margin: 0;
}

.auth-card__content {
  /* Form styles will inherit from base form styles */
}

/* Auth form specific styles */
.auth-form__title {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-6);
  color: var(--text-1);
  margin: 0 0 var(--size-2);
  text-align: center;
}

.auth-form__subtitle {
  font-size: var(--font-size-1);
  color: var(--text-2);
  margin: 0 0 var(--size-4);
  text-align: center;
  line-height: var(--font-lineheight-3);
}

.auth-form__links {
  text-align: center;
  margin-top: var(--size-4);
  padding-top: var(--size-4);
  border-top: 1px solid var(--surface-3);
}

/* Alert styles for auth forms */
.alert {
  padding: var(--size-2) var(--size-3);
  border-radius: var(--radius-2);
  margin-bottom: var(--size-3);
  font-size: var(--font-size-1);
}

.alert--error {
  background: var(--red-1);
  color: var(--red-9);
  border: 1px solid var(--red-3);
}

.alert--success {
  background: var(--green-1);
  color: var(--green-9);
  border: 1px solid var(--green-3);
}

[data-theme="dark"] .alert--error {
  background: var(--red-2);
  color: var(--red-11);
  border-color: var(--red-6);
}

[data-theme="dark"] .alert--success {
  background: var(--green-2);
  color: var(--green-11);
  border-color: var(--green-6);
}

/* Dark theme adjustments */
[data-theme="dark"] .auth-card {
  background: var(--surface-2);
  border-color: var(--surface-3);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .auth-body {
    padding: var(--size-2);
  }
  
  .auth-card {
    padding: var(--size-4);
  }
}