/* ベース - Figma Button 仕様に準拠 */
.ui-btn {
  @apply inline-flex items-center justify-center cursor-pointer whitespace-nowrap rounded-md font-semibold outline-none transition-colors;
}

.ui-btn:focus-visible {
  @apply ring-2 ring-blue-500 ring-offset-2 ring-offset-white;
}

/* Size: xs */
.ui-btn--xs {
  @apply gap-1 px-2 py-1 text-xs leading-4;
}

/* Size: sm */
.ui-btn--sm {
  @apply gap-1.5 px-3 py-1.5 text-sm leading-5;
}

/* Size: md */
.ui-btn--md {
  @apply gap-2 px-4 py-2.5 text-sm leading-5;
}

/* Size: lg */
.ui-btn--lg {
  @apply gap-2 px-6 py-3 text-base leading-6;
}

/* Variant: primary - インディゴ背景、主要アクション */
.ui-btn--primary {
  @apply bg-indigo-500 text-white;
}

.ui-btn--primary:hover {
  @apply bg-indigo-600;
}

.ui-btn--primary:active {
  @apply bg-indigo-700;
}

/* Variant: secondary - ライトインディゴ背景、キャンセル・戻る（Figma sub） */
.ui-btn--secondary {
  @apply bg-indigo-100 text-indigo-700;
}

.ui-btn--secondary:hover {
  @apply bg-indigo-200 text-indigo-800;
}

.ui-btn--secondary:active {
  @apply bg-indigo-300 text-indigo-900;
}

/* Variant: tertiary - 白背景＋グレーボーダー、補助アクション */
.ui-btn--tertiary {
  @apply border border-gray-200 bg-white text-gray-900;
}

.ui-btn--tertiary:hover {
  @apply bg-gray-50;
}

.ui-btn--tertiary:active {
  @apply bg-gray-100;
}

/* Variant: alert - 赤背景、削除・取消 */
.ui-btn--alert {
  @apply bg-red-500 text-white;
}

.ui-btn--alert:hover {
  @apply bg-red-600;
}

.ui-btn--alert:active {
  @apply bg-red-700;
}

/* Disabled - 全 variant 共通（Figma: bg-gray-200, text-white） */
.ui-btn--disabled,
.ui-btn:disabled {
  @apply cursor-not-allowed bg-gray-200 text-white;
}

.ui-btn--disabled:hover,
.ui-btn:disabled:hover {
  @apply bg-gray-200;
}

/* tertiary の disabled 時はボーダーを背景と同化 */
.ui-btn--disabled.ui-btn--tertiary,
.ui-btn:disabled.ui-btn--tertiary {
  @apply border-gray-200;
}