:root {
  /* Color System */
  --color-purple: #8A2BE2;
  --color-purple-light: #9D50EC;
  --color-purple-dark: #6A1CA9;

  --color-pink: #FF69B4;
  --color-pink-light: #FF8AC5;
  --color-pink-dark: #E63F9D;

  --color-green: #32CD32;
  --color-green-light: #5AE05A;
  --color-green-dark: #28A428;

  --color-blue: #00BFFF;
  --color-blue-light: #59D6FF;
  --color-blue-dark: #0097CC;

  --color-yellow: #FFD700;
  --color-yellow-light: #FFDF33;
  --color-yellow-dark: #CCAC00;

  --color-red: #FF4545;
  --color-red-light: #FF7373;
  --color-red-dark: #CC2929;

  /* Neutral Colors */
  --color-black: #000000;
  --color-dark: #121212;
  --color-gray-dark: #333333;
  --color-gray: #666666;
  --color-gray-light: #999999;
  --color-light: #EEEEEE;
  --color-white: #FFFFFF;

  /* Background Colors */
  --bg-primary: var(--color-dark);
  --bg-secondary: var(--color-gray-dark);
  --bg-accent: var(--color-purple);

  /* Text Colors */
  --text-primary: var(--color-white);
  --text-secondary: var(--color-light);
  --text-accent: var(--color-pink);

  /* Border and Shadow */
  --border-color: var(--color-purple);
  --shadow-color: rgba(138, 43, 226, 0.5);
  --glow-color: rgba(255, 105, 180, 0.7);

  /* Typography */
  --font-pixel: 'Press Start 2P', cursive;
  --font-main: 'Roboto', sans-serif;
  
  /* Spacing System (8px based) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Animations */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}