/**
 * Dahu Theme Annad 2026 — boutons des gabarits PHP (.annad-btn), chargés sur tout le site.
 *
 * Bouton de référence des templates PHP (fiche produit, Mon compte). Les pages composées dans
 * l'éditeur utilisent les styles du bloc Bouton (is-style-annad-*, front-page.css) : mêmes rôles
 * de couleur (accent / vert plein / clair / contour).
 * Déplacé tel quel depuis product/buybox.css (3.2.0) ; variantes --brand et --light ajoutées.
 *
 * 3.10.0 — habillage type Material Design (maquette fiche_produit_principal.png) : gris en relief,
 * coins arrondis, ombre douce qui s'élève au survol, anneau de focus marqué, enfoncement au clic.
 * Les boutons du header (nav-cta) et du footer (footer-pro__cta, newsletter) n'utilisent pas
 * .annad-btn : ils ne sont pas concernés.
 */

:root {
	--annad-btn-radius: 0.75rem;
	--annad-btn-color: var(--color-on-surface);
	--annad-btn-bg: color-mix(in srgb, var(--color-surface-light) 22%, var(--color-surface));
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-surface-light) 30%, var(--color-surface));
	--annad-btn-border: color-mix(in srgb, var(--color-surface-light) 35%, transparent);
	--annad-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	--annad-btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	--annad-btn-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.annad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg);
	border: 1px solid var(--annad-btn-border);
	border-radius: var(--annad-btn-radius);
	box-shadow: var(--annad-btn-shadow);
	transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.annad-btn:hover {
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg-hover);
	box-shadow: var(--annad-btn-shadow-hover);
	transform: translateY(-1px);
}

.annad-btn:active {
	box-shadow: var(--annad-btn-shadow-active);
	transform: translateY(0);
}

.annad-btn:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 3px;
	box-shadow: var(--annad-btn-shadow-hover);
}

/* Contour / gris : variante des boutons secondaires de la fiche (même rendu que la base) */
.annad-btn--outline {
	--annad-btn-bg: color-mix(in srgb, var(--color-surface-light) 22%, var(--color-surface));
}

.annad-btn--accent {
	--annad-btn-color: var(--color-on-accent);
	--annad-btn-bg: var(--color-accent);
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-surface-light));
	--annad-btn-border: var(--color-accent);
}

/* Vert Annad plein (maquette Mon compte : « Suivi de commande ») */
.annad-btn--brand {
	--annad-btn-color: var(--color-on-brand-green);
	--annad-btn-bg: var(--color-brand-green);
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-brand-green) 88%, var(--color-surface-light));
	--annad-btn-border: var(--color-brand-green);
}

.annad-btn--light {
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: var(--color-surface-light);
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-surface-light) 90%, var(--color-on-surface-light));
	--annad-btn-border: var(--color-surface-light);
}

@media (prefers-reduced-motion: reduce) {
	.annad-btn,
	.annad-btn:hover {
		transition: none;
		transform: none;
	}
}