$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
$font-size-base: 1rem;
$border-radius-base: 0.375rem;
$spacing-unit: 1rem;
$form-max-width: 400px;

.authPage {
  --color-page-bg: #f8f9fa;
  --color-form-bg: #ffffff;
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-placeholder-text: #a9b0b5;
  --color-border: #e0e0e0;
  --color-accent: #F39C12;
  --color-accent-dark: #{darken(#F39C12, 8%)};
  --color-accent-text: #ffffff;
  --color-accent-light-transparent: #{rgba(#F39C12, 0.15)};
  --box-shadow-form: 0 10px 30px rgba(0, 0, 0, 0.08);

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-color: var(--color-page-bg) !important;
  padding: $spacing-unit * 1.5;
  font-family: $font-family-base;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

:global(body.dark-mode) .authPage {
  --color-page-bg: #1a1d21;
  --color-form-bg: #2c3035;
  --color-text-primary: #e8eaed;
  --color-text-secondary: #9aa0a6;
  --color-placeholder-text: #787c81;
  --color-border: #4b5157;
  --color-accent: #F39C12;
  --color-accent-dark: #{darken(#F39C12, 10%)};
  --color-accent-text: #000000;
  --color-accent-light-transparent: #{rgba(#F39C12, 0.25)};
  --box-shadow-form: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.authFormContainer {
  width: 100%;
  max-width: $form-max-width;
  background-color: var(--color-form-bg) !important;
  color: var(--color-text-primary);
  padding: $spacing-unit * 2.5 $spacing-unit * 2;
  border-radius: $border-radius-base * 2;
  box-shadow: var(--box-shadow-form);
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.authLogo {
  margin-bottom: $spacing-unit * 1.5;
  box-sizing: border-box;
  svg {
    width: 50px;
    height: auto;
    color: var(--color-accent);
    transition: color 0.3s ease;
  }
}

.authTitle {
  font-size: $font-size-base * 1.75;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: $spacing-unit * 0.75;
  line-height: 1.3;
  box-sizing: border-box;
  transition: color 0.3s ease;
}

.authTips {
  font-size: $font-size-base * 0.9;
  color: var(--color-text-secondary);
  margin-bottom: $spacing-unit * 1.5;
  line-height: 1.6;
  box-sizing: border-box;
  transition: color 0.3s ease;

  &.subTips {
    margin-top: $spacing-unit * 1.5;
    margin-bottom: $spacing-unit * 0.75;
    font-size: $font-size-base * 0.85;
  }
}

.inputGroup {
  width: 100%;
  margin-bottom: $spacing-unit * 1.25;
  box-sizing: border-box;
}

.authInput {
  width: 100%;
  padding: ($spacing-unit * 0.75) ($spacing-unit * 1);
  font-size: $font-size-base;
  font-family: $font-family-base;
  color: var(--color-text-primary);
  background-color: var(--color-form-bg);
  border: 1px solid var(--color-border);
  border-radius: $border-radius-base;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
  box-sizing: border-box;

  &::placeholder {
    color: var(--color-placeholder-text);
    opacity: 1;
  }

  &:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light-transparent);
  }
}

.authActions {
  width: 100%;
  margin-top: $spacing-unit * 1.5;
  display: flex;
  flex-direction: column;
  gap: $spacing-unit * 0.75;
  box-sizing: border-box;
}

.button {
  width: 100%;
  padding: ($spacing-unit * 0.75) $spacing-unit;
  font-size: $font-size-base;
  font-family: $font-family-base;
  font-weight: 500;
  border-radius: $border-radius-base;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  text-align: center;
  line-height: 1.5;
  box-sizing: border-box;

  &:hover {
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
  }
}

.buttonPrimary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);

  &:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
  }
}

.buttonSecondary {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);

  &:hover {
    background-color: var(--color-accent-light-transparent);
    color: var(--color-accent-dark);
  }
}
