/* デフォルト */
:root {
  /* ライトモード */
  --light-base1: var(--bs-white);
  --light-base2: var(--bs-gray-100);
  --light-base3: var(--bs-gray-200);

  /*ダークモード */
  --dark-base1: var(--bs-gray-700);
  --dark-base2: var(--bs-gray-800);
  --dark-base3: var(--bs-gray-900);
}

/* white */
:root[data-color-scheme="white"] {
  --light-base1: var(--bs-gray-100);
  --light-base2: var(--bs-gray-200);
  --light-base3: var(--bs-gray-800);
}

/* lightgray */
:root[data-color-scheme="lightgray"] {
  --light-base1: var(--bs-gray-200);
  --light-base2: var(--bs-gray-300);
  --light-base3: var(--bs-gray-800);
}
/* black */
:root[data-color-scheme="black"] {
  --dark-base1: var(--bs-gray-700);
  --dark-base2: var(--bs-gray-800);
  --dark-base3: var(--bs-gray-900);
}

/* darkgray */
:root[data-color-scheme="darkgray"] {
  --dark-base1: var(--bs-gray-600);
  --dark-base2: var(--bs-gray-700);
  --dark-base3: var(--bs-gray-800);
}

/* lightテーマで変数を使用 */
[data-bs-theme="light"] {
  --base-color1: var(--light-base1);
  --base-color2: var(--light-base2);
  --base-color3: var(--light-base3);
}

/* darkテーマで変数を使用 */
[data-bs-theme="dark"] {
  --base-color2: var(--dark-base1);
  --base-color1: var(--dark-base2);
  --base-color3: var(--dark-base3);
}