:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-surface: #ffffff;
  --color-bg: #f8fafc;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --radius: 0.5rem;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.login-wrapper {
  min-height: 100vh;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--color-primary);
}

.btn, .card, a {
  transition: all 0.2s ease-out;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}