/* まずは基本となるライトテーマ用の色を決めとくぜ */
:root {
  --bg-color: #f5f2fa; /* 背景色: ごく淡いラベンダー */
  --text-color: #583d72; /* テキストの色: 読みやすいように濃い紫 */
  --link-color: #8e44ad; /* リンクの色: 落ち着いた、でもハッキリした紫 */
  --header-bg: #ffffff; /* ヘッダーの背景色: クリーンな白で清潔感を出す */
  --header-text-color: #583d72; /* ヘッダーのテキストの色: 濃い紫 */
  --button-bg: #8e44ad; /* ボタンの背景色: リンクと同じ紫 */
  --button-text-color: #ffffff; /* ボタンのテキストの色: 白 */
  
  /* 差し色もライトテーマの雰囲気に合わせてお洒落に調整だ */
  --accent-link-color-1: #1abc9c; /* 差し色1: ティールグリーン。紫と相性いいぜ */
  --accent-link-color-2: #e91e63; /* 差し色2: マゼンタピンク。華やかになる */
  --accent-link-color-3: #3498db; /* 差し色3: ソフトな青。落ち着きをプラス */
}

/* OSがダークテーマの時は、こっちの色で上書きするんだ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #2c1e3e; /* 背景色: 濃い紫 */
    --text-color: #e0e0e0; /* テキストの色: 明るい灰色 */
    --link-color: #ff69b4; /* リンクの色: ホットピンク */
    --header-bg: #1f142b; /* ヘッダーの背景色: さらに濃い紫 */
    --header-text-color: #ffffff; /* ヘッダーのテキストの色: 白 */
    --button-bg: #ff69b4; /* ボタンの背景色: ホットピンク */
    --button-text-color: #ffffff; /* ボタンのテキストの色: 白 */

    /* ダークテーマ用の蛍光差し色な！ */
    --accent-link-color-1: #00ffff; /* 差し色1: 水色 */
    --accent-link-color-2: #ffff00; /* 差し色2: 黄色 */
    --accent-link-color-3: #9400d3; /* 差し色3: 蛍光紫 */
  }
}

/* こっから下は、変数が自動で切り替わるから前と同じでOKだ */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

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

.button, .button.button--primary {
  background-color: var(--button-bg) !important;
  color: var(--button-text-color) !important;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  filter: brightness(1.2); /* ホバーしたら少し明るくする感じだ */
}

/* 差し色を使う部分 */
.status__content a {
  color: var(--accent-link-color-1);
}

.notification__message a {
  color: var(--accent-link-color-2);
}

.detailed-status__display-name {
  color: var(--accent-link-color-3);
}