/* ==========================================================================
   buttons.css — pill buttons (primary, ghost, link, danger) + size modifiers
   Variants: .btn-primary, .btn-ghost, .btn-link, .btn-danger, .btn-danger-ghost
   Sizes:    .btn-sm, .btn-lg (default is base 48px height)
   Context:  add .on-dark to a wrapping section/element when the buttons
             sit on a dark surface — every variant gets a dark-bg-aware
             default/hover/focus/active treatment automatically.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-26);
  border-radius: var(--pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-btn);
  font-family: inherit;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

/* Universal interaction states */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-ink-rgb), .35);
}
.btn:active { transform: scale(.98); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.btn-primary {
  background: var(--brand);
  color: white;
  box-shadow: var(--shadow-brand);
}
/* Diagonal light sweep across the button */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(var(--white-rgb), .45) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover {
  background: var(--brand-ink);
  color: white;
  box-shadow: var(--shadow-brand-hover);
}
.btn-primary:hover::before {
  transform: translateX(110%);
}

/* Ghost — fully transparent at every state. Hover/pressed shift the border
   and text colour only; no fill, no sweep. */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost::before { content: none; }
.btn-ghost:hover {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand);
}
.btn-ghost[aria-pressed="true"] {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand);
}
.btn-ghost[aria-pressed="true"] svg.lucide,
.btn-ghost[aria-pressed="true"] [data-lucide] { color: var(--brand); fill: var(--brand); }

.btn-link {
  background: transparent;
  color: var(--ink);
  padding: 0 var(--space-8);
  height: auto;
  overflow: visible;
}
.btn-link:hover { color: var(--brand-ink); }

/* Danger — filled destructive primary (delete, cancel-with-refund, report).
   Mirrors .btn-primary structure: solid fill + sweep highlight on hover. */
.btn-danger {
  background: var(--danger-strong);
  color: var(--bg);
  border-color: var(--danger-strong);
  box-shadow: 0 6px 18px -6px rgba(var(--danger-strong-rgb), .45);
}
.btn-danger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(var(--white-rgb), .35) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: -1;
}
.btn-danger:hover {
  background: var(--danger-strong-hover);
  border-color: var(--danger-strong-hover);
  color: var(--bg);
  box-shadow: 0 8px 22px -6px rgba(var(--danger-strong-rgb), .55);
}
.btn-danger:hover::before { transform: translateX(110%); }
.btn-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--danger-strong-rgb), .35);
}

/* Danger ghost — subtler destructive (remove card, sign-out-everywhere,
   block, deactivate). Fully transparent at every state; hover deepens the
   text colour and tightens the border, no fill. */
.btn-danger-ghost {
  background: transparent;
  color: var(--danger-strong);
  border-color: var(--danger-strong-border);
}
.btn-danger-ghost::before { content: none; }
.btn-danger-ghost:hover {
  background: transparent;
  color: var(--danger-strong-hover);
  border-color: var(--danger-strong-border-hover);
}
.btn-danger-ghost:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--danger-strong-rgb), .25);
}
.btn-danger-ghost svg.lucide,
.btn-danger-ghost [data-lucide] { color: currentColor; }

/* Sizes */
.btn-xs { height: 32px; padding: 0 var(--space-12); font-size: var(--fs-meta); }
.btn-sm { height: 40px; padding: 0 var(--space-18); font-size: var(--fs-sm); }
.btn-lg { height: 56px; padding: 0 var(--space-30); font-size: var(--fs-body); }

/* Icon-only modifier — square, no text padding. Pair with a size class. */
.btn-icon { padding: 0; width: 48px; }
.btn-icon.btn-xs { width: 32px; }
.btn-icon.btn-sm { width: 40px; }
.btn-icon.btn-lg { width: 56px; }

/* Icon inside button */
.btn svg.lucide,
.btn [data-lucide] {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   .on-dark context — buttons that sit on a dark surface (hero, trainer-cta,
   closing, etc.). Apply to a wrapping section/element to re-skin secondary
   variants for dark-bg readability. Primary stays brand-cyan for brand
   consistency across light and dark surfaces; only its glow is suppressed
   so it doesn't bloom on dark.
   ========================================================================== */

/* Primary on dark: keep brand-cyan, drop the colored shadow so the cyan
   doesn't glow against a dark backdrop. Focus ring switches to white for
   visibility. */
.on-dark .btn-primary,
.on-dark .btn-primary:hover {
  box-shadow: none;
}
.on-dark .btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--white-rgb), .55);
}

/* Ghost on dark: transparent, white text, soft white border. No fill at any
   state — keeps the same "outline only" rule as the light-bg variant. */
.on-dark .btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(var(--white-rgb), .35);
}
.on-dark .btn-ghost:hover {
  background: transparent;
  color: white;
  border-color: rgba(var(--white-rgb), .6);
}
.on-dark .btn-ghost:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--white-rgb), .35);
  border-color: rgba(var(--white-rgb), .6);
}
.on-dark .btn-ghost:active { background: transparent; }

/* Link on dark: white text, lighter on hover. */
.on-dark .btn-link {
  color: white;
}
.on-dark .btn-link:hover { color: rgba(var(--white-rgb), .82); }
.on-dark .btn-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--white-rgb), .35);
  border-radius: var(--radius-sm);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before {
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn:active { transform: none; }
  .btn-primary:hover::before,
  .btn-ghost:hover::before,
  .btn-danger:hover::before,
  .btn-danger-ghost:hover::before {
    transform: none;
  }
}