/**
 * Color Variables
 * カラーパレットに関する変数を定義します。
 * これらの変数は、他のスタイルシートで使用されます。
 * デザインに合わせて変更・追加することができます。
 */
:root {
  --white: #fff;
  --black: #000;
  --red: #CD0000;
  --dark-red: #8A0000;
  --logo-orange: #E65215;
  --ink: #2A2A2A;
  --blue: #0044CD;
  --dark-blue: #002E8A;
  --yellow: #FFD42A;
  --light-gray: #CCCCCC;
  
  --white-paper: url("/system_panel/uploads/images/white-paper.jpg");
  --orange-paper: url("/system_panel/uploads/images/orange-paper.jpg");
}

/**
 * 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 {
  color: hsl(from var(--fg-color) h s l / var(--fg-alpha, 100%)) !important;
}

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

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

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

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

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

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

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

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

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

.text-alpha-10 {
  --fg-alpha: 10%;
}

.text-alpha-20 {
  --fg-alpha: 20%;
}

.text-alpha-30 {
  --fg-alpha: 30%;
}

.text-alpha-40 {
  --fg-alpha: 40%;
}

.text-alpha-50 {
  --fg-alpha: 50%;
}

.text-alpha-60 {
  --fg-alpha: 60%;
}

.text-alpha-70 {
  --fg-alpha: 70%;
}

.text-alpha-80 {
  --fg-alpha: 80%;
}

.text-alpha-90 {
  --fg-alpha: 90%;
}

.text-alpha-100 {
  --fg-alpha: 100%;
}

/**
 * Background Colors
 */
.color-bg {
  background-color: hsl(from var(--bg-color) h s l / var(--bg-alpha, 100%)) !important;
}

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

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

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

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

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

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

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

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

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

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

.bg-white-paper {
  background-image: var(--white-paper);
}
.bg-orange-paper {
  background-image: var(--orange-paper);
}

.bg-alpha-10 {
  --bg-alpha: 10%;
}

.bg-alpha-20 {
  --bg-alpha: 20%;
}

.bg-alpha-30 {
  --bg-alpha: 30%;
}

.bg-alpha-40 {
  --bg-alpha: 40%;
}

.bg-alpha-50 {
  --bg-alpha: 50%;
}

.bg-alpha-60 {
  --bg-alpha: 60%;
}

.bg-alpha-70 {
  --bg-alpha: 70%;
}

.bg-alpha-80 {
  --bg-alpha: 80%;
}

.bg-alpha-90 {
  --bg-alpha: 90%;
}

.bg-alpha-100 {
  --bg-alpha: 100%;
}

/**
 * Border Colors
 */

.color-border {
  --bd-color: hsl(from var(--border-color) h s l / var(--border-alpha, 100%)) !important;
}

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

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

.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-alpha-10 {
  --border-alpha: 10%;
}

.border-alpha-20 {
  --border-alpha: 20%;
}

.border-alpha-30 {
  --border-alpha: 30%;
}

.border-alpha-40 {
  --border-alpha: 40%;
}

.border-alpha-50 {
  --border-alpha: 50%;
}

.border-alpha-60 {
  --border-alpha: 60%;
}

.border-alpha-70 {
  --border-alpha: 70%;
}

.border-alpha-80 {
  --border-alpha: 80%;
}

.border-alpha-90 {
  --border-alpha: 90%;
}

.border-alpha-100 {
  --border-alpha: 100%;
}

/**
 * Glassmorphism
 */
.backdrop-glass-8 {
  backdrop-filter: blur(8px);
}

.backdrop-glass-16 {
  backdrop-filter: blur(16px);
}

.backdrop-glass-20 {
  backdrop-filter: blur(20px);
}

.backdrop-glass-24 {
  backdrop-filter: blur(24px);
}