/* ==========================================
   WIKI Mobility - Color Utilities
   Classi di utilità per i colori del brand
   ========================================== */

/* === Background Colors === */
.bg-sole-vivo {
    background-color: var(--sole-vivo) !important;
    color: white;
}

.bg-sole-scuro {
    background-color: var(--sole-scuro) !important;
    color: white;
}

.bg-sole-chiaro {
    background-color: var(--sole-chiaro) !important;
    color: var(--sole-scuro);
}

.bg-verde-foresta {
    background-color: var(--verde-foresta) !important;
    color: white;
}

.bg-verde-scuro {
    background-color: var(--verde-scuro) !important;
    color: white;
}

.bg-verde-chiaro {
    background-color: var(--verde-chiaro) !important;
    color: var(--verde-scuro);
}

.bg-terra-quieta {
    background-color: var(--terra-quieta) !important;
    color: var(--terra-scura);
}

.bg-terra-scura {
    background-color: var(--terra-scura) !important;
    color: white;
}

.bg-cielo-calmo {
    background-color: var(--cielo-calmo) !important;
    color: white;
}

.bg-cielo-scuro {
    background-color: var(--cielo-scuro) !important;
    color: white;
}

.bg-cielo-chiaro {
    background-color: var(--cielo-chiaro) !important;
    color: var(--cielo-scuro);
}

/* === Text Colors === */
.text-sole-vivo {
    color: var(--sole-vivo) !important;
}

.text-sole-scuro {
    color: var(--sole-scuro) !important;
}

.text-verde-foresta {
    color: var(--verde-foresta) !important;
}

.text-verde-scuro {
    color: var(--verde-scuro) !important;
}

.text-terra-quieta {
    color: var(--terra-quieta) !important;
}

.text-terra-scura {
    color: var(--terra-scura) !important;
}

.text-cielo-calmo {
    color: var(--cielo-calmo) !important;
}

.text-cielo-scuro {
    color: var(--cielo-scuro) !important;
}

/* === Border Colors === */
.border-sole-vivo {
    border-color: var(--sole-vivo) !important;
}

.border-verde-foresta {
    border-color: var(--verde-foresta) !important;
}

.border-terra-quieta {
    border-color: var(--terra-quieta) !important;
}

.border-cielo-calmo {
    border-color: var(--cielo-calmo) !important;
}

/* === Button Variants === */
.btn-sole-vivo {
    background-color: var(--sole-vivo);
    border-color: var(--sole-vivo);
    color: white;
}

.btn-sole-vivo:hover {
    background-color: var(--sole-scuro);
    border-color: var(--sole-scuro);
    color: white;
}

.btn-outline-sole-vivo {
    background-color: transparent;
    border-color: var(--sole-vivo);
    color: var(--sole-vivo);
}

.btn-outline-sole-vivo:hover {
    background-color: var(--sole-vivo);
    border-color: var(--sole-vivo);
    color: white;
}

.btn-verde-foresta {
    background-color: var(--verde-foresta);
    border-color: var(--verde-foresta);
    color: white;
}

.btn-verde-foresta:hover {
    background-color: var(--verde-scuro);
    border-color: var(--verde-scuro);
    color: white;
}

.btn-outline-verde-foresta {
    background-color: transparent;
    border-color: var(--verde-foresta);
    color: var(--verde-foresta);
}

.btn-outline-verde-foresta:hover {
    background-color: var(--verde-foresta);
    border-color: var(--verde-foresta);
    color: white;
}

.btn-cielo-calmo {
    background-color: var(--cielo-calmo);
    border-color: var(--cielo-calmo);
    color: white;
}

.btn-cielo-calmo:hover {
    background-color: var(--cielo-scuro);
    border-color: var(--cielo-scuro);
    color: white;
}

.btn-outline-cielo-calmo {
    background-color: transparent;
    border-color: var(--cielo-calmo);
    color: var(--cielo-calmo);
}

.btn-outline-cielo-calmo:hover {
    background-color: var(--cielo-calmo);
    border-color: var(--cielo-calmo);
    color: white;
}

.btn-terra-quieta {
    background-color: var(--terra-quieta);
    border-color: var(--terra-quieta);
    color: var(--terra-scura);
}

.btn-terra-quieta:hover {
    background-color: var(--terra-scura);
    border-color: var(--terra-scura);
    color: white;
}

/* === Badge Variants === */
.badge-sole-vivo {
    background-color: var(--sole-vivo);
    color: white;
}

.badge-verde-foresta {
    background-color: var(--verde-foresta);
    color: white;
}

.badge-cielo-calmo {
    background-color: var(--cielo-calmo);
    color: white;
}

.badge-terra-quieta {
    background-color: var(--terra-quieta);
    color: var(--terra-scura);
}

/* === Alert Variants === */
.alert-sole {
    background-color: var(--sole-chiaro);
    color: var(--sole-scuro);
    border-color: var(--sole-vivo);
}

.alert-verde {
    background-color: var(--verde-chiaro);
    color: var(--verde-scuro);
    border-color: var(--verde-foresta);
}

.alert-cielo {
    background-color: var(--cielo-chiaro);
    color: var(--cielo-scuro);
    border-color: var(--cielo-calmo);
}

/* === Gradient Backgrounds === */
.bg-gradient-sole {
    background: linear-gradient(135deg, var(--sole-vivo) 0%, var(--sole-scuro) 100%);
    color: white;
}

.bg-gradient-verde {
    background: linear-gradient(135deg, var(--verde-foresta) 0%, var(--verde-scuro) 100%);
    color: white;
}

.bg-gradient-cielo {
    background: linear-gradient(135deg, var(--cielo-calmo) 0%, var(--cielo-scuro) 100%);
    color: white;
}

.bg-gradient-brand {
    background: linear-gradient(135deg, var(--sole-vivo) 0%, var(--verde-foresta) 100%);
    color: white;
}

/* === Hover Effects === */
.hover-sole-vivo {
    transition: all var(--transition-fast);
}

.hover-sole-vivo:hover {
    background-color: var(--sole-chiaro) !important;
    border-color: var(--sole-vivo) !important;
}

.hover-verde-foresta {
    transition: all var(--transition-fast);
}

.hover-verde-foresta:hover {
    background-color: var(--verde-chiaro) !important;
    border-color: var(--verde-foresta) !important;
}

.hover-cielo-calmo {
    transition: all var(--transition-fast);
}

.hover-cielo-calmo:hover {
    background-color: var(--cielo-chiaro) !important;
    border-color: var(--cielo-calmo) !important;
}

/* === Icon Colors === */
.icon-sole-vivo {
    color: var(--sole-vivo);
}

.icon-verde-foresta {
    color: var(--verde-foresta);
}

.icon-cielo-calmo {
    color: var(--cielo-calmo);
}

.icon-terra-scura {
    color: var(--terra-scura);
}

/* === Link Variants === */
.link-sole-vivo {
    color: var(--sole-vivo);
    text-decoration: none;
}

.link-sole-vivo:hover {
    color: var(--sole-scuro);
    text-decoration: underline;
}

.link-verde-foresta {
    color: var(--verde-foresta);
    text-decoration: none;
}

.link-verde-foresta:hover {
    color: var(--verde-scuro);
    text-decoration: underline;
}

.link-cielo-calmo {
    color: var(--cielo-calmo);
    text-decoration: none;
}

.link-cielo-calmo:hover {
    color: var(--cielo-scuro);
    text-decoration: underline;
}