:root {
  --background: 216 33% 98%;
  --foreground: 224 28% 14%;
  --primary: 247 83% 60%;
  --secondary: 190 77% 42%;
  --muted: 220 20% 94%;
  --destructive: 0 80% 58%;
  --border: 220 18% 88%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 16px hsla(247, 70%, 30%, 0.08);
  --shadow-md: 0 18px 40px hsla(247, 70%, 24%, 0.12);
  --shadow-lg: 0 24px 60px hsla(247, 70%, 18%, 0.18);
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

.dark {
  --background: 224 30% 10%;
  --foreground: 210 25% 95%;
  --primary: 252 92% 72%;
  --secondary: 186 72% 54%;
  --muted: 223 22% 18%;
  --destructive: 0 84% 64%;
  --border: 223 16% 24%;
  --card: 224 28% 13%;
  --shadow-sm: 0 6px 16px hsla(0, 0%, 0%, 0.18);
  --shadow-md: 0 18px 40px hsla(0, 0%, 0%, 0.28);
  --shadow-lg: 0 24px 60px hsla(0, 0%, 0%, 0.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.card-surface {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.glass-panel {
  background: linear-gradient(135deg, hsla(0,0%,100%,0.82), hsla(0,0%,100%,0.68));
  backdrop-filter: blur(14px);
  border: 1px solid hsla(0,0%,100%,0.4);
  box-shadow: var(--shadow-md);
}

.dark .glass-panel {
  background: linear-gradient(135deg, hsla(224,28%,13%,0.92), hsla(224,28%,15%,0.82));
  border-color: hsla(255,255%,255%,0.06);
}

.token-ring:focus-visible {
  outline: 3px solid hsla(247, 83%, 60%, 0.22);
  outline-offset: 2px;
}

.metric-gradient {
  background: radial-gradient(circle at top left, hsla(247,83%,60%,0.18), transparent 36%), radial-gradient(circle at bottom right, hsla(190,77%,42%,0.16), transparent 34%), hsl(var(--card));
}

.hero-grid {
  background-image: linear-gradient(hsla(220,20%,50%,0.08) 1px, transparent 1px), linear-gradient(90deg, hsla(220,20%,50%,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; }

.fade-in {
  animation: fadeIn 0.45s var(--transition-smooth) both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}