/* NFT Zone — Frost Buttons · approved pair (2026-10-12)
   Opt-in component. Two designs only:
     1 — Prism Calm: class="btn frost-btn frost-btn--v1"
         The exact same button in both themes.
     2 — Edge Lift: class="btn frost-btn frost-btn--v2"
         The same rim, geometry and effects in both themes.
         Only its inner surface and contrast text/icon colors adapt to
         html[data-theme] (dark surface/white ink; light surface/dark ink).
   Style reference: approved NFT Zone Final Button Playground.

   This file does NOT modify existing buttons until .frost-btn is applied.
   Include it only on pages being migrated, after existing page CSS.
*/

/* Geometry and interactive states are retained from the approved playground. */
.btn.frost-btn {
  --btn-height: 46px;
  --btn-radius: 14px;
  --btn-pad-x: 18px;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--btn-radius);
  color: #fff;
  background: var(--bg-surface-2);
  font: 700 13px/1.2 var(--font-sans);
  letter-spacing: -.014em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease,
              box-shadow .18s ease, transform .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn.frost-btn:hover:not(:disabled):not(.is-disabled) { transform: translateY(-1px); }
.btn.frost-btn:active:not(:disabled):not(.is-disabled) { transform: translateY(0) scale(.985); }
.btn.frost-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; }
.btn.frost-btn:disabled,
.btn.frost-btn.is-disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn.frost-btn .frost-btn__icon,
.btn.frost-btn .frost-btn__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}
.btn.frost-btn .frost-btn__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn.frost-btn .frost-btn__spinner {
  display: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: frost-btn-spin .8s linear infinite;
}
.btn.frost-btn.is-loading .frost-btn__icon { display: none; }
.btn.frost-btn.is-loading .frost-btn__spinner { display: inline-grid; }
.btn.frost-btn.is-loading { cursor: wait; }
@keyframes frost-btn-spin { to { transform: rotate(360deg); } }

/* BUTTON 1 — Prism Calm. Exact approved dark Prism in both themes. */
.btn.frost-btn.frost-btn--v1 {
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(115deg, #44306c 0%, #2f3569 56%, #174460 100%) padding-box,
    linear-gradient(110deg, #b889ff, #7d8ff3 56%, #74d1ea) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 19px rgba(69, 61, 168, .18);
}
.btn.frost-btn.frost-btn--v1::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.12), transparent 46%);
}
.btn.frost-btn.frost-btn--v1:hover:not(:disabled):not(.is-disabled) {
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(86,78,196,.25);
}

/* BUTTON 2 — Edge Lift. Exact approved outline/rim and dark fill.
   The light theme changes only its inner surface and text/icon contrast. */
.btn.frost-btn.frost-btn--v2 {
  --frost-edge-surface-top: color-mix(in srgb, #121724 90%, transparent);
  --frost-edge-surface-bottom: color-mix(in srgb, #121724 82%, #8b5cf6 4%);
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(var(--frost-edge-surface-top), var(--frost-edge-surface-bottom)) padding-box,
    linear-gradient(110deg, rgba(174,128,250,.9), rgba(125,143,243,.66) 55%, rgba(105,202,241,.84)) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 6px 16px rgba(72, 78, 174, .11);
}
.btn.frost-btn.frost-btn--v2.is-loading:disabled {
  opacity: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 6px 16px rgba(72, 78, 174, .11);
}
.btn.frost-btn.frost-btn--v2 .frost-btn__spinner {
  width: 14px;
  height: 14px;
  margin-inline: 1px;
  border-width: 1.5px;
  color: #8b9df8;
  border-top-color: #ae80fa;
}
html[data-theme="light"] .btn.frost-btn.frost-btn--v2 .frost-btn__spinner {
  color: #586bdb;
  border-top-color: #8053cd;
}
.btn.frost-btn.frost-btn--v2:hover:not(:disabled):not(.is-disabled) {
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 18px rgba(72, 78, 174, .14);
}
/* No separate button number for light theme. */
html[data-theme="light"] .btn.frost-btn.frost-btn--v2 {
  --frost-edge-surface-top: #ffffff;
  --frost-edge-surface-bottom: #fafcff;
  color: #0f172a;
}

@media (prefers-reduced-motion: reduce) {
  .btn.frost-btn { transition: none; }
  .btn.frost-btn .frost-btn__spinner { animation-duration: 1.7s; }
}
@media (forced-colors: active) {
  .btn.frost-btn { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .btn.frost-btn:focus-visible { outline: 2px solid Highlight; }
}