/* Role-Based Colour Schemes for WIIFM Personalization */

/* Role-Specific Accent Colours */
:root {
    /* CISO Colours - Security, Protection, Urgency */
    --color-ciso: #ef4444; /* red-500 */
    --color-ciso-hover: #dc2626; /* red-600 */
    --color-ciso-dim: rgba(239, 68, 68, 0.12);
    --color-on-ciso: #ffffff;
    
    /* IAM Colours - Trust, Reliability, Access Control */
    --color-iam: #3b82f6; /* blue-500 */
    --color-iam-hover: #2563eb; /* blue-600 */
    --color-iam-dim: rgba(59, 130, 246, 0.12);
    --color-on-iam: #ffffff;
    
    /* Finance Colours - Growth, Savings, ROI */
    --color-finance: #10b981; /* emerald-500 */
    --color-finance-hover: #059669; /* emerald-600 */
    --color-finance-dim: rgba(16, 185, 129, 0.12);
    --color-on-finance: #ffffff;
    
    /* Legal/Compliance Colours - Authority, Regulation, Trust */
    --color-legal: #8b5cf6; /* violet-500 */
    --color-legal-hover: #7c3aed; /* violet-600 */
    --color-legal-dim: rgba(139, 92, 246, 0.12);
    --color-on-legal: #ffffff;
    
    /* MSP Colours - Partnership, Growth, Service */
    --color-msp: #0d9488; /* teal-600 */
    --color-msp-hover: #0f766e; /* teal-700 */
    --color-msp-dim: rgba(13, 148, 136, 0.12);
    --color-on-msp: #ffffff;
}

/* Role-Based Glass Card Accents */
.glass-card--ciso { border-top: 4px solid var(--color-ciso) !important; }
.glass-card--iam { border-top: 4px solid var(--color-iam) !important; }
.glass-card--finance { border-top: 4px solid var(--color-finance) !important; }
.glass-card--legal { border-top: 4px solid var(--color-legal) !important; }
.glass-card--msp { border-top: 4px solid var(--color-msp) !important; }

/* Role-Based Feature Card Variants */
.feature-card--ciso {
    border-left: 4px solid var(--color-ciso);
    background: rgba(239, 68, 68, 0.03);
}
.feature-card--ciso:hover {
    background: rgba(239, 68, 68, 0.05);
    border-color: var(--color-ciso);
}

.feature-card--iam {
    border-left: 4px solid var(--color-iam);
    background: rgba(59, 130, 246, 0.03);
}
.feature-card--iam:hover {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--color-iam);
}

.feature-card--finance {
    border-left: 4px solid var(--color-finance);
    background: rgba(16, 185, 129, 0.03);
}
.feature-card--finance:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--color-finance);
}

.feature-card--legal {
    border-left: 4px solid var(--color-legal);
    background: rgba(139, 92, 246, 0.03);
}
.feature-card--legal:hover {
    background: rgba(139, 92, 246, 0.05);
    border-color: var(--color-legal);
}

.feature-card--msp {
    border-left: 4px solid var(--color-msp);
    background: rgba(13, 148, 136, 0.03);
}
.feature-card--msp:hover {
    background: rgba(13, 148, 136, 0.05);
    border-color: var(--color-msp);
}

/* Role-Based Button Variants */
.btn--ciso {
    background: linear-gradient(135deg, var(--color-ciso) 0%, var(--color-ciso-hover) 100%);
    color: var(--color-on-ciso);
    box-shadow: var(--shadow-md);
}
.btn--ciso:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--iam {
    background: linear-gradient(135deg, var(--color-iam) 0%, var(--color-iam-hover) 100%);
    color: var(--color-on-iam);
    box-shadow: var(--shadow-md);
}
.btn--iam:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--finance {
    background: linear-gradient(135deg, var(--color-finance) 0%, var(--color-finance-hover) 100%);
    color: var(--color-on-finance);
    box-shadow: var(--shadow-md);
}
.btn--finance:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--legal {
    background: linear-gradient(135deg, var(--color-legal) 0%, var(--color-legal-hover) 100%);
    color: var(--color-on-legal);
    box-shadow: var(--shadow-md);
}
.btn--legal:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--msp {
    background: linear-gradient(135deg, var(--color-msp) 0%, var(--color-msp-hover) 100%);
    color: var(--color-on-msp);
    box-shadow: var(--shadow-md);
}
.btn--msp:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Role-Based Badge Variations (enhanced) */
.badge--ciso { 
    background: var(--color-ciso); 
    color: var(--color-on-ciso); 
}
.badge--iam { 
    background: var(--color-iam); 
    color: var(--color-on-iam); 
}
.badge--finance { 
    background: var(--color-finance); 
    color: var(--color-on-finance); 
}
.badge--legal { 
    background: var(--color-legal); 
    color: var(--color-on-legal); 
}
.badge--msp { 
    background: var(--color-msp); 
    color: var(--color-on-msp); 
}

/* Role-Based Header Accents */
.role-header--ciso { 
    border-left: 3px solid var(--color-ciso); 
    padding-left: var(--space-4); 
    background: rgba(239, 68, 68, 0.02); 
}
.role-header--iam { 
    border-left: 3px solid var(--color-iam); 
    padding-left: var(--space-4); 
    background: rgba(59, 130, 246, 0.02); 
}
.role-header--finance { 
    border-left: 3px solid var(--color-finance); 
    padding-left: var(--space-4); 
    background: rgba(16, 185, 129, 0.02); 
}
.role-header--legal { 
    border-left: 3px solid var(--color-legal); 
    padding-left: var(--space-4); 
    background: rgba(139, 92, 246, 0.02); 
}
.role-header--msp { 
    border-left: 3px solid var(--color-msp); 
    padding-left: var(--space-4); 
    background: rgba(13, 148, 136, 0.02); 
}

/* Responsive Adjustments for Role Colours */
@media (max-width: 768px) {
    .role-header--ciso,
    .role-header--iam,
    .role-header--finance,
    .role-header--legal,
    .role-header--msp {
        border-left: none;
        border-top: 3px solid;
        padding-left: 0;
        padding-top: var(--space-3);
    }
    
    .role-header--ciso { border-top-color: var(--color-ciso); }
    .role-header--iam { border-top-color: var(--color-iam); }
    .role-header--finance { border-top-color: var(--color-finance); }
    .role-header--legal { border-top-color: var(--color-legal); }
    .role-header--msp { border-top-color: var(--color-msp); }
}