/* ── Button System ────────────────────────────────────────────────────────── */
/* Canonical button classes that replace the per-template ad-hoc variants.    */
/*                                                                              */
/* Base:      .btn                                                              */
/* Variants:  .btn--primary   (blue CTA)                                      */
/*            .btn--accent    (teal — discovery actions)                       */
/*            .btn--secondary (outline/ghost)                                  */
/*            .btn--danger    (destructive)                                    */
/* Sizes:     .btn--sm   .btn--lg                                              */
/*                                                                              */
/* NEVER use gradient buttons. NEVER use teal for primary CTAs.                */
/* See DESIGN.md § Buttons for the full color role spec.                       */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 0 1px var(--accent-primary);
}

/* ── Primary (blue CTA) ── */
.btn--primary {
  background: var(--brand-blue-action);
  color: #fff;
  border-color: transparent;
}
.btn--primary:hover {
  background: var(--brand-blue-light);
  box-shadow: var(--shadow-blue);
}

/* ── Accent (teal — discovery/scanning) ── */
.btn--accent {
  background: var(--accent-deep);
  color: var(--accent-light);
  border-color: var(--accent-border);
}
.btn--accent:hover {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-accent);
}

/* ── Secondary (outline/ghost) ── */
.btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  border-color: var(--accent-border);
  color: var(--accent-light);
}

/* ── Danger (destructive) ── */
.btn--danger {
  background: transparent;
  color: var(--signal-danger-text);
  border-color: var(--signal-danger-border);
}
.btn--danger:hover {
  background: var(--signal-danger-bg);
}

/* ── Size modifiers ── */
.btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}
.btn--lg {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-7);
}