:root {
  /* Blue Palette */
  --blue-50:  hsl(214, 100%, 97%);
  --blue-100: hsl(214, 95%,  92%);
  --blue-200: hsl(214, 90%,  83%);
  --blue-400: hsl(214, 84%,  65%);
  --blue-500: hsl(214, 80%,  56%);
  --blue-600: hsl(221, 83%,  53%);
  --blue-700: hsl(224, 76%,  48%);

  /* Background */
  --bg-base:   hsl(222, 47%, 11%);
  --bg-card:   hsl(222, 40%, 14%);
  --bg-subtle: hsl(222, 35%, 17%);

  --foreground: #e2e8f0;
}

/* ======================== BASE ======================== */
html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* ======================== GLASS ======================== */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-card {
  background: rgba(30, 41, 59, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
}

/* ======================== GRADIENTS ======================== */
.gradient-text {
  background: linear-gradient(135deg, hsl(214, 84%, 65%) 0%, hsl(200, 90%, 60%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-btn {
  background: linear-gradient(135deg, hsl(221, 83%, 53%) 0%, hsl(214, 80%, 56%) 100%);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
}

.gradient-btn:hover {
  background: linear-gradient(135deg, hsl(221, 83%, 47%) 0%, hsl(214, 80%, 50%) 100%);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.50);
  transform: translateY(-1px);
}

/* ======================== GLOW ======================== */
.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);
}

/* ======================== INPUTS ======================== */
.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: #e2e8f0;
  transition: all 0.3s ease;
}

.input-glass::placeholder {
  color: rgba(148, 163, 184, 0.50);
}

.input-glass:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: hsl(214, 84%, 65%);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

/* ======================== ANIMATIONS ======================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }
  50%       { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease both; }
.animate-fade-in    { animation: fadeIn   0.5s ease both; }
.animate-delay-100  { animation-delay: 0.1s; }
.animate-delay-200  { animation-delay: 0.2s; }
.animate-delay-300  { animation-delay: 0.3s; }
.animate-delay-400  { animation-delay: 0.4s; }

/* ======================== SCROLLBAR ======================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: hsl(222, 47%, 11%); }
::-webkit-scrollbar-thumb {
  background: hsl(221, 83%, 53%);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: hsl(221, 83%, 45%); }