/* ==========================================================================
   Button
   ==========================================================================
   Pills. Six variants, four sizes. Ported from web/components/ui/button.tsx,
   which built these with class-variance-authority.

   Usage: always a variant and a size.
     <a class="btn btn--primary btn--lg" href="/contact">Parler de mon projet</a>
     <button class="btn btn--ghost btn--md" type="button">Voir</button>

   The element can be <a> or <button>. Anything that navigates is an <a>,
   anything that acts on the page is a <button>. Do not swap them for styling.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: var(--radius-full);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, filter 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Icons sit at a fixed 16px and never shrink, so a long label cannot squash
   the arrow into an ellipse. */
.btn > svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */
.btn--sm {
  height: 2.25rem;
  padding-inline: 0.75rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-tracking);
}

.btn--md {
  height: 2.75rem;
  padding-inline: 1.25rem;
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  letter-spacing: var(--text-label-lg-tracking);
}

.btn--lg {
  height: 3.25rem;
  padding-inline: 1.75rem;
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  letter-spacing: var(--text-label-lg-tracking);
}

.btn--icon {
  width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */
.btn--primary {
  background-color: var(--brand);
  color: #ffffff;
}
.btn--primary:hover { background-color: var(--brand-hover); }

/* Ink button. Inverts in dark mode so it stays the high-contrast option
   rather than disappearing into the background. */
.btn--secondary {
  background-color: var(--color-neutral-900);
  color: #ffffff;
}
.btn--secondary:hover { background-color: var(--color-neutral-800); }

.dark .btn--secondary {
  background-color: #ffffff;
  color: var(--color-neutral-900);
}
.dark .btn--secondary:hover { background-color: var(--color-neutral-100); }

.btn--outline {
  border: 1px solid var(--border-strong);
  background-color: transparent;
  color: var(--foreground);
}
.btn--outline:hover { background-color: var(--background-subtle); }

.btn--ghost {
  background-color: transparent;
  color: var(--foreground);
}
.btn--ghost:hover { background-color: var(--background-subtle); }

.btn--destructive {
  background-color: var(--destructive);
  color: #ffffff;
}
.btn--destructive:hover { filter: brightness(0.95); }

.btn--link {
  height: auto;
  padding-inline: 0;
  background-color: transparent;
  color: var(--brand);
  text-underline-offset: 4px;
}
.btn--link:hover { text-decoration: underline; }