/* Colors CSS - Theme Configuration */

:root {
    /* 
    * Primary Color: Sky Blue (#4AB8FF)
    * Secondary Color 1: Dark Gray (#333333) - Professional and contrasting with sky blue
    * Secondary Color 2: Light Gray (#F2F2F2) - Subtle background color that complements sky blue
    */
    
    /* Primary Colors - Sky Blue */
    --primary-100: #E0F4FF;
    --primary-200: #BDE6FF;
    --primary-300: #94D8FF;
    --primary-400: #6BC7FF;
    --primary-500: #4AB8FF; /* Base Primary */
    --primary-600: #1D93E1;
    --primary-700: #0C75BD;
    --primary-800: #005C99;
    --primary-900: #004675;
    
    /* Secondary Colors 1 - Dark Gray */
    --secondary-1-100: #E6E6E6;
    --secondary-1-200: #CCCCCC;
    --secondary-1-300: #B3B3B3;
    --secondary-1-400: #999999;
    --secondary-1-500: #666666; /* Base Secondary 1 */
    --secondary-1-600: #4D4D4D;
    --secondary-1-700: #333333;
    --secondary-1-800: #1A1A1A;
    --secondary-1-900: #0D0D0D;
    
    /* Secondary Colors 2 - Light Gray */
    --secondary-2-100: #FFFFFF;
    --secondary-2-200: #FAFAFA;
    --secondary-2-300: #F5F5F5;
    --secondary-2-400: #F2F2F2;
    --secondary-2-500: #E5E5E5; /* Base Secondary 2 */
    --secondary-2-600: #D9D9D9;
    --secondary-2-700: #CCCCCC;
    --secondary-2-800: #BFBFBF;
    --secondary-2-900: #B3B3B3;
    
    /* Neutral Colors */
    --neutral-100: #F5F8FD;
    --neutral-200: #E9EDF5;
    --neutral-300: #D2D9E6;
    --neutral-400: #B0BBCD;
    --neutral-500: #8A96AD;
    --neutral-600: #6C778D;
    --neutral-700: #435473;
    --neutral-800: #2E384D;
    --neutral-900: #1C2032;
    
    /* Semantic Colors */
    --success-100: #E3FBEB;
    --success-500: #4CD964;
    --success-700: #35B956;
    
    --info-100: #E3F5FC;
    --info-500: #5AC8FA;
    --info-700: #2A80A2;
    
    --warning-100: #FFF8E0;
    --warning-500: #FFCC00;
    --warning-700: #B37100;
    
    --danger-100: #FEECEB;
    --danger-500: #FF3B30;
    --danger-700: #B2281F;
}

/* Color Theme Classes */

/* Background Colors */
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }

.bg-secondary-1-100 { background-color: var(--secondary-1-100); }
.bg-secondary-1-200 { background-color: var(--secondary-1-200); }
.bg-secondary-1-300 { background-color: var(--secondary-1-300); }
.bg-secondary-1-400 { background-color: var(--secondary-1-400); }
.bg-secondary-1-500 { background-color: var(--secondary-1-500); }
.bg-secondary-1-600 { background-color: var(--secondary-1-600); }
.bg-secondary-1-700 { background-color: var(--secondary-1-700); }
.bg-secondary-1-800 { background-color: var(--secondary-1-800); }
.bg-secondary-1-900 { background-color: var(--secondary-1-900); }

.bg-secondary-2-100 { background-color: var(--secondary-2-100); }
.bg-secondary-2-200 { background-color: var(--secondary-2-200); }
.bg-secondary-2-300 { background-color: var(--secondary-2-300); }
.bg-secondary-2-400 { background-color: var(--secondary-2-400); }
.bg-secondary-2-500 { background-color: var(--secondary-2-500); }
.bg-secondary-2-600 { background-color: var(--secondary-2-600); }
.bg-secondary-2-700 { background-color: var(--secondary-2-700); }
.bg-secondary-2-800 { background-color: var(--secondary-2-800); }
.bg-secondary-2-900 { background-color: var(--secondary-2-900); }

.bg-neutral-100 { background-color: var(--neutral-100); }
.bg-neutral-200 { background-color: var(--neutral-200); }
.bg-neutral-300 { background-color: var(--neutral-300); }
.bg-neutral-400 { background-color: var(--neutral-400); }
.bg-neutral-500 { background-color: var(--neutral-500); }
.bg-neutral-600 { background-color: var(--neutral-600); }
.bg-neutral-700 { background-color: var(--neutral-700); }
.bg-neutral-800 { background-color: var(--neutral-800); }
.bg-neutral-900 { background-color: var(--neutral-900); }

.bg-success-100 { background-color: var(--success-100); }
.bg-success-500 { background-color: var(--success-500); }
.bg-success-700 { background-color: var(--success-700); }

