/* ============================================================
   KDN · interaction utilities
   Hover / focus states for components (kept here so the JSX
   primitives stay declarative). Press = scale, handled inline.
   ============================================================ */

.kdn-btn { -webkit-tap-highlight-color: transparent; }
.kdn-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.kdn-btn--primary:hover:not(:disabled) { background: var(--accent-hover) !important; }
.kdn-btn--light:hover:not(:disabled)   { filter: brightness(0.94); }
.kdn-btn--secondary:hover:not(:disabled){ background: rgba(255,255,255,0.08) !important; }
.kdn-btn--ghost:hover:not(:disabled)   { background: var(--accent-soft) !important; }

.kdn-iconbtn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.kdn-iconbtn:hover:not(:disabled) { filter: brightness(0.93); }

.kdn-interactive {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kdn-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}