:root {
  --color-player: #00ffff;
  --color-ai: #ff0000;
  --color-neutral: #888888;
  
  --color-primary: #0ff;
  --color-secondary: #0ff;
  --color-accent: #ff0;
  --color-danger: #f00;
  --color-success: #008080;
  --color-warning: #ff0;
  
  --color-text-primary: #fff;
  --color-text-secondary: #ccc;
  --color-text-muted: #aaa;
  --color-text-disabled: #666;
  
  --color-bg-primary: #000;
  --color-bg-panel: rgba(0, 0, 0, 0.85);
  --color-bg-panel-alt: rgba(0, 0, 0, 0.92);
  --color-bg-modal: rgba(0, 10, 0, 0.95);
  --color-bg-button: rgba(0, 80, 80, 0.8);
  --color-bg-button-hover: rgba(0, 120, 120, 0.9);
  --color-bg-button-disabled: rgba(80, 80, 80, 0.6);
  --color-bg-top-bar: rgba(0, 40, 40, 1);
  
  --color-hover-primary: rgba(0, 255, 255, 0.15);
  --color-hover-secondary: rgba(0, 255, 255, 0.1);
  --color-hover-danger: rgba(255, 0, 0, 0.1);
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 25px;
  --space-2xl: 40px;
  
  --panel-padding: 15px;
  --panel-padding-sm: 10px;
  --panel-padding-lg: 25px;
  --button-padding: 6px 12px;
  --button-padding-lg: 10px 20px;
  --button-padding-xl: 15px 30px;
  
  --border-width: 2px;
  --border-width-thin: 1px;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 10px;
  --border-radius-xl: 12px;
  
  --border-primary: 2px solid var(--color-primary);
  --border-secondary: 1px solid var(--color-secondary);
  --border-danger: 2px solid var(--color-danger);
  --border-muted: 1px solid rgba(255, 255, 255, 0.3);
  --border-dashed: 2px dashed rgba(0, 255, 255, 0.4);
  
  --font-family-primary: 'Exo 2', sans-serif;
  --font-size-xs: 0.7em;
  --font-size-sm: 0.8em;
  --font-size-base: 1em;
  --font-size-md: 1.1em;
  --font-size-lg: 1.2em;
  --font-size-xl: 1.5em;
  --font-size-2xl: 2.5em;
  --font-size-3xl: 4em;
  
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  --shadow-glow-primary: 0 0 10px var(--color-primary);
  --shadow-glow-secondary: 0 0 15px var(--color-secondary);
  --shadow-glow-lg: 0 0 15px rgba(0, 255, 255, 0.5);
  --shadow-glow-xl: 0 0 20px var(--color-primary);
  --shadow-panel: 0 0 15px rgba(0, 255, 255, 0.5);
  --shadow-text: 0 0 5px rgba(0, 255, 255, 0.7);
  
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.4s ease;
  
  --transition-button: all 0.3s ease;
  --transition-panel: transform 0.4s, opacity 0.4s;
  --transition-color: color 0.3s;
  --transition-background: background-color 0.2s ease;
  --transition-transform: transform 0.2s ease;
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-panel: 110;
  --z-panel-list: 120;
  --z-modal-backdrop: 200;
  --z-modal: 250;
  --z-attack-modal: 250;
  --z-research-panel: 300;
  --z-top-bar: 9999;
  --z-system-control: 1000;
  
  --panel-bg: var(--color-bg-panel);
  --panel-border: var(--border-primary);
  --panel-border-radius: var(--border-radius-lg);
  --panel-shadow: var(--shadow-panel);
  --panel-padding-default: var(--panel-padding) var(--panel-padding-lg);
  
  --button-bg-primary: linear-gradient(135deg, var(--color-success), #006666);
  --button-bg-primary-hover: linear-gradient(135deg, #006666, #008888);
  --button-bg-secondary: linear-gradient(135deg, #004c99, #0066cc);
  --button-bg-secondary-hover: linear-gradient(135deg, #0066cc, #007ffc);
  --button-bg-danger: linear-gradient(135deg, #800000, #a00000);
  --button-bg-danger-hover: linear-gradient(135deg, #a00000, #c00000);
  
  --modal-bg: linear-gradient(135deg, rgba(0, 40, 40, 0.95), rgba(0, 60, 60, 0.95));
  --modal-border: var(--border-primary);
  --modal-shadow: var(--shadow-glow-lg);
  
  --input-bg: rgba(0, 0, 0, 0.5);
  --input-border: 1px solid var(--color-primary);
  --input-focus-border: var(--color-secondary);
  --input-focus-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
  
  --top-bar-height: 55px;
  --panel-width-sm: 240px;
  --panel-width-md: 300px;
  --panel-width-lg: 300px;
  --panel-max-height: 80vh;
  
  --canvas-bg: var(--color-bg-primary);
  --orbit-line-alpha: 0.3;
  --orbit-line-width: 0.25;
}