:root {
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-primary-active: #6d28d9;
  --color-primary-light: #a78bfa;
  --color-primary-lighter: #c4b5fd;
  --color-primary-lightest: #f5f3ff;
  --color-primary-rgb: 139, 92, 246;

  --color-secondary: #a78bfa;
  --color-secondary-hover: #8b5cf6;
  --color-secondary-active: #7c3aed;
  --color-secondary-light: #c4b5fd;
  --color-secondary-lightest: #ede9fe;
  --color-secondary-rgb: 167, 139, 250;

  --color-accent: #9333ea;
  --color-accent-hover: #7e22ce;
  --color-accent-active: #6b21a8;
  --color-accent-light: #f3e8ff;
  --color-accent-lighter: #faf5ff;
  --color-accent-rgb: 147, 51, 234;

  --color-purple: #a855f7;
  --color-purple-hover: #9333ea;
  --color-purple-dark: #7e22ce;
  --color-purple-light: #c084fc;
  --color-purple-lightest: #faf5ff;
  --color-purple-rgb: 168, 85, 247;

  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-light: #d1fae5;
  --color-success-dark: #15803d;
  --color-success-rgb: 34, 197, 94;

  --color-warning: #fbbf24;
  --color-warning-hover: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  --color-warning-rgb: 251, 191, 36;

  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #b91c1c;
  --color-danger-rgb: 239, 68, 68;

  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;
  --color-info-rgb: 59, 130, 246;

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #333333;
  --color-text-tertiary: #555555;
  --color-text-quaternary: #666666;
  --color-text-muted: #999999;
  --color-text-placeholder: #94a3b8;
  --color-text-disabled: #cbd5e1;
  --color-text-inverse: #ffffff;

  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #f5f5f5;
  --color-bg-quaternary: #f8fafc;
  --color-bg-light: #fafafa;
  --color-bg-hover: #f1f3f5;
  --color-bg-active: #e9ecef;
  --color-bg-selected: #f5f3ff;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.3);
  --color-bg-overlay-dark: rgba(0, 0, 0, 0.7);

  --color-bg-dark: #1a1a1a;
  --color-bg-dark-secondary: #2d2d2d;
  --color-bg-dark-tertiary: #3d3d3d;
  --color-bg-dark-hover: #404040;

  --color-border-lightest: #f5f5f5;
  --color-border-light: #f0f0f0;
  --color-border: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-tertiary: #dee2e6;
  --color-border-dark: #d0d0d0;
  --color-border-darker: #999999;

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-primary-90: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  --gradient-primary-120: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-primary-reverse: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  --gradient-primary-vertical: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  --gradient-accent-reverse: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent-active) 100%);

  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  --gradient-purple-reverse: linear-gradient(135deg, var(--color-purple-dark) 0%, var(--color-purple) 100%);

  --gradient-dark: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-dark-secondary) 100%);
  --gradient-dark-vertical: linear-gradient(180deg, var(--color-bg-dark) 0%, #0d0d0d 100%);
  --gradient-dark-reverse: linear-gradient(135deg, var(--color-bg-dark-secondary) 0%, var(--color-bg-dark) 100%);

  --gradient-overlay: linear-gradient(120deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.15) 100%);
  --gradient-overlay-vertical: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 12px 40px rgba(0, 0, 0, 0.2);

  --shadow-primary: 0 5px 20px rgba(var(--color-primary-rgb), 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
  --shadow-secondary: 0 4px 16px rgba(var(--color-secondary-rgb), 0.3);
  --shadow-accent: 0 4px 16px rgba(var(--color-accent-rgb), 0.3);
  --shadow-purple: 0 4px 15px rgba(var(--color-purple-rgb), 0.4);

  --shadow-inset: inset 0 0 5px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
  --shadow-focus-accent: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);

  --shadow-text-sm: 0 0 4px rgba(0, 0, 0, 0.7), 0 3px 12px rgba(0, 0, 0, 0.8);
  --shadow-text-md: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.8), 0 6px 24px rgba(0, 0, 0, 0.9);

  --opacity-hover: 0.85;
  --opacity-disabled: 0.5;
  --opacity-overlay: 0.5;
  --opacity-muted: 0.6;

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

[data-theme="dark"] {
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #e5e5e5;
  --color-text-tertiary: #d4d4d4;
  --color-text-quaternary: #a3a3a3;
  --color-text-muted: #737373;
  --color-text-placeholder: #525252;
  --color-text-disabled: #404040;
  --color-text-inverse: #1a1a1a;

  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #262626;
  --color-bg-tertiary: #2d2d2d;
  --color-bg-quaternary: #333333;
  --color-bg-light: #3d3d3d;
  --color-bg-hover: #404040;
  --color-bg-active: #4d4d4d;
  --color-bg-selected: #2d1f3d;

  --color-border-lightest: #2d2d2d;
  --color-border-light: #333333;
  --color-border: #404040;
  --color-border-secondary: #525252;
  --color-border-tertiary: #4d4d4d;
  --color-border-dark: #5c5c5c;

  --color-bg-dark: #0d0d0d;
  --color-bg-dark-secondary: #141414;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.8);
  --shadow-2xl: 0 12px 40px rgba(0, 0, 0, 0.9);

  --color-primary: #a78bfa;
  --color-primary-rgb: 167, 139, 250;
  --color-secondary: #c4b5fd;
  --color-secondary-rgb: 196, 181, 253;
  
  --shadow-primary: 0 5px 20px rgba(var(--color-primary-rgb), 0.4);
  --shadow-primary-lg: 0 6px 20px rgba(var(--color-primary-rgb), 0.5);
}

.high-contrast {
  --color-text-primary: #000000;
  --color-text-secondary: #1a1a1a;
  --color-text-tertiary: #333333;
  
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  
  --color-border: #000000;
  --color-border-secondary: #333333;
  
  --color-primary: #5b21b6;
  --color-secondary: #4c1d95;
  --color-danger: #cc0000;
  
  --color-success: #006600;
}

@media print {
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-text-tertiary: #666666;
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #ffffff;
    
    --color-primary: #8b5cf6;
    --color-secondary: #a78bfa;
    
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-primary: none;
    --shadow-primary-lg: none;
    --shadow-secondary: none;
    --shadow-accent: none;
    --shadow-purple: none;
    --shadow-focus: none;
    --shadow-focus-accent: none;
  }
}

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  html,
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.16);
  }
}