/**
 * BREWING JAPAN — コンポーネントスタイル v1.0
 * 対象: 全ページ共通コンポーネント
 * 依存: bj-design-tokens.css, bj-global.css
 * 注記: Phase 1 では最小限のみ実装。Phase 2〜6 で追加予定。
 */

/* ================================================================
   PHASE 1 実装コンポーネント
   - ボタン基本スタイル
   - カテゴリラベル・バッジ
   - ウィジェットタイトル（共通）
   ================================================================ */

/* ── ボタン基本 ──────────────────────────────────────── */
.bj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bj-space-2);
  height: var(--bj-btn-height);
  padding: 0 var(--bj-btn-padding-x);
  font-family: var(--bj-font-sans);
  font-size: var(--bj-btn-font);
  font-weight: var(--bj-btn-weight);
  letter-spacing: var(--bj-tracking-wide);
  border-radius: var(--bj-btn-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--bj-duration) var(--bj-ease),
    box-shadow var(--bj-duration) var(--bj-ease),
    transform var(--bj-duration-fast) var(--bj-ease);
}
.bj-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--bj-shadow-md);
}
.bj-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.bj-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary（CTA 主役） */
.bj-btn--primary {
  background-color: var(--bj-btn-primary-bg);
  color: var(--bj-btn-primary-text);
}
.bj-btn--primary:hover {
  background-color: var(--bj-btn-primary-bg-hover);
  color: var(--bj-btn-primary-text);
}

/* Secondary */
.bj-btn--secondary {
  background-color: var(--bj-btn-secondary-bg);
  color: var(--bj-btn-secondary-text);
}
.bj-btn--secondary:hover {
  background-color: var(--bj-btn-secondary-bg-hover);
  color: var(--bj-btn-secondary-text);
}

/* Ghost（枠線のみ） */
.bj-btn--ghost {
  background-color: transparent;
  color: var(--bj-btn-ghost-text);
  border: 1px solid var(--bj-btn-ghost-border);
}
.bj-btn--ghost:hover {
  background-color: var(--bj-btn-ghost-bg-hover);
  color: var(--bj-btn-ghost-text-hover);
}

/* サイズバリアント */
.bj-btn--sm {
  height: var(--bj-btn-height-sm);
  padding: 0 var(--bj-btn-padding-x-sm);
  font-size: var(--bj-btn-font-sm);
}
.bj-btn--lg {
  height: var(--bj-btn-height-lg);
  padding: 0 var(--bj-btn-padding-x-lg);
  font-size: var(--bj-btn-font-lg);
}
.bj-btn--xl {
  height: var(--bj-btn-height-xl);
  padding: 0 var(--bj-btn-padding-x-xl);
  font-size: var(--bj-btn-font-xl);
}

/* ── カテゴリラベル ──────────────────────────────────── */
.bj-cat-badge {
  display: inline-block;
  background: var(--bj-tag-bg);
  color: var(--bj-tag-color);
  font-family: var(--bj-font-sans);
  font-size: var(--bj-tag-size);
  font-weight: var(--bj-tag-weight);
  padding: var(--bj-tag-padding);
  border-radius: var(--bj-tag-radius);
  letter-spacing: var(--bj-tracking-normal);
  text-decoration: none;
  transition:
    background-color var(--bj-duration-fast) var(--bj-ease),
    color var(--bj-duration-fast) var(--bj-ease);
}
.bj-cat-badge:hover {
  background: var(--bj-tag-bg-hover);
  color: var(--bj-tag-color-hover);
}

/* カテゴリ別バッジカラー */
.bj-cat-badge--knowledge { background: #F5EDD5; color: var(--bj-gold); }
.bj-cat-badge--howtoenjoy { background: #E0F2F1; color: var(--bj-teal-dark); }
.bj-cat-badge--opening { background: var(--bj-tag-bg); color: var(--bj-amber-dark); }
.bj-cat-badge--news { background: #E8EDF5; color: var(--bj-navy); }

/* ── 共通ウィジェットタイトル ────────────────────────── */
.bj-widget-title {
  font-family: var(--bj-widget-title-font);
  font-size: var(--bj-widget-title-size);
  font-weight: var(--bj-widget-title-weight);
  color: var(--bj-widget-title-color);
  border-bottom: var(--bj-widget-title-border);
  padding-bottom: var(--bj-space-2);
  margin-bottom: var(--bj-space-4);
  letter-spacing: var(--bj-tracking-wide);
}

/* ================================================================
   PHASE 2 以降で実装予定（スタブのみ）
   ================================================================ */

/*
.bj-hero { ... }                  — Phase 2: トップページヒーロー
.bj-category-nav { ... }          — Phase 2: カテゴリナビ4本柱
.bj-cta-block { ... }             — Phase 2: セクションCTA
.bj-newsletter-form { ... }       — Phase 2: メルマガ登録フォーム
.bj-hub-hero { ... }              — Phase 3: HUBページヒーロー
.bj-article-body { ... }          — Phase 4: 記事本文スタイル
.bj-author-box { ... }            — Phase 4: 著者ボックス
.bj-cta-inline { ... }            — Phase 4: 記事内CTA
.bj-cta-sticky { ... }            — Phase 4: スティッキーCTA
.bj-beer-card { ... }             — Phase 6: ビール図鑑カード
.bj-brewery-card { ... }          — Phase 6: ブルワリー図鑑カード
*/