/**
 * SPS unified buttons — mirrored from v0.3/app/src/styles.css (.primary / .ghost).
 * Primary = gold gradient; secondary = ghost; danger = ghost.danger or solid danger.
 */

:root,
[data-sps-theme="dark"],
[data-sps-theme="light"] {
  --sps-primary: #f2b34c;
  --sps-primary-hover: #e38b2c;
  --sps-primary-text: #1a1a3a;
  --sps-border-strong: #aea496;
  --sps-focus: rgba(245, 211, 122, 0.55);
  --sps-bg-alt: #e2d9cb;
  --sps-card-bg: #ffffff;
  --sps-text: #1a1a3a;
  --sps-heading: #12122e;
}

[data-sps-theme="dark"] {
  --sps-border-strong: rgba(245, 211, 122, 0.2);
  --sps-bg-alt: rgba(75, 63, 121, 0.45);
  --sps-card-bg: rgba(75, 63, 121, 0.5);
  --sps-text: #f8f5ef;
  --sps-heading: #ffdfa3;
  --sps-focus: rgba(245, 211, 122, 0.45);
}

[data-sps-theme="light"] {
  --sps-border-strong: #aea496;
  --sps-bg-alt: #ede6da;
  --sps-card-bg: #ffffff;
  --sps-text: #1a1a3a;
  --sps-heading: #12122e;
}

/* Respect ws-hidden / hidden on buttons (onboarding step actions, modals, etc.) */
.ws-btn.ws-hidden,
button.ws-btn.ws-hidden,
a.ws-btn.ws-hidden,
.ws-btn[hidden],
button.ws-btn[hidden],
a.ws-btn[hidden] {
  display: none !important;
}

/* Shared button chrome */
button.primary,
a.primary,
.primary,
button.ghost,
a.ghost,
.ghost,
.ws-btn:not(.ws-logout-btn):not(.ws-inline-help-btn),
a.ws-btn:not(.ws-logout-btn):not(.ws-inline-help-btn),
.spslogin__submit,
.spslogin-modal__btn,
.storefront-login__submit,
.storefront-modal__btn,
.studio-launch__cta,
.ws-landing-btn-gold,
.ws-submit-btn {
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ws-btn.small,
.primary.small,
.ghost.small {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
}

/* ── Primary ── */
button.primary:not(:disabled),
a.primary:not(.disabled),
.primary:not(:disabled):not(.disabled),
.ws-btn:not(.secondary):not(.outline):not(.ws-logout-btn):not(.ws-btn--danger):not(.ws-inline-help-btn):not(:disabled),
a.ws-btn:not(.secondary):not(.outline):not(.ws-logout-btn):not(.ws-btn--danger):not(:disabled),
.ws-btn.primary:not(:disabled),
a.ws-btn.primary:not(:disabled),
.spslogin__submit:not(:disabled),
.spslogin-modal__btn--primary:not(:disabled),
.storefront-login__submit:not(:disabled),
.storefront-modal__btn--primary:not(:disabled),
.studio-launch__cta--primary:not(:disabled),
.ws-landing-btn-gold,
.ws-submit-btn:not(:disabled) {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #fff 34%, var(--sps-primary)) 0%,
    var(--sps-primary) 42%,
    color-mix(in srgb, var(--sps-primary-text) 22%, var(--sps-primary)) 100%
  );
  color: var(--sps-primary-text);
  border-color: color-mix(in srgb, var(--sps-primary) 55%, var(--sps-primary-text));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 18px rgba(242, 179, 76, 0.28);
}

button.primary:not(:disabled):hover,
a.primary:not(.disabled):hover,
.primary:not(:disabled):not(.disabled):hover,
.ws-btn:not(.secondary):not(.outline):not(.ws-logout-btn):not(.ws-btn--danger):not(.ws-inline-help-btn):not(:disabled):hover,
a.ws-btn:not(.secondary):not(.outline):not(.ws-logout-btn):not(.ws-btn--danger):not(:disabled):hover,
.ws-btn.primary:not(:disabled):hover,
.spslogin__submit:not(:disabled):hover,
.spslogin-modal__btn--primary:not(:disabled):hover,
.storefront-login__submit:not(:disabled):hover,
.storefront-modal__btn--primary:not(:disabled):hover,
.studio-launch__cta--primary:not(:disabled):hover,
.ws-landing-btn-gold:hover,
.ws-submit-btn:not(:disabled):hover {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #fff 42%, var(--sps-primary-hover)) 0%,
    var(--sps-primary-hover) 45%,
    color-mix(in srgb, var(--sps-primary-text) 16%, var(--sps-primary-hover)) 100%
  );
  border-color: color-mix(in srgb, var(--sps-primary-hover) 58%, var(--sps-primary-text));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 3px 0 rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(242, 179, 76, 0.42);
  transform: translateY(-1px);
}

button.primary:not(:disabled):active,
.primary:not(:disabled):active,
.ws-btn:not(.secondary):not(.outline):not(.ws-logout-btn):not(.ws-btn--danger):not(:disabled):active,
.spslogin__submit:not(:disabled):active,
.spslogin-modal__btn--primary:not(:disabled):active,
.storefront-login__submit:not(:disabled):active,
.storefront-modal__btn--primary:not(:disabled):active,
.studio-launch__cta--primary:not(:disabled):active,
.ws-landing-btn-gold:active,
.ws-submit-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.2),
    0 1px 4px rgba(242, 179, 76, 0.22);
}

