/* ========================================================
   BUTTONS — Standard, outline, and special-purpose buttons
   ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  /* Anchors the sheen sweep below (see .btn-primary::after) */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ─── Sheen sweep ─────────────────────────────────────────
   A light band that travels across gradient buttons on hover, and once
   on the hero CTAs at page load (see components/gradients.css). */
.btn-primary::after,
.btn-accent::after,
.btn-outline-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-sheen);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-accent:hover::after,
.btn-outline-light:hover::after {
  animation: btn-sheen 0.9s var(--ease-out-soft);
}
@keyframes btn-sheen {
  from { transform: translateX(-130%); opacity: 1; }
  to   { transform: translateX(130%);  opacity: 0; }
}

.btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-body); }
.btn-sm { padding: 0.375rem 0.875rem; font-size: var(--text-xs); }
.btn-block { display: flex; width: 100%; }

/* Primary Button — linear gradient that glides on hover */
.btn-primary {
  color: var(--primary-foreground);
  background-color: var(--primary);            /* fallback if the gradient fails */
  background-image: var(--gradient-primary);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-sm);
  transition: background-position 0.55s ease, box-shadow 0.25s ease,
              transform 0.2s ease, border-color 0.25s ease;
}
.btn-primary:hover {
  background-position: 100% 50%;               /* the gradient slides, not switches */
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Accent Button — same gradient treatment in the warm brand colour */
.btn-accent {
  color: var(--accent-foreground);
  background-color: var(--accent);
  background-image: var(--gradient-accent);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: background-position 0.55s ease, box-shadow 0.25s ease,
              transform 0.2s ease, border-color 0.25s ease;
}
.btn-accent:hover {
  background-position: 100% 50%;
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Outline Button */
.btn-outline {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary-muted);
}
.btn-outline:hover { background-color: var(--primary-subtle); color: var(--primary-hover); }

/* Outline Light Button (specifically for dark backgrounds like hero) */
.btn-outline-light {
  color: #fff; /* White text for dark hero background */
  background-color: transparent;
  border-color: rgba(255,255,255,0.4); /* Subtle white border */
}
.btn-outline-light:hover {
  background-color: rgba(255,255,255,0.15); /* Slight white background on hover */
  border-color: #fff; /* Solid white border on hover */
  color: #fff;
}
[data-theme="dark"] .btn-outline-light {
  color: var(--accent); /* Accent color for dark theme */
  border-color: var(--accent-muted); /* Accent muted border for dark theme */
}
[data-theme="dark"] .btn-outline-light:hover {
  background-color: var(--accent-subtle); /* Accent subtle background on hover */
  border-color: var(--accent); /* Accent border on hover */
}
[data-theme="dark"] .btn-outline {
  color: var(--accent);
  border-color: var(--accent-muted);
}
[data-theme="dark"] .btn-outline:hover {
  background-color: var(--accent-subtle);
}

.btn-inline-mt { margin-top: 1.5rem; }

/* Ghost Button (subtle, header/secondary actions) */
.btn-ghost {
  color: var(--fg-2);
  background-color: transparent;
  border-color: transparent;
}
.btn-ghost:hover { background-color: var(--bg-alt); color: var(--fg); }

/* Danger Button (kept for legacy/destructive actions) */
.btn-danger {
  color: #fff;
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary,
  .btn-accent {
    transition: none;
    transform: none;
  }
  .btn-primary::after,
  .btn-accent::after,
  .btn-outline-light::after {
    animation: none;
    opacity: 0;
  }
}