@charset "UTF-8";
/* ==========================================================================
   Colors — 色だけを当てるレイヤー
   ※ブランドカラー変更時は variables.css と本ファイルだけ調整
   ========================================================================== */

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ----- 見出し ----- */
.heading__en { color: var(--color-accent); }
.heading__ja { color: var(--color-primary); }
.heading__ja--dark { color: var(--color-text); }
.heading__ja--white { color: var(--color-white); }
.heading__en--white { color: var(--color-white); }

/* ----- セクション背景バリエーション ----- */
.section--light { background-color: var(--color-primary-light); }
.section--gradient {
  background: linear-gradient(
    180deg,
    var(--color-bg-gradient-start) 0%,
    var(--color-bg-soft) 16%,
    var(--color-primary-light) 100%
  );
}
.section--dark { background-color: var(--color-primary); color: var(--color-white); }

/* ----- ボタン ----- */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--dark {
  background-color: var(--color-primary-darker);
  color: var(--color-white);
  border-color: var(--color-primary-darker);
}

.btn--dark-outline {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
}

/* ----- カード ----- */
.card { background-color: var(--color-white); }
.card__title { color: var(--color-text); }
.card__body { color: var(--color-text); }

/* ----- テキスト色ユーティリティ ----- */
.text-primary { color: var(--color-primary); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-text-sub); }