/*
 * Button system.
 *
 * daisyUI provides the base component; this layer gives it the studio's
 * voice. The primary action is a pale "ice" pill that carries a soft
 * electric-blue glow, the way lit objects glow in deep space. Every state
 * change eases slowly; nothing snaps.
 *
 * Unlayered, loaded after tailwind.css, so these win over daisyUI's
 * layered defaults. Do NOT set display / padding here: `hidden sm:inline-flex`
 * and `btn-square` depend on daisyUI's own values (same specificity).
 */

.btn {
  position: relative;
  border-radius: 9999px;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  transition:
    transform 500ms var(--ease-out-soft),
    box-shadow 600ms var(--ease-out-soft),
    background-color 400ms var(--ease-out-soft),
    border-color 400ms var(--ease-out-soft),
    color 400ms var(--ease-out-soft);
}

/* Trailing arrow that travels on hover: end a .btn with
   <span aria-hidden="true">&rarr;</span>. */
.btn > [aria-hidden="true"]:last-child {
  transition: transform 500ms var(--ease-out-soft);
}

.btn:hover > [aria-hidden="true"]:last-child {
  transform: translateX(3px);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 120ms;
}

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

/* ------------------------------------------------------------------ */
/* Primary - ice pill with a blue glow                                */
/* ------------------------------------------------------------------ */

.btn-primary {
  background-color: #eaf1ff;
  border-color: rgba(255, 255, 255, 0.6);
  color: #050a18;
  box-shadow:
    inset 0 -1px 0 rgba(0, 40, 140, 0.12),
    0 0 0 1px rgba(124, 203, 255, 0.08),
    0 10px 30px -10px rgba(0, 87, 255, 0.55);
}

.btn-primary:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #050a18;
  box-shadow:
    inset 0 -1px 0 rgba(0, 40, 140, 0.12),
    0 0 0 4px rgba(124, 203, 255, 0.1),
    0 14px 44px -8px rgba(0, 87, 255, 0.75);
}

/* ------------------------------------------------------------------ */
/* Secondary - solid electric blue                                    */
/* ------------------------------------------------------------------ */

.btn-secondary {
  background-color: #1f5eff;
  border-color: rgba(124, 170, 255, 0.45);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 30px -12px rgba(0, 87, 255, 0.7);
}

.btn-secondary:hover {
  background-color: #3470ff;
  border-color: rgba(160, 196, 255, 0.6);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 4px rgba(0, 87, 255, 0.14),
    0 14px 40px -10px rgba(0, 87, 255, 0.85);
}

/* ------------------------------------------------------------------ */
/* Outline - hairline glass                                           */
/* ------------------------------------------------------------------ */

.btn-outline {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(232, 237, 246, 0.16);
  color: var(--color-base-content);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 237, 246, 0.32);
  color: var(--color-base-content);
}

/* ------------------------------------------------------------------ */
/* Ghost                                                              */
/* ------------------------------------------------------------------ */

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: transparent;
}

/* Error variant stays quiet until hovered. */
.btn-error {
  background-color: color-mix(in oklab, var(--color-error) 14%, transparent);
  border-color: color-mix(in oklab, var(--color-error) 35%, transparent);
  color: var(--color-error);
}

.btn-error:hover {
  background-color: color-mix(in oklab, var(--color-error) 22%, transparent);
  color: #ffd9dc;
}

/* ------------------------------------------------------------------ */
/* Round icon button (the reference's play-circle next to a pill)      */
/* ------------------------------------------------------------------ */

.btn-orbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(232, 237, 246, 0.18);
  color: var(--color-base-content);
  transition:
    border-color 500ms var(--ease-out-soft),
    background-color 500ms var(--ease-out-soft),
    transform 500ms var(--ease-out-soft);
}

.btn-orbit:hover {
  border-color: rgba(124, 203, 255, 0.6);
  background-color: rgba(124, 203, 255, 0.08);
  transform: translateY(2px);
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-orbit {
    transition: none;
  }
  .btn:hover,
  .btn:active,
  .btn-orbit:hover {
    transform: none;
  }
}