:root {
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
}

.btn:focus-visible,
.icon-button:focus-visible,
.input:focus-visible,
.locale-option:focus-visible,
.otp-input:focus-visible {
  outline-color: rgba(249, 115, 22, 0.45);
}

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

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.34);
}

.input:focus {
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.page-login::before {
  background:
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.18), transparent 22%),
    radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.12), transparent 32%),
    linear-gradient(145deg, #fff8f1 0%, #fff0e4 46%, #fffbf8 100%);
}

.page-login__grid {
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.04) 1px, transparent 1px);
}

.page-login__orb--top-right {
  background: rgba(251, 146, 60, 0.22);
}

.page-login__orb--bottom-left {
  background: rgba(249, 115, 22, 0.14);
}

.page-login__orb--center {
  background: rgba(253, 186, 116, 0.16);
}

.page-login__brand-logo {
  background: linear-gradient(160deg, #111827 0%, #0f172a 100%);
  box-shadow: 0 14px 30px rgba(249, 115, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-login__card {
  border: 1px solid rgba(251, 146, 60, 0.12);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.page-login__brand-subtitle {
  color: #7c4a24;
}

.modal-card__icon {
  background: rgba(249, 115, 22, 0.12);
}

html.dark .modal-card__icon {
  background: rgba(234, 88, 12, 0.2);
}