/* ==========================================================================
   KOMPONEN: Button — sistem tombol NihongoDo
   ========================================================================== */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.c-button:active {
  transform: scale(0.97);
}

/* Varian */
/* 4.7: #fff → var(--washi) agar ikut design token */
.c-button.primary {
  background: var(--indigo);
  color: var(--washi);
}
.c-button.primary:hover {
  background: var(--indigo-light);
}

.c-button.accent {
  background: var(--shu);
  color: var(--washi);
}
.c-button.accent:hover {
  background: var(--shu-light);
}

.c-button.outline {
  background: var(--ink-2);
  color: var(--text);
  border-color: var(--border-light);
}
.c-button.outline:hover {
  border-color: var(--indigo-light);
  background: var(--indigo-ghost);
}

.c-button.ghost {
  background: transparent;
  color: var(--text-soft);
}
.c-button.ghost:hover {
  color: var(--washi);
  background: var(--ink-3);
}

.c-button.success {
  background: var(--jade);
  color: var(--washi);
}
.c-button.success:hover {
  background: var(--jade-light);
}

.c-button.danger {
  background: transparent;
  color: var(--shu-light);
  border-color: var(--shu-dim);
}
.c-button.danger:hover {
  background: var(--shu-ghost);
  border-color: var(--shu);
}

/* Ukuran */
.c-button.sm {
  height: 30px;
  font-size: 12px;
  padding: 0 13px;
}
.c-button.lg {
  height: 46px;
  font-size: 15px;
  padding: 0 26px;
}
.c-button.block {
  width: 100%;
}

/* Ikon-saja */
.c-button.icon-only {
  width: 38px;
  padding: 0;
}
.c-button.icon-only.sm {
  width: 30px;
}

.c-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}