:root{
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E2E8F0;
  --primary:#4F46E5;
  --secondary:#7C3AED;
  --shadow: 0 4px 20px -2px rgba(79,70,229,.10);
  --shadowHover: 0 10px 25px -5px rgba(79,70,229,.15);
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); }

.card-shadow { box-shadow: var(--shadow); }
.card-shadow-hover:hover { box-shadow: var(--shadowHover); }
.focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,.25); }

.bg-blobs::before,
.bg-blobs::after{
  content:"";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .22;
  pointer-events: none;
}
.bg-blobs::before{
  top: -180px;
  left: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(79,70,229,.9), rgba(79,70,229,0));
}
.bg-blobs::after{
  top: -220px;
  right: -180px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.9), rgba(124,58,237,0));
}

.gradient-text{
  background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}