:root {
  /* Colors */
  --bg-base: #04050e;
  --bg-deep: #020309;
  --bg-glass: rgba(10, 10, 12, 0.6);
  --bg-glass-hover: rgba(15, 15, 18, 0.7);
  --bg-glass-active: rgba(123, 94, 248, 0.15);

  --border-glass: rgba(255, 255, 255, 0.03);
  --border-glass-bright: rgba(255, 255, 255, 0.05);
  --border-accent: rgba(123, 94, 248, 0.5);
  --border-cyan: rgba(0, 229, 212, 0.45);

  --accent-violet: #7B5EF8;
  --accent-violet-bright: #9B7FFF;
  --accent-violet-dim: rgba(123, 94, 248, 0.25);
  --accent-cyan: #00E5D4;
  --accent-cyan-dim: rgba(0, 229, 212, 0.2);
  --accent-purple: #C084FC;
  --accent-pink: #F472B6;

  --text-primary: #EEEEFF;
  --text-secondary: rgba(238, 238, 255, 0.6);
  --text-muted: rgba(238, 238, 255, 0.3);
  --text-accent: #9B7FFF;
  --text-cyan: #00E5D4;

  /* Gradients */
  --grad-violet: linear-gradient(135deg, #7B5EF8 0%, #C084FC 100%);
  --grad-cyan: linear-gradient(135deg, #00E5D4 0%, #7B5EF8 100%);
  --grad-card: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  --grad-winner: linear-gradient(135deg, rgba(0, 229, 212, 0.08) 0%, rgba(123, 94, 248, 0.08) 100%);

  /* Shadows */
  --shadow-glass: 0 20px 40px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-violet: 0 0 24px rgba(123, 94, 248, 0.35);
  --shadow-cyan: 0 0 24px rgba(0, 229, 212, 0.3);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.7);

  /* Blur */
  --blur-glass: blur(60px) saturate(150%);
  --blur-light: blur(40px) saturate(120%);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 100px;

  /* Spacing */
  --px: 16px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 20px;

  /* Typography */
  --font: 'Inter', -apple-system, sans-serif;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  /* Transitions */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 220ms;
}