/*
================================================================================
  ◎ DEMO KXCLOUD — BOUTONS (ADR-007)
  Fichier  : /opt/cortex/demo/src/css/components/button.css
  Rôle     : Action primaire = fill Mousse, label en encre (ratio ≈ 7.7:1).
             Rayons --radius-md/pill UNIQUEMENT (zéro 8px, zéro 12px).
================================================================================
*/

/* Mécanique « plaque vissée » restaurée de la première version (vitrine,
   lue seulement) et harmonisée Mousse h≈128 : ombre DURE décalée 4px 4px,
   le survol ENFONCE la plaque (translate 2px + ombre 1px), le clic la
   visse à fond (translate 4px + ombre nulle). Transform/box-shadow seuls
   — aucun reflow. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--signal);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--signal-deep) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 0.8rem 1.6rem;
  font-family: "Wotfard", sans-serif;
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  box-shadow: 4px 4px 0 color-mix(in oklab, var(--signal-deep) 18%, transparent);
  transform: translate(0, 0);
  transition:
    transform var(--duration-z5) ease-out,
    box-shadow var(--duration-z5) ease-out,
    filter var(--duration-z5) ease-out;
}

.btn-primary:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 color-mix(in oklab, var(--signal-deep) 32%, transparent);
  filter: brightness(1.03);
}

.btn-primary:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 transparent;
}

.btn-primary:disabled {
  cursor: progress;
  filter: saturate(0.4);
  transform: none;
}

/* Variante terre cuite (conversion — WhatsApp) — même mécanique vissée */
.btn-accent {
  background-color: var(--accent-ink);
  color: var(--bg-paper);
  border-color: color-mix(in oklab, var(--accent-ink) 35%, transparent);
  box-shadow: 4px 4px 0 color-mix(in oklab, var(--accent-ink) 20%, transparent);
}

.btn-accent:hover {
  filter: brightness(1.10);
  box-shadow: 1px 1px 0 color-mix(in oklab, var(--accent-ink) 35%, transparent);
}

/* Lien discret (retour vitrine) */
.btn-ghost {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-z5) ease;
}

.btn-ghost:hover {
  color: var(--ink);
}