/* تزئین صفحهٔ ورود روی پایهٔ `.login*` در base.css: سربرگ برند، متن راهنما،
   خطای هشدار و دکمهٔ ثبت. رنگ‌ها و فاصله‌ها فقط از tokens.css می‌آیند. */

.login__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-6);
}

/* نشان و نام در یک ردیف؛ حاشیهٔ پیش‌فرض نشان در این چیدمان لازم نیست. */
.login__head .login__mark,
.login__head .login__brand {
  margin-block-end: 0;
}

.login__head .login__brand {
  font-size: var(--fs-lg);
}

.login__title {
  margin-block-end: var(--sp-2);
}

.login__lead {
  margin-block-end: var(--sp-6);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

/* پیام خطا با نوار رنگی و متن، نه فقط رنگ. */
.login__error {
  border-inline-start: 4px solid var(--bad);
  color: var(--bad-text);
}

.login__submit {
  min-height: var(--touch);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-md);
}

@media (min-width: 720px) {
  .login__sheet {
    padding: var(--sp-9) var(--sp-8);
  }
}