/* =========================================================
   KR — buttons.css
   ========================================================= */

.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--kr-border);
  background: transparent;
  transition: transform .16s var(--kr-ease), filter .16s var(--kr-ease), background-color .16s var(--kr-ease), border-color .16s var(--kr-ease), box-shadow .16s var(--kr-ease);
  will-change: transform;
}
@media (hover:hover) {
  .kr-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0,0,0,.10);
  }
}
.kr-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Accent button */
.kr-btn--accent {
  background: var(--kr-charcoal);
  color: #fff;
  border-color: rgba(208,160,88,.60);
}
@media (hover:hover) {
  .kr-btn--accent:hover {
    filter: brightness(1.06);
    box-shadow: 0 18px 36px rgba(0,0,0,.16);
  }
}
.kr-btn--outline {
  border-color: rgba(208,160,88,.35);
  color: var(--kr-text);
}
@media (hover:hover) {
  .kr-btn--outline:hover {
    border-color: var(--kr-accent);
    background: rgba(208,160,88,.08);
  }
}