:root {
    /* Primary Colors */
    --color-primary: #2563eb;      /* Bright blue - Primary brand color */
    --color-secondry: #1e40af;     /* Darker blue - Secondary color */
    --color-hover: #1d4ed8;        /* Hover state for primary */
    
    /* Primary color variations with opacity */
    --rgba-primary-1: rgba(37, 99, 235, 0.1);
    --rgba-primary-2: rgba(37, 99, 235, 0.2);
    --rgba-primary-3: rgba(37, 99, 235, 0.3);
    --rgba-primary-4: rgba(37, 99, 235, 0.4);
    --rgba-primary-5: rgba(37, 99, 235, 0.5);
    --rgba-primary-6: rgba(37, 99, 235, 0.6);
    --rgba-primary-7: rgba(37, 99, 235, 0.7);
    --rgba-primary-8: rgba(37, 99, 235, 0.8);
    --rgba-primary-9: rgba(37, 99, 235, 0.9);
    
    /* Text and Background Colors */
    --text-sec: #1f2937;           /* Dark gray for secondary text */
    --text-primary: #111827;       /* Almost black for primary text */
    --text-muted: #6b7280;         /* Muted text color */
    --bg-light: #f9fafb;           /* Light background */
    --bg-white: #ffffff;           /* Pure white */
    
    /* Accent Colors */
    --color-accent: #3b82f6;       /* Lighter blue for accents */
    --color-success: #10b981;      /* Green for success messages */
    --color-warning: #f59e0b;      /* Yellow for warnings */
    --color-danger: #ef4444;       /* Red for errors/danger */
    
    /* Border Colors */
    --border-light: #e5e7eb;       /* Light border */
    --border-medium: #d1d5db;      /* Medium border */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --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);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondry));
    
    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius: 0.375rem;      /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-full: 9999px;   /* Full rounded */
    
    /* Transitions */
    --transition: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;
}