:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #1e3a8a;
}

.btn:focus-visible,
.icon-button:focus-visible,
.input:focus-visible,
.locale-option:focus-visible,
.otp-input:focus-visible {
  outline-color: rgba(37, 99, 235, 0.45);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34);
}

.input:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.page-login::before {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.22), transparent 24%),
    radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.14), transparent 34%),
    linear-gradient(145deg, #f4f8ff 0%, #eaf1ff 46%, #fcfdff 100%);
}

.page-login__grid {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
}

.page-login__orb--top-right {
  background: rgba(96, 165, 250, 0.24);
}

.page-login__orb--bottom-left {
  background: rgba(37, 99, 235, 0.16);
}

.page-login__orb--center {
  background: rgba(147, 197, 253, 0.18);
}

.page-login__brand-logo {
  background: linear-gradient(160deg, #08152a 0%, #0b2d5c 100%);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.page-login__card {
  border: 1px solid rgba(96, 165, 250, 0.14);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.page-login__brand-subtitle {
  color: #31518a;
}

.modal-card__icon {
  background: rgba(37, 99, 235, 0.12);
}

html.dark .modal-card__icon {
  background: rgba(29, 78, 216, 0.2);
}