/*
 * Buttons — global primary/secondary action primitives (app-wide: public detail
 * pages + admin install/actions). Fully token-driven: a re-skin is a tokens.css
 * change.
 *
 * Brand treatment (HANDOFF §6): on the dark public theme the primary button is
 * glass + indigo glow and the secondary is a ghost outline; on the light admin
 * theme the primary is solid brand blue and the secondary is a white outline.
 * Width behaviour is unchanged (block CTAs by default; .kw-btn-primary--sm is
 * the auto-width inline variant).
 */
.kw-btn-primary,
.kw-btn-secondary,
.kw-btn-gold,
.kw-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--kw-font-headline);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--kw-radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: 160ms ease;
  width: 100%;
  min-width: 200px;
}

/* Primary — solid brand blue (light theme default). */
.kw-btn-primary {
  background: var(--kw-blue);
  color: var(--kw-white);
  border-color: var(--kw-blue);
  box-shadow: 0 1px 2px rgba(74, 86, 175, 0.25);
}
.kw-btn-primary:hover {
  background: var(--kw-blue-hover);
  border-color: var(--kw-blue-hover);
}

/* Secondary / ghost — white surface + hairline (light theme default). */
.kw-btn-secondary {
  background: var(--kw-bg-elevated);
  color: var(--kw-fg);
  border-color: var(--kw-border-color);
}
.kw-btn-secondary:hover { background: var(--kw-bg-subtle); }

/* ---- Dark public theme: glass + glow primary, transparent ghost ---- */
html.dark .kw-btn-primary {
  color: #fff;
  background: var(--kw-glass-fill);
  border-color: rgba(77, 96, 251, 0.40);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow:
    inset 0 0 60px rgba(197, 185, 246, 0.18),
    inset 0 0 16px rgba(77, 96, 251, 0.30),
    0 0 28px rgba(77, 96, 251, 0.22);
}
html.dark .kw-btn-primary:hover {
  border-color: rgba(77, 96, 251, 0.65);
  box-shadow:
    inset 0 0 70px rgba(197, 185, 246, 0.24),
    0 0 36px rgba(77, 96, 251, 0.34);
}
html.dark .kw-btn-secondary {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.20);
}
html.dark .kw-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

/* Gold accent button (secondary CTA where the brand calls for it; e.g. the
   downgrade confirm in the action dialog). */
.kw-btn-gold {
  background: var(--kw-signal-gold);
  color: #2A1E00;
  border-color: var(--kw-signal-gold);
}
.kw-btn-gold:hover { filter: brightness(1.05); }

/* Danger / destructive confirm (uninstall, breaking upgrade — see dialog.css).
   Light: solid brand red; dark public: red-tinted glass to match the rebrand's
   status tints (.kw-pill--err / .kw-sev--error). */
.kw-btn-danger {
  background: var(--kw-red);
  color: #fff;
  border-color: var(--kw-red);
}
.kw-btn-danger:hover { filter: brightness(0.93); }
html.dark .kw-btn-danger {
  background: rgba(229, 69, 69, 0.16);
  border-color: rgba(229, 69, 69, 0.50);
  color: #FF9D9D;
  box-shadow: inset 0 0 16px rgba(229, 69, 69, 0.22);
}
html.dark .kw-btn-danger:hover {
  background: rgba(229, 69, 69, 0.26);
  border-color: rgba(229, 69, 69, 0.75);
  color: #fff;
}

/* Small primary button (auto width — toolbar/inline actions, not block). */
.kw-btn-primary--sm {
  width: auto;
  min-width: 0;
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
}