/* ==========================================================================
   Orcheum · Button
   Source of truth: Figma nodes 404:4940 (Primary), 404:4946/4947 (Social),
   404:4950 (Text/ghost link).
   Reusable — namespaced under .oc-btn with variants.
   ========================================================================== */

.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);            /* 4px */
  min-width: 80px;
  height: 36px;
  padding: 6px var(--space-3);    /* 6px 12px */
  border: 0;
  border-radius: var(--radius-8); /* 8px */
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-fg);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);      /* 14px */
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;               /* Figma overflow-clip */
  transition: background var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* ---- States — Figma 543:2198 ---------------------------------------------
   Specified for the PRIMARY (#838b8e) button, so `hover` and `loading` are
   scoped to that fill. The warm-dark auth variants (--primary / --social,
   Figma 538:2444) are a different fill with no hover spec of their own, so
   they keep their background. The focus ring and the disabled treatment are
   fill-neutral and apply to every .oc-btn.
   ------------------------------------------------------------------------ */

/* Hover — background #24252d (button/primary/hover:background) */
.oc-btn:hover:not(:disabled):not(.is-loading):not(.oc-btn--primary):not(.oc-btn--social):not(.oc-btn--secondary):not(.oc-btn--danger) {
  background: var(--color-button-primary-hover-bg);
}

.oc-btn:active:not(:disabled):not(.is-loading) {
  transform: translateY(0.5px);
}

/* Focused — 2px surface gap ring + 4px puddle-700 ring.
   The inner ring is bound to the `background` variable, i.e. the surface the
   button sits on (#fbf7ef here); the Figma frame just renders it on white. */
.oc-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--color-puddle-700);
}

/* Disabled — states/disabled = 50% */
.oc-btn:disabled,
.oc-btn[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  cursor: default;
}

/* Loading — white fill at 50%, spinner replaces the leading icon,
   label + spinner in #222528. Set aria-busy="true" alongside .is-loading. */
.oc-btn.is-loading {
  background: var(--color-button-loading-bg);
  opacity: var(--state-disabled-opacity);
  color: var(--color-button-loading-fg);
  cursor: default;
}

.oc-btn__spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: block;
  animation: oc-btn-spin 0.9s linear infinite;
}

@keyframes oc-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .oc-btn__spinner { animation: none; }
}

/* Text wrap — Figma 39:9385 (px 4 around the label) */
.oc-btn__label {
  padding: 0 var(--space-1);
}

/* Leading icon slot — 16px */
.oc-btn__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: block;
}
.oc-btn__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Primary — full width, warm-dark (Figma 538:2460) */
.oc-btn--primary {
  width: 100%;
  background: var(--color-btn-dark);
}

/* Social — full width, warm-dark (Figma 538:2466-2467) */
.oc-btn--social {
  width: 100%;
  min-width: 80px;
  background: var(--color-btn-dark-social);
}

/* Secondary — translucent puddle fill on the page behind (Figma 547:6522
   "Cancel"). A different fill from primary, so it owns its own hover. */
.oc-btn--secondary {
  background: var(--color-button-secondary-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--color-foreground);
  padding: var(--space-2) var(--space-3);  /* 8px 12px */
}
.oc-btn--secondary:hover:not(:disabled):not(.is-loading) {
  background: var(--color-button-secondary-hover-bg);
}

/* Danger — destructive confirm (e.g. Delete). Owns its own fill, so it is
   excluded from the primary hover selector alongside secondary/social. */
.oc-btn--danger {
  background: var(--color-danger);
  color: var(--color-danger-fg);
}
.oc-btn--danger:hover:not(:disabled):not(.is-loading) {
  background: var(--color-danger-hover);
}

/* Ghost text link — Figma 404:4950 "Log in" */
.oc-btn--ghost {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  color: var(--color-foreground);
}
.oc-btn--ghost:hover {
  filter: none;
  text-decoration: underline;
}
.oc-btn--ghost:active {
  transform: none;
}