:root {
  --arena-bg: #090B0F;
  --arena-surface-01: #0F1117;
  --arena-surface-02: #161820;
  --arena-surface-03: #1D2030;
  --arena-surface-04: #242840;
  --arena-border: rgba(255, 255, 255, 0.07);
  --arena-border-strong: rgba(255, 255, 255, 0.14);
  --arena-border-accent: rgba(124, 92, 252, 0.35);

  --arena-text-primary: #EEF0F4;
  --arena-text-secondary: #8B92A5;
  --arena-text-muted: #4E5569;
  --arena-text-inverse: #090B0F;

  --arena-accent: #00D4FF;
  --arena-accent-dark: #0098B8;
  --arena-accent-glow: rgba(0, 212, 255, 0.15);
  --arena-warm: #F5A623;
  --arena-warm-glow: rgba(245, 166, 35, 0.15);
  --arena-violet: #7C5CFC;
  --arena-violet-glow: rgba(124, 92, 252, 0.15);
  --arena-red: #FF3B57;
  --arena-green: #22D47E;
  --arena-gold: #FFD700;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --sidebar-width: 240px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;
  --dashboard-gap: 16px;

  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-sidebar: 250;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
}
