:root {
  --x-gradient: linear-gradient(135deg, #f833a9 0%, #4819c2 100%);
  --bg: #080d27;
  --bg-card: #0d0d0d;
  --panel: rgba(12, 18, 44, 0.92);
  --text: #eaedff;
  --muted: #9aa6d1;
  --border: rgba(51, 70, 121, 0.55);
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  --topbarH: 80px;
  --panelW: 360px;
  --xplrit-bg: #080d27;
  --xplrit-border: #334679;
  --xplrit-border-soft: rgba(51, 70, 121, 0.5);
  --xplrit-text: #eaedff;
  --xplrit-accent: #f833a9;
  --xplrit-blue: #3c52d9;
  --xplrit-surface: linear-gradient(180deg, #1b275a 0%, #0e1434 100%);
  --xplrit-surface-2: linear-gradient(180deg, #253575 0%, #162561 100%);
  --xplrit-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  
  /* Uniform Colors */
  --surface-1: #1f2330;
  --surface-2: #2a2f38;
  --surface-3: #262b3a;
  --input-border: #515459;
  --border-color: #343a45;
  --blue-border: #2f62c8;
  --drawer-bg: rgba(12, 18, 44, 0.95);
  --drawer-border: rgba(25, 89, 173, 0.35);

  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.2);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessibility: Focus Visible */
:focus-visible {
  outline: 2px solid var(--xplrit-blue);
  outline-offset: 2px;
}