:root {

    --primary-hue: 220;
    --primary-color: hsl(var(--primary-hue), 90%, 50%);      
    --primary-dark: hsl(var(--primary-hue), 90%, 40%);       
    --primary-light: hsl(var(--primary-hue), 90%, 96%);      
    --primary-surface: hsl(var(--primary-hue), 80%, 92%);    
    --text-on-primary: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;

   
    --body-bg: var(--gray-50);
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-height: 72px;
    
   
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-primary: 0 4px 14px 0 rgba(8, 0, 255, 0.3);

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

   
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
        --header-h-desktop: 110px;
    --header-h-mobile: 60px;
    --z-header: 1000;
    --z-drawer: 1050;
    --color-border: #e5e7eb;
    --color-bg-light: #f3f4f6;
}