/**
 * Color Variables
 * カラーパレットに関する変数を定義します。
 * これらの変数は、他のスタイルシートで使用されます。
 * デザインに合わせて変更・追加することができます。
 */
:root {
  --snow: #ffffff;
  --ink: #3C3133;
  --neon-green: #13EC13;
  --red: #E73022;
  --vermilion: #FA4B00;
  --vivid-pink: #EC13B9;
  --sky: #2AABE4;
  --purple: #860CFF;
  --dark-pink: #BF0F3A;
  --yellow: #F0B400;
  --orange: #F8A224;
  --black: #000000;
  --neon-blue: #06DDDD;
  --dove-blue: #4A6C97;
  
  --grad-yumekawa: linear-gradient(90deg, #F75959 0%, #BFC0FA 100%);
  --grad-yuuhi: linear-gradient(180deg, #FEF3AC 0%, #E0A093 100%);
  
  --paper-beige: url(/system_panel/uploads/images/paper-beige.jpg);
  --paper-indigo: url(/system_panel/uploads/images/paper-indigo.jpg);
  --noise-neon-green: url(/system_panel/uploads/images/noise-neon-green.jpg);
}

/**
 * Text Colors
 * テキストの色に関するスタイルを持つクラスを定義します。
 * .text-snowのようなクラスを使用して、テキストの色を変更することができます。
 * 事前に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-snow {
  --fg-color: var(--snow);
}
.text-ink {
  --fg-color: var(--ink);
}
.text-neon-green {
  --fg-color: var(--neon-green);
}
.text-red {
  --fg-color: var(--red);
}
.text-vermilion {
  --fg-color: var(--vermilion);
}
.text-vivid-pink {
  --fg-color: var(--vivid-pink);
}
.text-sky {
  --fg-color: var(--sky);
}
.text-purple {
  --fg-color: var(--purple);
}
.text-dark-pink {
  --fg-color: var(--dark-pink);
}
.text-yellow {
  --fg-color: var(--yellow);
}
.text-orange {
  --fg-color: var(--orange);
}
.text-black {
  --fg-color: var(--black);
}
.text-neon-blue {
  --fg-color: var(--neon-blue);
}
.text-dove-blue {
  --fg-color: var(--dove-blue);
}

.text-grad-yumekawa {
  color: transparent;
  background-image: var(--grad-yumekawa);
  -webkit-background-clip: text;
  background-clip: text;
}

.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-snow {
  --bg-color: var(--snow);
}
.bg-ink {
  --bg-color: var(--ink);
}
.bg-neon-green {
  --bg-color: var(--neon-green);
}
.bg-red {
  --bg-color: var(--red);
}
.bg-vermilion {
  --bg-color: var(--vermilion);
}
.bg-vivid-pink {
  --bg-color: var(--vivid-pink);
}
.bg-sky {
  --bg-color: var(--sky);
}
.bg-purple {
  --bg-color: var(--purple);
}
.bg-dark-pink {
  --bg-color: var(--dark-pink);
}
.bg-yellow {
  --bg-color: var(--yellow);
}
.bg-orange {
  --bg-color: var(--orange);
}
.bg-black {
  --bg-color: var(--black);
}
.bg-neon-blue {
  --bg-color: var(--neon-blue);
}
.bg-dove-blue {
  --bg-color: var(--dove-blue);
}

.bg-paper-beige {
  background-image: var(--paper-beige);
}
.bg-paper-indigo {
  background-image: var(--paper-indigo);
}

.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%));
}

.border-snow {
  --border-color: var(--snow);
}
.border-ink {
  --border-color: var(--ink);
}
.border-neon-green {
  --border-color: var(--neon-green);
}
.border-red {
  --border-color: var(--red);
}
.border-vermilion {
  --border-color: var(--vermilion);
}
.border-vivid-pink {
  --border-color: var(--vivid-pink);
}
.border-sky {
  --border-color: var(--sky);
}
.border-purple {
  --border-color: var(--purple);
}
.border-dark-pink {
  --border-color: var(--dark-pink);
}
.border-yellow {
  --border-color: var(--yellow);
}
.border-orange {
  --border-color: var(--orange);
}
.border-black {
  --border-color: var(--black);
}
.border-neon-blue {
  --border-color: var(--neon-blue);
}
.border-dove-blue {
  --border-color: var(--dove-blue);
}

.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
 */
.bg-blur-8 {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bg-blur-12 {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bg-blur-16 {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.bg-blur-20 {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.bg-blur-24 {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}