/* 
 * Speed Jobs Staff Agency - Brand Colors
 * Official Brand Palette
 */

:root {
    /* Primary Brand Colors */
    --brand-navy: #231a70;           /* Primary Navy - Main brand color */
    --brand-cyan: #29abe2;           /* Primary Cyan - Secondary brand color */
    --brand-white: #ffffff;          /* Pure White */
    
    /* Navy Variations */
    --navy-darker: #1a1455;          /* Darker navy for emphasis */
    --navy-lighter: #3c2e8f;         /* Lighter navy for hover states */
    --navy-alpha-10: rgba(35, 26, 112, 0.1);    /* 10% opacity */
    --navy-alpha-20: rgba(35, 26, 112, 0.2);    /* 20% opacity */
    --navy-alpha-30: rgba(35, 26, 112, 0.3);    /* 30% opacity */
    --navy-alpha-40: rgba(35, 26, 112, 0.4);    /* 40% opacity */
    --navy-alpha-80: rgba(35, 26, 112, 0.8);    /* 80% opacity */
    --navy-alpha-90: rgba(35, 26, 112, 0.9);    /* 90% opacity */
    
    /* Cyan Variations */
    --cyan-darker: #1e8bb8;          /* Darker cyan for emphasis */
    --cyan-lighter: #4dc3f0;         /* Lighter cyan for hover states */
    --cyan-alpha-10: rgba(41, 171, 226, 0.1);   /* 10% opacity */
    --cyan-alpha-20: rgba(41, 171, 226, 0.2);   /* 20% opacity */
    --cyan-alpha-30: rgba(41, 171, 226, 0.3);   /* 30% opacity */
    --cyan-alpha-40: rgba(41, 171, 226, 0.4);   /* 40% opacity */
    --cyan-alpha-50: rgba(41, 171, 226, 0.5);   /* 50% opacity */
    --cyan-alpha-80: rgba(41, 171, 226, 0.8);   /* 80% opacity */
    --cyan-alpha-90: rgba(41, 171, 226, 0.9);   /* 90% opacity */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-cyan) 100%);
    --gradient-primary-reverse: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-navy) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--brand-navy) 0%, var(--navy-darker) 100%);
    --gradient-accent: linear-gradient(135deg, var(--brand-cyan) 0%, var(--cyan-darker) 100%);
    --gradient-overlay-dark: linear-gradient(rgba(35, 26, 112, 0.8), rgba(35, 26, 112, 0.8));
    --gradient-overlay-light: linear-gradient(rgba(41, 171, 226, 0.8), rgba(41, 171, 226, 0.8));
    
    /* Neutral Colors (supporting palette) */
    --neutral-50: #f8fafc;           /* Very light gray */
    --neutral-100: #f1f5f9;          /* Light gray */
    --neutral-200: #e2e8f0;          /* Medium light gray */
    --neutral-300: #cbd5e1;          /* Medium gray */
    --neutral-400: #94a3b8;          /* Gray */
    --neutral-500: #64748b;          /* Medium dark gray */
    --neutral-600: #475569;          /* Dark gray */
    --neutral-700: #334155;          /* Very dark gray */
    --neutral-800: #1e293b;          /* Almost black */
    --neutral-900: #0f172a;          /* Black */
    
    /* Semantic Colors (using brand palette) */
    --success: #16a34a;              /* Green for success states */
    --warning: #eab308;              /* Yellow for warning states */
    --error: #dc2626;                /* Red for error states */
    --info: var(--brand-cyan);       /* Cyan for info states */
    
    /* Background Colors */
    --bg-primary: var(--brand-white);
    --bg-secondary: var(--neutral-50);
    --bg-dark: var(--brand-navy);
    --bg-accent: var(--brand-cyan);
    
    /* Text Colors */
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-muted: var(--neutral-500);
    --text-white: var(--brand-white);
    --text-brand: var(--brand-navy);
    --text-accent: var(--brand-cyan);
    
    /* Border Colors */
    --border-light: var(--neutral-200);
    --border-medium: var(--neutral-300);
    --border-dark: var(--neutral-400);
    --border-brand: var(--brand-navy);
    --border-accent: var(--brand-cyan);
}

/* Dark theme variations */
[data-theme="dark"] {
    --bg-primary: var(--brand-navy);
    --bg-secondary: var(--navy-darker);
    --text-primary: var(--brand-white);
    --text-secondary: var(--neutral-300);
    --text-muted: var(--neutral-400);
    --border-light: var(--navy-lighter);
    --border-medium: var(--neutral-600);
    --border-dark: var(--neutral-500);
}

/* Brand Color Classes */
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-brand-cyan { background-color: var(--brand-cyan); }
.bg-brand-white { background-color: var(--brand-white); }

.text-brand-navy { color: var(--brand-navy); }
.text-brand-cyan { color: var(--brand-cyan); }
.text-brand-white { color: var(--brand-white); }

.border-brand-navy { border-color: var(--brand-navy); }
.border-brand-cyan { border-color: var(--brand-cyan); }

.gradient-primary { background: var(--gradient-primary); }
.gradient-primary-reverse { background: var(--gradient-primary-reverse); }

/* Button Variants */
.btn-brand-primary {
    background: var(--brand-navy);
    color: var(--brand-white);
    border: 2px solid var(--brand-navy);
}

.btn-brand-primary:hover {
    background: var(--navy-lighter);
    border-color: var(--navy-lighter);
}

.btn-brand-secondary {
    background: var(--brand-cyan);
    color: var(--brand-white);
    border: 2px solid var(--brand-cyan);
}

.btn-brand-secondary:hover {
    background: var(--cyan-darker);
    border-color: var(--cyan-darker);
}

.btn-brand-outline {
    background: transparent;
    color: var(--brand-navy);
    border: 2px solid var(--brand-navy);
}

.btn-brand-outline:hover {
    background: var(--brand-navy);
    color: var(--brand-white);
}

/* Brand Shadows */
.shadow-brand-navy {
    box-shadow: 0 4px 20px var(--navy-alpha-20);
}

.shadow-brand-cyan {
    box-shadow: 0 4px 20px var(--cyan-alpha-20);
}