/* ============================================================
   KSTK — Component interactive states
   Inline styles can't express :hover/:active/:focus, so the
   bundled components expose className hooks that these rules drive.
   ============================================================ */

/* Buttons */
.kstk-btn { outline: none; }
.kstk-btn:focus-visible { box-shadow: var(--ring-brand) !important; }
.kstk-btn--primary:not(:disabled):hover { background: var(--action-primary-hover) !important; }
.kstk-btn--primary:not(:disabled):active { background: var(--action-primary-press) !important; transform: translateY(1px); }
.kstk-btn--dark:not(:disabled):hover { background: var(--blue-900) !important; }
.kstk-btn--secondary:not(:disabled):hover { background: var(--blue-50) !important; }
.kstk-btn--secondary:not(:disabled):active { background: var(--blue-100) !important; }
.kstk-btn--tertiary:not(:disabled):hover { background: var(--blue-50) !important; }
.kstk-btn--soft:not(:disabled):hover { background: var(--action-soft-bg-hover) !important; }

/* Icon buttons */
.kstk-iconbtn:focus-visible { box-shadow: var(--ring-brand) !important; }
.kstk-iconbtn--primary:not(:disabled):hover { background: var(--action-primary-hover) !important; }
.kstk-iconbtn--secondary:not(:disabled):hover { background: var(--blue-50) !important; }
.kstk-iconbtn--ghost:not(:disabled):hover { background: var(--neutral-100) !important; color: var(--text-strong) !important; }
.kstk-iconbtn--soft:not(:disabled):hover { background: var(--action-soft-bg-hover) !important; }

/* Cards */
.kstk-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }

/* Sidebar items */
.kstk-sideitem:hover { background: var(--neutral-100); }

/* Inputs */
.kstk-input-wrap:focus-within { border-color: var(--kstk-blue) !important; box-shadow: var(--ring-brand); }