:root {
  --font-family-base: 'Cairo', system-ui, -apple-system, sans-serif;
  
  --color-bg:            #0d0d1a;
  --color-bg-secondary:  #12122a;
  --color-bg-panel:      #0f0f22;
  --color-bg-card:       #1a1a35;
  --color-bg-hover:      #22224a;

  --color-primary:       #6c63ff;
  --color-primary-dark:  #4a42cc;
  --color-primary-light: #8d86ff;

  --color-accent:        #00d4ff;
  --color-accent-dark:   #0099bb;

  --color-gold:          #ffd700;
  --color-silver:        #c0c0c0;
  --color-bronze:        #cd7f32;

  --color-success:       #2ecc71;
  --color-warning:       #f39c12;
  --color-danger:        #e74c3c;
  --color-info:          #3498db;

  --color-text:          #e0e0f0;
  --color-text-muted:    #8888aa;
  --color-text-dim:      #555577;

  --color-border:        rgba(255,255,255,0.4);
  --color-border-light:  rgba(255,255,255,0.25);

  
  --icon-filter:        invert(96%) sepia(4%) saturate(120%) hue-rotate(190deg) brightness(110%);
  --icon-filter-muted:  invert(75%) sepia(6%) saturate(90%) hue-rotate(190deg) brightness(105%);

  
  --header-height:       72px;
  --alertbar-height:     24px;
  --header-height:       84px;
  --header-banner-image: none;
  --header-banner-size:  cover;
  --header-banner-pos:   center;
  --total-header:        var(--header-height);

  
  --panel-left-width:    260px;
  --panel-right-width:   300px;

  
  --border-radius-sm:    6px;
  --border-radius-md:    10px;
  --border-radius-lg:    16px;
  --border-radius-xl:    24px;
  --border-radius-full:  9999px;

  
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 18px rgba(108,99,255,0.5);

  
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  
  --z-base:      1;
  --z-panel:     10;
  --z-dropdown:  100;
  --z-modal:     200;
  --z-overlay:   80;
  --z-toast:     300;
  --z-header:    50;
}