:root {
  color-scheme: dark;

  /* Core palette: dark navy + blue neon accent */
  --vr-color-bg-primary: #0B0B14;
  --vr-color-bg-elev-1: #111827;
  --vr-color-bg-elev-2: #1E2233;
  --vr-color-surface-glass: rgba(17, 24, 39, 0.82);

  --vr-color-text-primary: #E2E8F0;
  --vr-color-text-secondary: #94A3B8;
  --vr-color-text-muted: #64748B;

  --vr-color-border-subtle: #2A3150;
  --vr-color-border-strong: #334155;

  --vr-color-accent: #3B82F6;
  --vr-color-accent-soft: rgba(59, 130, 246, 0.18);
  --vr-color-accent-glow: rgba(56, 189, 248, 0.28);
  --vr-color-accent-secondary: #2563EB;

  /* Spacing scale */
  --vr-space-1: 4px;
  --vr-space-2: 8px;
  --vr-space-3: 12px;
  --vr-space-4: 16px;
  --vr-space-5: 20px;
  --vr-space-6: 24px;
  --vr-space-7: 32px;
  --vr-space-8: 40px;
  --vr-space-9: 56px;
  --vr-space-10: 72px;

  /* Radius scale */
  --vr-radius-xs: 6px;
  --vr-radius-sm: 10px;
  --vr-radius-md: 14px;
  --vr-radius-lg: 18px;
  --vr-radius-xl: 24px;
  --vr-radius-pill: 999px;

  /* Typography */
  --vr-font-sans: "Sora", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --vr-font-body: "Manrope", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --vr-type-xs: 12px;
  --vr-type-sm: 14px;
  --vr-type-md: 16px;
  --vr-type-lg: 20px;
  --vr-type-xl: 28px;
  --vr-type-2xl: 40px;

  --vr-line-tight: 1.15;
  --vr-line-normal: 1.5;

  --vr-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --vr-shadow-accent: 0 0 0 1px var(--vr-color-accent-soft), 0 8px 22px var(--vr-color-accent-glow);
}

html,
body {
  font-family: var(--vr-font-body);
}

.vr-shell {
  --vr-shell-bg: var(--vr-color-bg-primary);
}

.vr-shell-dashboard {
  background-color: var(--vr-shell-bg);
  color: var(--vr-color-text-primary);
}

.vr-shell-auth {
  background-color: var(--vr-color-bg-primary);
}

.vr-token-card {
  background: var(--vr-color-surface-glass);
  border: 1px solid var(--vr-color-border-subtle);
  border-radius: var(--vr-radius-md);
  box-shadow: var(--vr-shadow-card);
}

.vr-token-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--vr-space-2);
  border-radius: var(--vr-radius-pill);
  border: 1px solid var(--vr-color-border-strong);
  padding: var(--vr-space-1) var(--vr-space-3);
  font-size: var(--vr-type-xs);
  color: var(--vr-color-text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

.vr-token-pill-accent {
  border-color: rgba(59, 130, 246, 0.36);
  box-shadow: var(--vr-shadow-accent);
}