/* ============================================================
   Valet Design System — Buttons
   Requires: base-tokens.css, client-tokens.css

   Variants:  primary, secondary, ghost, destructive
   Sizes:     sm, md (default), lg
   States:    hover, focus-visible, active, disabled
   ============================================================ */

/* ── Base ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Primary ─────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.btn-primary:hover {
  background-color: color-mix(in oklch, var(--color-primary) 85%, var(--ink));
  border-color: color-mix(in oklch, var(--color-primary) 85%, var(--ink));
}

.btn-primary:active {
  background-color: color-mix(in oklch, var(--color-primary) 75%, var(--ink));
  border-color: color-mix(in oklch, var(--color-primary) 75%, var(--ink));
}

/* ── Secondary ───────────────────────────────────────────── */
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: color-mix(in oklch, var(--color-primary) 8%, transparent);
}

.btn-secondary:active {
  background-color: color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* ── Ghost ───────────────────────────────────────────────── */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.btn-ghost:hover {
  background-color: color-mix(in oklch, var(--color-primary) 8%, transparent);
}

.btn-ghost:active {
  background-color: color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* ── Destructive ─────────────────────────────────────────── */
.btn-destructive {
  background-color: oklch(50% 0.18 25);   /* red */
  border-color: oklch(50% 0.18 25);
  color: var(--white);
}

.btn-destructive:hover {
  background-color: oklch(43% 0.18 25);
  border-color: oklch(43% 0.18 25);
}

.btn-destructive:active {
  background-color: oklch(38% 0.18 25);
  border-color: oklch(38% 0.18 25);
}

.btn-destructive:focus-visible {
  outline-color: oklch(50% 0.18 25);
}

/* ── Sizes ───────────────────────────────────────────────── */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ── Icon-only ───────────────────────────────────────────── */
.btn-icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}

.btn-icon.btn-sm { padding: var(--space-2); }
.btn-icon.btn-lg { padding: var(--space-4); }