/* SpecBrains Color Palette & Theme */

:root {
    /* Primary Colors */
    --color-primary: #00BCD4;        /* Turquoise */
    --color-secondary: #E91E63;      /* Pink/Magenta */
    --color-accent-yellow: #FFD54F;  /* Yellow */
    --color-accent-purple: #9C27B0;  /* Purple */
    
    /* Grays & Neutrals */
    --color-dark: #1A237E;           /* Dark Navy */
    --color-text-dark: #263238;      /* Dark Gray */
    --color-text-medium: #757575;    /* Medium Gray */
    --color-text-light: #BDBDBD;     /* Light Gray */
    --color-border: #E0E0E0;         /* Border Color */
    --color-bg-light: #FAFAFA;       /* Light Background */
    --color-white: #FFFFFF;          /* White */
    
    /* Status Colors */
    --color-success: #4CAF50;        /* Green */
    --color-warning: #FF6F00;        /* Orange */
    --color-error: #F44336;          /* Red */
    --color-info: #2196F3;           /* Blue */
}

/* Utility Classes */
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-dark {
    color: var(--color-dark);
}

.text-muted {
    color: var(--color-text-medium);
}

.bg-primary {
    background-color: var(--color-primary);
    color: white;
}

.bg-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.bg-light {
    background-color: var(--color-bg-light);
}

.bg-white {
    background-color: var(--color-white);
}

/* Gradient Backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-purple) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-yellow) 100%);
}

.gradient-warm {
    background: linear-gradient(135deg, var(--color-accent-yellow) 0%, var(--color-warning) 100%);
}

/* Border Colors */
.border-primary {
    border-color: var(--color-primary);
}

.border-secondary {
    border-color: var(--color-secondary);
}

/* Color Blocks for Different Sections */
.accent-turquoise {
    color: var(--color-primary);
}

.accent-pink {
    color: var(--color-secondary);
}

.accent-purple {
    color: var(--color-accent-purple);
}

.accent-yellow {
    color: var(--color-accent-yellow);
}

/* Icon Background Utilities */
.icon-bg-turquoise {
    background-color: var(--color-primary);
}

.icon-bg-pink {
    background-color: var(--color-secondary);
}

.icon-bg-purple {
    background-color: var(--color-accent-purple);
}

.icon-bg-yellow {
    background-color: var(--color-accent-yellow);
}

.icon-bg-green {
    background-color: var(--color-success);
}

.icon-bg-orange {
    background-color: var(--color-warning);
}

/* Service Card Color Themes */
.service-1 {
    border-left: 4px solid var(--color-primary);
}

.service-2 {
    border-left: 4px solid var(--color-secondary);
}

.service-3 {
    border-left: 4px solid var(--color-accent-purple);
}

.service-4 {
    border-left: 4px solid var(--color-accent-yellow);
}

.service-5 {
    border-left: 4px solid var(--color-success);
}

.service-6 {
    border-left: 4px solid var(--color-warning);
}

/* Button Color Variants */
.btn-turquoise {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.btn-turquoise:hover {
    background-color: #0097A7;
    border-color: #0097A7;
}

.btn-pink {
    background-color: var(--color-secondary);
    color: white;
    border-color: var(--color-secondary);
}

.btn-pink:hover {
    background-color: #C2185B;
    border-color: #C2185B;
}

.btn-purple {
    background-color: var(--color-accent-purple);
    color: white;
    border-color: var(--color-accent-purple);
}

.btn-purple:hover {
    background-color: #7B1FA2;
    border-color: #7B1FA2;
}

/* Text Highlight */
.highlight-turquoise {
    background-color: rgba(0, 188, 212, 0.1);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: 4px;
}

.highlight-pink {
    background-color: rgba(233, 30, 99, 0.1);
    color: var(--color-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Badge Colors */
.badge-turquoise {
    background-color: var(--color-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-pink {
    background-color: var(--color-secondary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-success {
    background-color: var(--color-success);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

/* Section Background Colors */
.section-light {
    background-color: var(--color-bg-light);
}

.section-white {
    background-color: var(--color-white);
}

.section-primary {
    background-color: var(--color-primary);
    color: white;
}

.section-secondary {
    background-color: var(--color-secondary);
    color: white;
}

/* Link Colors */
.link-turquoise {
    color: var(--color-primary);
}

.link-turquoise:hover {
    color: #0097A7;
}

.link-pink {
    color: var(--color-secondary);
}

.link-pink:hover {
    color: #C2185B;
}

.link-purple {
    color: var(--color-accent-purple);
}

.link-purple:hover {
    color: #7B1FA2;
}

/* Card Accent Indicators */
.card-accent-top {
    border-top: 3px solid var(--color-primary);
}

.card-accent-left {
    border-left: 3px solid var(--color-primary);
}

.card-accent-pink-top {
    border-top: 3px solid var(--color-secondary);
}

.card-accent-pink-left {
    border-left: 3px solid var(--color-secondary);
}

/* Hover Effects with Colors */
.hover-primary:hover {
    color: var(--color-primary);
}

.hover-secondary:hover {
    color: var(--color-secondary);
}

.hover-shadow-primary:hover {
    box-shadow: 0 8px 16px rgba(0, 188, 212, 0.2);
}

.hover-shadow-pink:hover {
    box-shadow: 0 8px 16px rgba(233, 30, 99, 0.2);
}

/* Divider Colors */
.divider-primary {
    border-top: 2px solid var(--color-primary);
}

.divider-secondary {
    border-top: 2px solid var(--color-secondary);
}

.divider-light {
    border-top: 1px solid var(--color-border);
}

/* Success/Error Message Colors */
.alert-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 4px solid var(--color-success);
    color: var(--color-success);
    padding: 12px;
    border-radius: 4px;
}

.alert-error {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 4px solid var(--color-error);
    color: var(--color-error);
    padding: 12px;
    border-radius: 4px;
}

.alert-warning {
    background-color: rgba(255, 111, 0, 0.1);
    border-left: 4px solid var(--color-warning);
    color: var(--color-warning);
    padding: 12px;
    border-radius: 4px;
}

.alert-info {
    background-color: rgba(33, 150, 243, 0.1);
    border-left: 4px solid var(--color-info);
    color: var(--color-info);
    padding: 12px;
    border-radius: 4px;
}