button.primary:disabled,
.primary:disabled,
.ws-btn:not(.secondary):not(.outline):not(.ws-logout-btn):not(.ws-btn--danger):disabled,
.spslogin__submit:disabled,
.spslogin-modal__btn--primary:disabled,
.storefront-login__submit:disabled,
.storefront-modal__btn--primary:disabled,
.ws-submit-btn:disabled {
  background: #9ca3af;
  color: #fff;
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* ── Secondary (ghost) ── */
button.ghost:not(:disabled),
a.ghost:not(.disabled),
.ghost:not(:disabled):not(.disabled),
.ws-btn.secondary:not(:disabled),
a.ws-btn.secondary:not(:disabled),
.ws-btn.outline:not(:disabled),
a.ws-btn.outline:not(:disabled),
.spslogin-modal__btn--secondary:not(:disabled),
.storefront-modal__btn--secondary:not(:disabled),
.studio-launch__cta--secondary:not(:disabled),
a.studio-launch__cta--secondary:not(:disabled),
.ws-landing-btn-outline,
.ws-btn.ws-logout-btn,
a.ws-btn.ws-logout-btn,
.ws-btn.ws-btn--support-link,
a.ws-btn.ws-btn--support-link {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sps-card-bg) 82%, var(--sps-bg-alt)) 0%,
    color-mix(in srgb, var(--sps-bg-alt) 65%, var(--sps-card-bg)) 100%
  );
  border-color: var(--sps-border-strong);
  color: var(--sps-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 3px rgba(44, 47, 99, 0.08);
}

button.ghost:not(:disabled):hover,
.ghost:not(:disabled):hover,
.ws-btn.secondary:not(:disabled):hover,
.ws-btn.outline:not(:disabled):hover,
.spslogin-modal__btn--secondary:not(:disabled):hover,
.storefront-modal__btn--secondary:not(:disabled):hover,
.studio-launch__cta--secondary:not(:disabled):hover,
a.studio-launch__cta--secondary:not(:disabled):hover,
.ws-landing-btn-outline:hover,
.ws-btn.ws-logout-btn:hover,
a.ws-btn.ws-logout-btn:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sps-primary) 14%, var(--sps-bg-alt)) 0%,
    color-mix(in srgb, var(--sps-primary) 8%, var(--sps-card-bg)) 100%
  );
  border-color: color-mix(in srgb, var(--sps-primary) 32%, var(--sps-border-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 3px 12px rgba(44, 47, 99, 0.12);
  transform: translateY(-1px);
}

button.ghost:disabled,
.ghost:disabled,
.ws-btn.secondary:disabled,
.ws-btn.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Danger ── */
.ws-btn.ws-btn--danger:not(:disabled) {
  background: #b32d2e;
  color: #fff;
  border-color: #b32d2e;
  box-shadow: 0 2px 8px rgba(179, 45, 46, 0.25);
}

.ws-btn.ws-btn--danger:not(:disabled):hover {
  background: #8a2424;
  border-color: #8a2424;
}

button.ghost.danger:not(:disabled),
.ghost.danger:not(:disabled) {
  background: transparent;
  color: color-mix(in srgb, #f87171 88%, var(--sps-text));
  border-color: color-mix(in srgb, #f87171 45%, var(--sps-border-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 3px rgba(44, 47, 99, 0.08);
}

[data-sps-theme="dark"] button.ghost.danger:not(:disabled),
[data-sps-theme="dark"] .ghost.danger:not(:disabled) {
  color: color-mix(in srgb, #fca5a5 92%, var(--sps-text));
  border-color: color-mix(in srgb, #f87171 38%, var(--sps-border-strong));
}

/* Focus */
button.primary:focus-visible:not(:disabled),
button.ghost:focus-visible:not(:disabled),
.primary:focus-visible:not(:disabled),
.ghost:focus-visible:not(:disabled),
.ws-btn:focus-visible,
.spslogin__submit:focus-visible:not(:disabled),
.spslogin-modal__btn:focus-visible,
.storefront-login__submit:focus-visible:not(:disabled),
.storefront-modal__btn:focus-visible,
.ws-landing-btn-gold:focus-visible,
.ws-submit-btn:focus-visible:not(:disabled) {
  outline: 2px solid var(--sps-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  button.primary,
  button.ghost,
  .primary,
  .ghost,
  .ws-btn,
  .spslogin__submit,
  .storefront-login__submit {
    transition: none;
  }

  button.primary:not(:disabled):hover,
  button.ghost:not(:disabled):hover,
  .ws-btn:not(:disabled):hover,
  .spslogin__submit:not(:disabled):hover {
    transform: none;
  }
}

/* Onboarding success actions: block layout preserved */
.ws-onboarding .ws-success-actions .ws-btn,
.ws-onboarding .ws-success-actions a.ws-btn {
  width: 100%;
  text-align: center;
}