.bg-info-100 { background-color: var(--info-100); }
.bg-info-500 { background-color: var(--info-500); }
.bg-info-700 { background-color: var(--info-700); }

.bg-warning-100 { background-color: var(--warning-100); }
.bg-warning-500 { background-color: var(--warning-500); }
.bg-warning-700 { background-color: var(--warning-700); }

.bg-danger-100 { background-color: var(--danger-100); }
.bg-danger-500 { background-color: var(--danger-500); }
.bg-danger-700 { background-color: var(--danger-700); }

.bg-white { background-color: #FFFFFF; }
.bg-black { background-color: #000000; }

/* Text Colors */
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }

.text-secondary-1-100 { color: var(--secondary-1-100); }
.text-secondary-1-200 { color: var(--secondary-1-200); }
.text-secondary-1-300 { color: var(--secondary-1-300); }
.text-secondary-1-400 { color: var(--secondary-1-400); }
.text-secondary-1-500 { color: var(--secondary-1-500); }
.text-secondary-1-600 { color: var(--secondary-1-600); }
.text-secondary-1-700 { color: var(--secondary-1-700); }
.text-secondary-1-800 { color: var(--secondary-1-800); }
.text-secondary-1-900 { color: var(--secondary-1-900); }

.text-secondary-2-100 { color: var(--secondary-2-100); }
.text-secondary-2-200 { color: var(--secondary-2-200); }
.text-secondary-2-300 { color: var(--secondary-2-300); }
.text-secondary-2-400 { color: var(--secondary-2-400); }
.text-secondary-2-500 { color: var(--secondary-2-500); }
.text-secondary-2-600 { color: var(--secondary-2-600); }
.text-secondary-2-700 { color: var(--secondary-2-700); }
.text-secondary-2-800 { color: var(--secondary-2-800); }
.text-secondary-2-900 { color: var(--secondary-2-900); }

.text-neutral-100 { color: var(--neutral-100); }
.text-neutral-200 { color: var(--neutral-200); }
.text-neutral-300 { color: var(--neutral-300); }
.text-neutral-400 { color: var(--neutral-400); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-800 { color: var(--neutral-800); }
.text-neutral-900 { color: var(--neutral-900); }

.text-success-100 { color: var(--success-100); }
.text-success-500 { color: var(--success-500); }
.text-success-700 { color: var(--success-700); }

.text-info-100 { color: var(--info-100); }
.text-info-500 { color: var(--info-500); }
.text-info-700 { color: var(--info-700); }

.text-warning-100 { color: var(--warning-100); }
.text-warning-500 { color: var(--warning-500); }
.text-warning-700 { color: var(--warning-700); }

.text-danger-100 { color: var(--danger-100); }
.text-danger-500 { color: var(--danger-500); }
.text-danger-700 { color: var(--danger-700); }

.text-white { color: #FFFFFF; }
.text-black { color: #000000; }

/* Border Colors */
.border-primary { border-color: var(--primary-500) !important; }
.border-secondary-1 { border-color: var(--secondary-1-500) !important; }
.border-secondary-2 { border-color: var(--secondary-2-500) !important; }
.border-neutral { border-color: var(--neutral-300) !important; }
.border-success { border-color: var(--success-500) !important; }
.border-info { border-color: var(--info-500) !important; }
.border-warning { border-color: var(--warning-500) !important; }
.border-danger { border-color: var(--danger-500) !important; }

/* Hover Effects */
.hover-bg-primary:hover { background-color: var(--primary-500); color: #FFFFFF; }
.hover-bg-secondary-1:hover { background-color: var(--secondary-1-500); color: #FFFFFF; }
.hover-bg-secondary-2:hover { background-color: var(--secondary-2-500); color: #FFFFFF; }

.hover-text-primary:hover { color: var(--primary-500); }
.hover-text-secondary-1:hover { color: var(--secondary-1-500); }
.hover-text-secondary-2:hover { color: var(--secondary-2-500); }

/* Gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: #FFFFFF;
}

.gradient-secondary-1 {
    background: linear-gradient(135deg, var(--secondary-1-500), var(--secondary-1-700));
    color: #FFFFFF;
}

.gradient-secondary-2 {
    background: linear-gradient(135deg, var(--secondary-2-500), var(--secondary-2-700));
    color: #FFFFFF;
}

.gradient-mixed {
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-1-500));
    color: #FFFFFF;
}

/* Theme Toggle - For future dark mode implementation */
body.dark-theme {
    --primary-100: #003355;
    --primary-500: #1D93E1;
    --primary-900: #E0F4FF;
    
    /* Invert other color variables for dark mode */
    
    /* Dark theme base colors */
    --dark: #F5F8FD;
    --dark-light: #E9EDF5;
    --gray: #B0BBCD;
    --light-gray: #435473;
    --lighter-gray: #2E384D;
    --white: #1C2032;
}