/*
  キミミッケ テーマカラー v0.2
  ============================
  今後テーマカラーを変える時は、このファイルの値だけを書き換えれば
  サイト全体(index.html内の全CSSルール)に反映される。
  index.html側は :root の色定義を一切持たず、常にこのファイルを参照する。

  半透明の縁取りやグロー効果(rgba)のために、hexとは別に
  "○○-rgb" というR,G,B三つ組みのトークンも用意している。
  例: rgba(var(--acc-rgb), .1)  ← アルファ値だけ自由に変えられる

  出典: ユーザー提供イラストからcolorthiefで抽出した支配色。
  --acc(藤鼠の濃い版)は色相328° / Twitch公式紫(#9146FF)は色相264°で
  62°離れており、彩度も大きく異なるため意図的に区別されている。

  ============================
  新しい色を検討する時の方針
  ============================
  1. まず日本の伝統色(藤色、二藍、桜色、鼠色など)を候補に入れる。
     ありがちな配色(彩度高めの青紫など)に
     寄らないよう、名前と由来のある色から発想することでブランドの独自性を保つ。
  2. 新色を追加する前に、Twitch公式紫(#9146FF 色相264°/彩度100%)との
     色相・彩度の距離を確認する(目安: 色相30°以上離すか、彩度を大幅に下げる)。
  3. 新色は必ずこのファイルに変数として追加し、index.html側にhex/rgbaを
     直接書かない(rgbaで使う色は必ず --xxx-rgb も一緒に用意する)。
  4. --live(LIVE赤)、--gold/silver/bronze(ランキング)、--twitch系(外部サービス公式色)は
     「意味が固定された色」なので、ブランドリニューアルでは変えない(意味自体を変える時のみ変更)。
  5. --bg(最暗)を基準に、テキストは WCAG AA(コントラスト比4.5:1以上)を目安にする。
     日本語フォントは細く見えるため、英字よりもやや高めのコントラストを意識する。
  6. セール/成功=緑、警告=黄、エラー=赤、という世間一般の意味は変えない。
     色相をブランドのトーンに寄せるのは良いが、意味が逆転するほどの変更はしない。
  7. タグ分類色(ジャンル/モード/テーマ)はブランドアクセント(--acc/--acc2/--acc3)と
     見た目で区別できるようにする(同じ系統色だと「これは分類かブランドか」が曖昧になる)。
*/

:root {
  /* ===== 背景・表面 (階層順: bg < bg2 < sf/card < card-h) ===== */
  --bg: #0b0913;        --bg-rgb: 11,9,19;      /* ページ全体の背景 */
  --bg2: #171221;                                /* カード内の入れ子背景(統計box, 履歴行など) */
  --sf: #1d1c35;                                 /* サイドバー、統計バー */
  --card: #1d1c35;                               /* ゲーム/配信者カード */
  --card-h: #372b44;                             /* カードhover時 */
  --bd: #312438;                                 /* 標準ボーダー */
  --bd2: #453451;                                /* 強調ボーダー(hover枠線など) */
  --bd3: #5c4767;                                /* スクロールバーhoverなど、さらに明るい境界 */

  /* ===== ブランドアクセント(サイトの個性を決める3色) ===== */
  --acc: #c05990;       --acc-rgb: 192,89,144;   /* メイン。アクティブ状態/主要な強調/ボタン */
  --acc2: #8ca4ef;      --acc2-rgb: 140,164,239; /* セカンダリ。リンク、配信者名、ジャンルタグ */
  --acc3: #a56951;      --acc3-rgb: 165,105,81;  /* 三次色。警告寄りのタグ、MODバッジ */

  /* ===== テキスト ===== */
  --text: #f1e1e0;   /* 本文、見出し */
  --t2: #d5c3cd;     /* 補助テキスト */
  --t3: #a58da1;     /* メタ情報、プレースホルダー */

  /* ===== 固定シグナル色(テーマを変えても意味が変わってはいけない色) ===== */
  --live: #e63946;     --live-rgb: 230,57,70;   /* LIVE配信中インジケータ */
  --gold: #f0c040;                               /* ランキング1位 */
  --silver: #a0aab8;                             /* ランキング2位 */
  --bronze: #c07830;                             /* ランキング3位 */

  /* ===== セール/価格表示(緑系で統一。以前は複数の一発hexが混在していた) ===== */
  --sale: #6cac82;      --sale-rgb: 108,172,130;   /* セールバッジの縁取り/背景ベース */
  --sale-text: #89d2a1;                            /* 暗い背景上で読む価格・バッジ文字 */
  --sale-bg-dark: #1c3524;                         /* セール価格の暗い下地(以前は#4c6b22) */

  /* ===== エラー表示 ===== */
  --error: #d15547;
  --error-text: #ef998f;   /* 暗い背景上のエラーメッセージ文字 */

  /* ===== タグ分類色 ===== */
  --tag-genre-text: #b6c6f7;              /* ジャンルタグの文字色(acc2と同系統の明るいtint) */
  --tag-mode: #22d3ee;    --tag-mode-rgb: 34,211,238;    /* ゲームモードタグ(シアン、変更なし) */
  --tag-theme: #fb7185;   --tag-theme-rgb: 251,113,133;  /* テーマタグ(ローズ、変更なし) */

  /* ===== 外部サービス公式色(サイトのテーマ変更と独立) ===== */
  --twitch: #9146ff;      --twitch-rgb: 145,71,255;
  --twitch-link-text: #bf94ff;

  /* ===== コンセプト色(特定の場所だけで常時使う、ワンポイント用) ===== */
  /* 藤色。花言葉は「優しさ」「歓迎」「決して離れない」。ロゴの「ミッケ」部分で常時使用(「キミ」=--accとの二色使い) */
  --wisteria: #d09fc6;   --wisteria-rgb: 208,159,198;
}