/**
 * ECサイト メインスタイル
 *
 * 読み込み順序:
 * 1. variables.css - デザイン変数（Web担当者向け）
 * 2. components.css - コンポーネントスタイル
 * 3. このファイル - ベース・レイアウト
 */

@import "variables.css";
@import "components.css";

/* ===== ベース ===== */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

main {
  flex: 1;
}

/* Bootstrap上書き（変数を使う場合） */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}