:root {
  /* Primary - New Civilized & Luxurious Palette */
  --bg-primary: #07050f;
  --bg-secondary: #0f0a1c;
  --bg-card: rgba(22, 16, 38, 0.75);
  --primary: #9b5cff;
  --primary-soft: #b77cff;
  --pink: #ff4fa3;
  --cyan: #35d8ff;
  --text-primary: #ffffff;
  --text-secondary: #a7a0b8;
  --success: #42e8a1;
  --danger: #ff5574;
  --border: rgba(255, 255, 255, 0.08);
  --gradient-main: linear-gradient(135deg, #8b4dff 0%, #d34fff 45%, #ff4fa3 100%);

  /* Legacy support - mapped to new palette */
  --primary-950: #07050f;
  --primary-900: #0f0a1c;
  --primary-850: #161026;
  --primary-800: #1e183a;
  --primary-700: #2d2450;
  --primary-600: #3d3266;
  --primary-500: #4d407c;
  --primary-400: #5e4e92;
  --primary-300: #7e6eb8;
  --primary-200: #a599d4;
  --primary-100: #d0c8f0;

  /* Neon Colors - updated to new palette */
  --neon-purple: #9b5cff;
  --neon-blue: #35d8ff;
  --neon-cyan: #35d8ff;
  --neon-violet: #d34fff;
  --neon-indigo: #8b4dff;

  /* Status Colors */
  --success: #42e8a1;
  --error: #ff5574;
  --warning: #ffb842;
  --danger: #ff5574;
  --info: #35d8ff;

  /* Background Colors */
  --bg-tertiary: #161026;
  --bg-card-hover: rgba(30, 24, 58, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(7, 5, 15, 0.6);

  /* Text Colors */
  --text-muted: #7d7894;
  --text-glow: #35d8ff;

  /* Border Colors */
  --border-default: rgba(155, 92, 255, 0.22);
  --border-hover: rgba(155, 92, 255, 0.45);
  --border-glow: rgba(53, 216, 255, 0.5);
  --border-neon: rgba(211, 79, 255, 0.5);

  /* Gradients */
  --gradient-body: linear-gradient(180deg, #07050f 0%, #0f0a1c 35%, #161026 100%);
  --gradient-card: linear-gradient(165deg, rgba(155, 92, 255, 0.16) 0%, rgba(211, 79, 255, 0.06) 100%);
  --gradient-neon: linear-gradient(135deg, #9b5cff 0%, #d34fff 100%);
  --gradient-button: linear-gradient(135deg, #8b4dff 0%, #9b5cff 50%, #d34fff 100%);
  --gradient-avatar: linear-gradient(135deg, #0f0a1c, #9b5cff);

  /* Control Panel Dark Blue/Purple Gradient Palette */
  --panel-ink: #07050f;
  --panel-purple: #1a0f3a;
  --panel-pink: #2a103a;
  --panel-blue: #1a0f3a;
  --panel-light: #161026;
  --panel-base: #07050f;
  --gradient-body-panel: linear-gradient(180deg, #07050f 0%, #1a0f3a 25%, #2a103a 50%, #1a0f3a 75%, #161026 90%, #040308 100%);
  --gradient-panel-accent: linear-gradient(135deg, #4a2a7a 0%, #7a3faa 60%, #6a2a8a 100%);
  --gradient-panel-card: linear-gradient(165deg, rgba(106, 42, 138, 0.20) 0%, rgba(42, 16, 58, 0.14) 55%, rgba(122, 63, 170, 0.12) 100%);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(7, 5, 15, 0.4);
  --shadow-md: 0 4px 14px rgba(7, 5, 15, 0.5);
  --shadow-lg: 0 8px 28px rgba(7, 5, 15, 0.6);
  --shadow-xl: 0 12px 44px rgba(0, 0, 0, 0.65);
  --shadow-neon: 0 0 20px rgba(155, 92, 255, 0.45);
  --shadow-neon-blue: 0 0 20px rgba(53, 216, 255, 0.45);
  --shadow-glow: 0 0 5px var(--neon-purple),
                   0 0 12px var(--neon-violet),
                   0 0 24px var(--pink);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 26px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-Index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}