/* Custom Color Variables */
:root {
    --primary-color: #f1f1f1;
    --secondary-color: #fdb827;
    --accent-color: #21209c;
    --dark-color: #23120b;
}

/* Custom Color Classes */
.bg-primary-custom {
    background-color: var(--primary-color);
}

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

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

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

.text-primary-custom {
    color: var(--primary-color);
}

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

.text-accent-custom {
    color: var(--accent-color);
}

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

.border-primary-custom {
    border-color: var(--primary-color);
}

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

.border-accent-custom {
    border-color: var(--accent-color);
}

.border-dark-custom {
    border-color: var(--dark-color);
}

/* Hover Effects */
.hover-secondary:hover {
    background-color: var(--secondary-color);
    color: white;
}

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

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

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

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