/* ============================================
   CUSTOM COLOR UTILITIES - Flora Talent
   ============================================ */

/* Button Color Variations */
.btn-peach {
    background-color: var(--accent-secondary);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-peach:hover {
    background-color: #f7a06d;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(249, 177, 135, 0.4);
}

.btn-orange {
    background-color: var(--accent-tertiary);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background-color: #e07020;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 130, 49, 0.4);
}

.btn-green {
    background-color: var(--accent-success);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-green:hover {
    background-color: #38b34f;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(65, 196, 90, 0.4);
}

.btn-gradient {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: var(--gradient-warm);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(247, 81, 139, 0.5);
    color: white;
}

.btn-outline-pink {
    color: var(--accent-color);
    background-color: transparent;
    border: 2px solid var(--accent-color);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-outline-pink:hover {
    background-color: var(--accent-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(247, 81, 139, 0.3);
}

/* Card Color Variations */
.card-peach {
    background-color: var(--accent-secondary);
    color: white;
}

.card-peach .card-title,
.card-peach h1,
.card-peach h2,
.card-peach h3,
.card-peach h4,
.card-peach h5,
.card-peach h6 {
    color: white;
}

.card-orange {
    background-color: var(--accent-tertiary);
    color: white;
}

.card-orange .card-title,
.card-orange h1,
.card-orange h2,
.card-orange h3,
.card-orange h4,
.card-orange h5,
.card-orange h6 {
    color: white;
}

.card-green {
    background-color: var(--accent-success);
    color: white;
}

.card-green .card-title,
.card-green h1,
.card-green h2,
.card-green h3,
.card-green h4,
.card-green h5,
.card-green h6 {
    color: white;
}

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

.card-gradient .card-title,
.card-gradient h1,
.card-gradient h2,
.card-gradient h3,
.card-gradient h4,
.card-gradient h5,
.card-gradient h6 {
    color: white;
}

/* Badge Color Variations */
.badge-peach {
    background-color: var(--accent-secondary);
    color: white;
}

.badge-orange {
    background-color: var(--accent-tertiary);
    color: white;
}

.badge-green {
    background-color: var(--accent-success);
    color: white;
}

/* Icon Color Variations */
.icon-peach {
    color: var(--accent-secondary);
}

.icon-orange {
    color: var(--accent-tertiary);
}

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

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

/* Background Overlays with Colors */
.overlay-peach::before {
    background: linear-gradient(
        135deg,
        rgba(249, 177, 135, 0.9) 0%,
        rgba(247, 81, 139, 0.9) 100%
    );
}

.overlay-orange::before {
    background: linear-gradient(
        135deg,
        rgba(245, 130, 49, 0.9) 0%,
        rgba(249, 177, 135, 0.9) 100%
    );
}

.overlay-green::before {
    background: linear-gradient(
        135deg,
        rgba(65, 196, 90, 0.9) 0%,
        rgba(249, 177, 135, 0.9) 100%
    );
}

/* Hover Effects with Color Transitions */
.hover-peach {
    transition: all 0.3s ease;
}

.hover-peach:hover {
    background-color: var(--accent-secondary);
    color: white;
}

.hover-orange {
    transition: all 0.3s ease;
}

.hover-orange:hover {
    background-color: var(--accent-tertiary);
    color: white;
}

.hover-green {
    transition: all 0.3s ease;
}

.hover-green:hover {
    background-color: var(--accent-success);
    color: white;
}

/* Border Color Variations */
.border-peach {
    border-color: var(--accent-secondary) !important;
}

.border-orange {
    border-color: var(--accent-tertiary) !important;
}

.border-green {
    border-color: var(--accent-success) !important;
}

.border-pink {
    border-color: var(--accent-color) !important;
}

/* Text Color Variations */
.text-peach {
    color: var(--accent-secondary) !important;
}

.text-orange {
    color: var(--accent-tertiary) !important;
}

.text-green {
    color: var(--accent-success) !important;
}

.text-pink {
    color: var(--accent-color) !important;
}

/* Gradient Text Effect */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Dividers with Colors */
.divider-peach {
    height: 3px;
    background: var(--accent-secondary);
    width: 60px;
    margin: 20px auto;
}

.divider-orange {
    height: 3px;
    background: var(--accent-tertiary);
    width: 60px;
    margin: 20px auto;
}

.divider-green {
    height: 3px;
    background: var(--accent-success);
    width: 60px;
    margin: 20px auto;
}

.divider-gradient {
    height: 3px;
    background: var(--gradient-primary);
    width: 60px;
    margin: 20px auto;
}