/**
 * Color Variables
 * カラーパレットに関する変数を定義します。
 * これらの変数は、他のスタイルシートで使用されます。
 * デザインに合わせて変更・追加することができます。
 */
:root {
  --white: #ffffff;
  --black: #000000;
  --gray: #808080;
  --light-gray: #d3d3d3;
  --dark-gray: #696969;
  --navy: #0C142B;
  --navy-alt: #202D4E;
  --gold: #B3A685;
  --ex-light-gold: #B3A685;
  --gold--opac-50: rgba(179 166 133 / 50%);
}

/**
 * Text Colors
 * テキストの色に関するスタイルを持つクラスを定義します。
 * .text-whiteのようなクラスを使用して、テキストの色を変更することができます。
 * 事前にBootstrapのCSSを読み込んでしまっているため、<a>要素の色なども含めて上書きする必要があります。
 * 具体的には、
 * 1. クラスを持つ要素
 * 2. クラスを持つ<a>要素
 * 3. クラスを持つ<a>要素のvisited状態
 * 4. クラスを持つ<a>要素のhover状態
 * 5. クラスを持つ<p>要素の子孫の<a>要素
 * 6. クラスを持つ<p>要素の子孫の<a>要素のvisited状態
 * 7. クラスを持つ<p>要素の子孫の<a>要素のhover状態
 */
.color-fg, .color-fg a, .color-fg a:visited, .color-fg a:hover, p a.color-fg, p a.color-fg:visited, p a.color-fg:hover, a.color-fg:hover, a.color-fg {
  color: var(--fg-color);
}

.text-white {
  --fg-color: var(--white);
}

.text-black {
  --fg-color: var(--black);
}

.text-gray {
  --fg-color: var(--gray);
}

.text-light-gray {
  --fg-color: var(--light-gray);
}

.text-dark-gray {
  --fg-color: var(--dark-gray);
}

.text-navy {
  --fg-color: var(--navy);
}

.text-navy-alt {
  --fg-color: var(--navy-alt);
}

.text-gold {
  --fg-color: var(--gold);
}

.text-ex-light-gold {
  --fg-color: var(--ex-light-gold);
}

/**
 * Background Colors
 */
.color-bg {
  background-color: var(--bg-color);
}

.bg-white {
  --bg-color: var(--white);
}

.bg-black {
  --bg-color: var(--black);
}

.bg-gray {
  --bg-color: var(--gray);
}

.bg-light-gray {
  --bg-color: var(--light-gray);
}

.bg-dark-gray {
  --bg-color: var(--dark-gray);
}

.bg-gold {
  --bg-color: var(--gold);
}

.bg-navy {
  --bg-color: var(--navy);
}

.bg-navy-alt {
  --bg-color: var(--navy-alt);
}

.bg-white--opac-70 {
  --bg-color: rgba(255 255 255 / 70%);
}

/**
 * Border Colors
 */
.border-white {
  --border-color: var(--white);
}

.border-black {
  --border-color: var(--black);
}

.border-gray {
  --border-color: var(--gray);
}

.border-light-gray {
  --border-color: var(--light-gray);
}

.border-dark-gray {
  --border-color: var(--dark-gray);
}

.border-gold {
  --border-color: var(--gold);
}

.border-ex-light-gold {
  --border-color: var(--ex-light-gold);
}

.border-gold--opac-50 {
  --border-color: var(--gold--opac-50);
}