/* ============================================================
   BOUTONS
   Boutons d'action principaux + boutons ronds iconiques
   ============================================================

   Convention de naming :
     .btn-action       → bouton CTA texte (Enregistrer, Nouvelle recette…)
     .btn-action-*     → variantes (.btn-action-primary…)
     .btn-secondary    → bouton secondaire (Annuler, Retour)
     .btn-icon         → bouton rond iconique (Edit, Delete sur cards)
     .btn-icon-*       → variantes (.btn-icon-danger…)

   Toutes les classes commencent par .btn-* pour cohérence et prévisibilité.
   ============================================================ */


/* ============================================================
   BOUTONS PRINCIPAUX (CTA texte)
   ============================================================ */

/* Bouton d'action primaire (Enregistrer, Nouvelle recette...) */
.btn-action {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-bg);
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-action:hover {
    filter: brightness(0.92);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-action:active {
    transform: translateY(0);
    filter: brightness(0.88);
}

html.dark .btn-action:hover {
    filter: brightness(1.08);
}

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

/* Bouton secondaire (Annuler, Retour) */
.btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-input-border);
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    border-color: var(--color-text);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

html.dark .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}


/* ============================================================
   BOUTONS RONDS ICONIQUES (.btn-icon)
   Utilisés pour edit/delete sur les cards d'administration.
   ============================================================ */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: 1.25rem;
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.btn-icon:hover {
    transform: scale(1.05);
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-color: var(--color-primary);
}

/* Variante danger (suppression) */
.btn-icon-danger {
    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.btn-icon-danger:hover {
    background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
    border-color: var(--color-danger);
}

/* Dark mode */
html.dark .btn-icon {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

html.dark .btn-icon:hover {
    background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-color: var(--color-primary);
}

html.dark .btn-icon-danger {
    background-color: color-mix(in srgb, #FCA5A5 18%, transparent);
    color: #FCA5A5;
    border-color: color-mix(in srgb, #FCA5A5 40%, transparent);
}

html.dark .btn-icon-danger:hover {
    background-color: color-mix(in srgb, #FCA5A5 28%, transparent);
    border-color: #FCA5A5;
}