/*
 * button.css — button component family.
 *
 * One semantic class `.dz-button` + a `data-dz-variant` attribute for the
 * visual variant (canonical, matching `data-dz-tone` on badges/alerts):
 *   data-dz-variant="ghost"        no border, hover-tint only (back, cancel)
 *   data-dz-variant="outline"      bordered neutral (default action button)
 *   data-dz-variant="destructive"  bordered danger (delete, revoke)
 *   data-dz-variant="primary"      filled brand (the recommended action)
 * and `data-dz-size="sm"` for the compact inline-row size.
 *
 * A variant NEVER drops the base class — `.dz-button` carries the shared
 * geometry, `[data-dz-variant]` layers the skin. (The standalone
 * `.dz-button-primary` rule in components/table.css is a separate, smaller
 * table-header variant and is intentionally left as a class.)
 *
 * The `<button>` element baseline in base.css already provides focus ring,
 * disabled state, font inheritance — this extends it with size + variant.
 *
 * Wrapped in @layer components.
 */

.dz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icon + label: gap owns spacing — do not rely on a text-node space after
     an icon span (flex collapses that inconsistently vs sprite <svg> siblings). */
  gap: var(--space-xs);
  height: 2rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.dz-button[data-dz-variant="ghost"] {
  background: transparent;
  border: 1px solid transparent;
  color: var(--colour-text-muted);
}

.dz-button[data-dz-variant="ghost"]:hover {
  background: var(--colour-bg);
  color: var(--colour-text);
}

/* Subtle press: one step past hover via tokens — no translate/shadow
   (primary owns the physical press). */
.dz-button[data-dz-variant="ghost"]:active {
  background: var(--colour-surface-muted);
  color: var(--colour-text);
}

.dz-button[data-dz-variant="outline"] {
  background: var(--colour-surface);
  color: var(--colour-text);
  border: 1px solid var(--colour-border);
}

.dz-button[data-dz-variant="outline"]:hover {
  background: var(--colour-bg);
}

.dz-button[data-dz-variant="outline"]:active {
  background: var(--colour-surface-muted);
}

.dz-button[data-dz-variant="destructive"] {
  background: var(--colour-surface);
  color: var(--colour-danger);
  border: 1px solid var(--colour-danger);
}

.dz-button[data-dz-variant="destructive"]:hover {
  background: var(--colour-danger-soft);
}

.dz-button[data-dz-variant="destructive"]:active {
  /* Token mix — deeper wash than danger-soft, not a brightness filter. */
  background: color-mix(in oklch, var(--colour-danger) 16%, var(--colour-surface));
}

.dz-button[data-dz-variant="primary"] {
  background: var(--colour-brand);
  color: var(--colour-brand-contrast);
  border: 1px solid var(--colour-brand);
  box-shadow: var(--shadow-sm);
}

/* TASTE-2/8: explicit hover step from the ramp (not a brightness filter)
   and a physical press — shadow collapses, button settles 0.5px. */
.dz-button[data-dz-variant="primary"]:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
}

.dz-button[data-dz-variant="primary"]:active {
  box-shadow: none;
  transform: translateY(0.5px);
}

.dz-button[data-dz-variant="primary"]:disabled,
.dz-button[data-dz-variant="primary"][aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Size modifier — smaller button used by inline action rows
 * (e.g. 2FA settings row buttons). Composes with .dz-button base. */
.dz-button[data-dz-size="sm"] {
  height: 1.75rem;
  padding-inline: var(--space-md);
  font-size: var(--text-xs);
}