/* ===========================================
   Thèmes de couleurs - Vocabulaire
   =========================================== */

/* Les variables sont définies dynamiquement par themes.js */
/* Ce fichier contient les styles qui utilisent les variables de thème */

/* Éléments utilisant la couleur primaire */
.btn-primary,
.card:hover .card-icon,
.header-nav a.active,
.header-nav a:hover {
    background-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

/* Texte en couleur primaire */
.header h1,
.card h3,
.welcome-card h2,
.cta,
.footer a {
    color: var(--primary);
}

/* Bordures */
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
}

/* Liens */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

/* Badges et tags */
.badge-primary {
    background-color: var(--primary-light);
    color: white;
}

/* Progress bar */
.progress-bar {
    background-color: var(--primary);
}

/* Selection */
::selection {
    background-color: var(--primary-light);
    color: white;
}