:root {
  --brand-primary-blue: #2563FF;
  --brand-primary-blue-hover: #1D4FF2;
  --brand-accent-cyan: #60D5FA;
  --brand-electric-cyan: #22D3EE;
  --brand-deep-navy: #081328;
  --brand-near-black-navy: #020817;
  --brand-white: #FFFFFF;
}

[data-theme="light"], .aervo-theme-light {
  --page-bg: #F8FAFC;
  --page-bg-gradient-from: #F8FAFC;
  --page-bg-gradient-to: #EEF5FF;
  --panel-bg: #FFFFFF;
  --panel-border: #E6ECF5;
  --text-primary: #050D2C;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --input-bg: #FFFFFF;
  --input-border: #D8E0EC;
  --input-placeholder: #94A3B8;
  --button-primary-bg: #2563FF;
  --button-primary-hover: #1D4FF2;
  --button-primary-text: #FFFFFF;
  --social-button-bg: #FFFFFF;
  --social-button-border: #D8E0EC;
  --link: #2563FF;
  --divider: #E5EAF2;
}

[data-theme="dark"], .aervo-theme-dark {
  --page-bg: #020817;
  --page-bg-gradient-from: #020817;
  --page-bg-gradient-to: #081328;
  --panel-bg: #081123;
  --panel-bg-elevated: #0B162C;
  --panel-border: #1E3A64;
  --text-primary: #F8FAFC;
  --text-secondary: #A9B8D0;
  --text-muted: #6B7892;
  --input-bg: #081123;
  --input-border: #243852;
  --input-placeholder: #7C8AA3;
  --button-primary-bg: #2563FF;
  --button-primary-hover: #1D4FF2;
  --button-primary-text: #FFFFFF;
  --social-button-bg: #081123;
  --social-button-border: #243852;
  --link: #3B82F6;
  --divider: #1D2A3D;
}

.aervo-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 15%, rgba(96, 213, 250, 0.14), transparent 30%),
    linear-gradient(180deg, var(--page-bg-gradient-from), var(--page-bg-gradient-to));
  color: var(--text-primary);
}

.aervo-login-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.78;
  pointer-events: none;
}

.aervo-login-card {
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  border: 1px solid var(--panel-border);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(18px);
}

.aervo-login-mascot {
  animation: aervo-hover 4.8s ease-in-out infinite;
  transform-origin: 50% 55%;
  will-change: transform, filter;
}

.aervo-login-mascot-glow {
  animation: aervo-glow 3.2s ease-in-out infinite;
}

@keyframes aervo-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(0, -8px, 0) rotate(0.6deg); }
}

@keyframes aervo-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(96, 213, 250, 0.22)); }
  50% { filter: drop-shadow(0 0 18px rgba(96, 213, 250, 0.42)); }
}

@media (prefers-reduced-motion: reduce) {
  .aervo-login-mascot,
  .aervo-login-mascot-glow {
    animation: none;
  }
}