/* ========================================================
   ⚔️ BOOK BATTLE TCCG — デザイントークン
   仕様の一次情報は docs/book-battle/DESIGN.md。値を変えたら両方を更新する。

   2層構造：
   ① 原色（--bb-c-*）… 色の値そのもの。配色を変えるときは、ここだけを差し替える
   ② 役割（--bb-*）  … 画面の部品はこちらだけを参照する。原色を直接参照しない
   配色：C「夜戦アリーナ」（2026-09-29）— 冷たい炭色に、発光する陣営色。金は格のあるものだけ

   PC画面（index.html）とスマホ画面（scan.html）の両方がこのファイルを読む。
   ・半透明は color-mix(in srgb, var(--bb-shade) 60%, transparent) のように「役割色の○%」で書く
   ・文字サイズ --bb-fs-*、角丸 --bb-radius-*、画面全体の重なり順 --bb-z-*
   ・canvas に描くもの（QR）は var() を使えないので、app.js の cssToken() で値を読む
   ・SVG は属性に var() を書けないので、style="stop-color:var(--bb-...)" のように style で書く
   ・新しい色やサイズが要るときは、まずここに役割トークンを足してから使う。CSS・JS・HTML に生の値を書かない
======================================================== */
:root {
  /* ---------- ① 原色 ---------- */
  --bb-c-ink-950: #07080C;
  --bb-c-ink-900: #0B0D12;
  --bb-c-ink-800: #141821;
  --bb-c-ink-700: #1C212D;
  --bb-c-ink-600: #2A3140;
  --bb-c-ink-500: #3D4658;
  --bb-c-ink-400: #5E687D;
  --bb-c-ink-300: #97A0B3;
  --bb-c-ink-100: #EEF1F6;
  --bb-c-flame-300: #FF9A85;
  --bb-c-flame-500: #FF5A3C;
  --bb-c-flame-700: #D1301E;
  --bb-c-rose-300: #FF9BAC;
  --bb-c-rose-500: #FF4D6A;
  --bb-c-rose-700: #C22145;
  --bb-c-sky-300: #9FDBFF;
  --bb-c-sky-500: #33B6FF;
  --bb-c-sky-700: #1470B8;
  --bb-c-gold-200: #FFF0C2;
  --bb-c-gold-500: #F5C451;
  --bb-c-gold-700: #A87A12;
  --bb-c-jade-500: #3DDC97;
  --bb-c-amber-500: #F5A524;
  --bb-c-leaf-500: #5FBF6A;
  --bb-c-clay-500: #D49A5E;
  --bb-c-steel-300: #CBD2DC;
  --bb-c-azure-500: #3D8BFF;
  --bb-c-umber-950: #1A1408;
  --bb-c-white: #FFFFFF;

  /* ---------- ② 役割 ---------- */
  /* 面：奥から手前へ */
  --bb-surface-sunken: var(--bb-c-ink-950);  /* 全画面演出の地・ゲージの溝 */
  --bb-surface-base: var(--bb-c-ink-900);    /* ページ背景 */
  --bb-surface-panel: var(--bb-c-ink-800);   /* パネル */
  --bb-surface-raised: var(--bb-c-ink-700);  /* 浮いたパネル・入力欄・カードの地 */
  --bb-border: var(--bb-c-ink-600);
  --bb-border-strong: var(--bb-c-ink-500);
  /* 文字 */
  --bb-text: var(--bb-c-ink-100);
  --bb-text-sub: var(--bb-c-ink-300);
  --bb-text-faint: var(--bb-c-ink-400);
  --bb-on-color: var(--bb-c-white);          /* 色の上に載る文字 */
  /* 行動：主要ボタン・時間切れ。陣営色とは分ける */
  --bb-action: var(--bb-c-flame-500);
  --bb-action-deep: var(--bb-c-flame-700);
  --bb-action-light: var(--bb-c-flame-300);
  --bb-danger: var(--bb-c-flame-500);
  /* 格：極・奥義・必殺技・カードの額縁。ボタンの塗りには使わない */
  --bb-rarity: var(--bb-c-gold-500);
  --bb-rarity-light: var(--bb-c-gold-200);
  --bb-rarity-deep: var(--bb-c-gold-700);
  /* 漫画（コマ割り流）の格（大ゴマ・決めゴマ・見開き）の差し色。効果文字の朱 */
  --bb-koma-accent: var(--bb-c-flame-700);
  --bb-on-rarity: var(--bb-c-umber-950);     /* 金の上に載る文字 */
  /* 陣営 */
  --bb-p1: var(--bb-c-rose-500);
  --bb-p1-deep: var(--bb-c-rose-700);
  --bb-p1-light: var(--bb-c-rose-300);
  --bb-p2: var(--bb-c-sky-500);
  --bb-p2-deep: var(--bb-c-sky-700);
  --bb-p2-light: var(--bb-c-sky-300);
  /* 状態 */
  --bb-heal: var(--bb-c-jade-500);
  --bb-hp-mid: var(--bb-c-amber-500);
  --bb-info: var(--bb-c-sky-300);
  /* 五行（属性以外に使わない） */
  --bb-elem-wood: var(--bb-c-leaf-500);
  --bb-elem-fire: var(--bb-c-flame-500);
  --bb-elem-earth: var(--bb-c-clay-500);
  --bb-elem-metal: var(--bb-c-steel-300);
  --bb-elem-water: var(--bb-c-azure-500);

  /* 書体。Google Fonts が読めない回線（学校・図書館など）でも崩れないよう、OS標準の日本語書体を控えに明記する */
  --bb-font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  --bb-font-ui: 'YakuHanJPs', var(--bb-font-body);            /* 見出し・ボタン（約物を半角に詰める） */
  --bb-font-display: 'YakuHanMPs', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  --bb-font-special: 'Yuji Syuku', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  --bb-font-latin: 'Cinzel', 'Noto Serif JP', serif;          /* 大文字の短い語だけ */

  /* ---------- ① 原色（2026-09-29 追加：直書きの色の整理で必要になったもの） ---------- */
  --bb-c-black: #000000;
  --bb-c-jade-300: #86EFAC;
  --bb-c-rose-950: #450A0A;
  --bb-c-flame-900: #7C2D12;
  --bb-c-sky-900: #0C4A6E;
  --bb-c-jade-900: #075985;
  --bb-c-pink-100: #FBE3F6;
  --bb-c-pink-400: #F472B6;
  --bb-c-violet-300: #C4B5FD;
  --bb-c-violet-400: #A78BFA;
  --bb-c-violet-800: #3A2A6B;
  --bb-c-violet-950: #22103F;
  --bb-c-periwinkle-400: #6D7FE0;
  --bb-c-holo-magenta: #FF0080;
  --bb-c-holo-cyan: #00FFFF;
  --bb-c-navy-800: #101633;
  --bb-c-navy-950: #0A0D1F;
  --bb-c-plum-900: #16102A;

  /* ---------- ② 役割（2026-09-29 追加） ---------- */
  /* 光と影：半透明は color-mix(in srgb, var(--bb-shade) 60%, transparent) のように「役割色の○%」で書く */
  --bb-shade: var(--bb-c-black);             /* 影・暗幕 */
  --bb-glint: var(--bb-c-white);             /* 光・ハイライト・白い閃光 */
  --bb-heal-light: var(--bb-c-jade-300);
  /* ポップアップ数字の縁取り（数字を背景から浮かせる濃い色） */
  --bb-pop-ink-damage: var(--bb-c-rose-950);
  --bb-pop-ink-critical: var(--bb-c-flame-900);
  --bb-pop-ink-miss: var(--bb-c-sky-900);
  --bb-pop-ink-heal: var(--bb-c-jade-900);
  /* 奥義・UR（虹色）。格の金とは別系統。奥義の演出以外に使わない */
  --bb-ougi-pink: var(--bb-c-pink-400);
  --bb-ougi-violet: var(--bb-c-violet-400);
  --bb-ougi-lavender: var(--bb-c-violet-300);
  --bb-ougi-blue: var(--bb-c-periwinkle-400);
  --bb-ougi-light: var(--bb-c-pink-100);
  --bb-ougi-deep: var(--bb-c-violet-800);
  --bb-on-ougi: var(--bb-c-violet-950);      /* 虹色の上に載る文字 */
  /* 必殺技の格「妙技」（来歴1点）の銀。秘技＝金、奥義＝虹の一段下 */
  --bb-myogi: var(--bb-c-steel-300);
  --bb-myogi-light: var(--bb-c-ink-100);
  --bb-myogi-deep: var(--bb-c-ink-500);
  --bb-on-myogi: var(--bb-c-ink-900);
  /* カードの裏面（紺から紫へ沈む地）。紋章の金は --bb-rarity 系を使う */
  --bb-card-back-top: var(--bb-c-navy-800);
  --bb-card-back-mid: var(--bb-c-navy-950);
  --bb-card-back-bottom: var(--bb-c-plum-900);
  /* ホロ光沢（カードの虹色の反射） */
  --bb-holo-1: var(--bb-c-holo-magenta);
  --bb-holo-2: var(--bb-c-holo-cyan);

  /* ---------- 文字サイズ（DESIGN.md 3.5。48種 → 10段階＋演出用） ----------
     カード内の文字（cqw）・演出の clamp()・52px 以上の演出用の大きな文字は対象外 */
  --bb-fs-2xs: 11px;   /* クレジット、極小ラベル（これ未満は使わない） */
  --bb-fs-xs: 12px;    /* 補足、ATK/DEF の見出し */
  --bb-fs-sm: 13px;    /* ログ、チップ */
  --bb-fs-md: 14px;    /* 本文 */
  --bb-fs-lg: 16px;    /* ボタン、プレイヤー名 */
  --bb-fs-xl: 18px;    /* パネル見出し */
  --bb-fs-2xl: 20px;   /* 画面見出し */
  --bb-fs-3xl: 24px;   /* 勝者名、モーダル見出し */
  --bb-fs-4xl: 32px;   /* ROUND、作戦タイムの秒数 */
  --bb-fs-5xl: 44px;   /* VICTORY */

  /* ---------- 角丸（DESIGN.md 5。17種 → 4種＋カード） ---------- */
  --bb-radius-xs: 4px;     /* チップ、入力欄、小さなバッジ */
  --bb-radius-sm: 8px;     /* ボタン、パネル内の区画 */
  --bb-radius-md: 12px;    /* パネル、モーダル */
  --bb-radius-pill: 999px; /* 状態の丸札 */
  /* カードの角丸はカード幅の7%（calc(var(--card-w) * 0.07)） */

  /* ---------- 重なり順（画面全体の層。部品の中の 0〜200 は数値のままでよい） ---------- */
  --bb-z-floating: 1000;      /* カード上の浮き札 */
  --bb-z-arena: 99999;        /* 全画面の対戦アリーナ */
  --bb-z-result: 200000;      /* 結果画面 */
  --bb-z-pause-badge: 999998; /* 一時停止中の札 */
  --bb-z-modal: 999999;       /* 遊び方・一時停止・スマホ案内 */
  --bb-z-zoom: 9999990;       /* カードの拡大表示 */
  --bb-z-cutin: 9999999;      /* カットイン・画面の閃光 */
  --bb-z-detail: 10000000;    /* 必殺技の詳細（カットインより前面） */
}

/* ========================================================
   配色の切り替え（2026-10-02）。設定メニューの「配色」で選ぶ（app.js の setTheme、localStorage bb_theme）。
   <html data-bb-theme="…"> のときに、原色（--bb-c-*）と一部の役割を差し替える。
   役割トークンは :root で原色から計算されるので、同じ要素（html）で原色を上書きすれば全体に効く。
   既定（夜戦）は上の :root のまま。配色を足すときは、下のブロックと設定メニューの見本（--bb-swatch-*）を足す
======================================================== */
:root {
  /* 設定メニューの見本（地の色と格の金を斜めに半分ずつ） */
  --bb-swatch-arena:    linear-gradient(135deg, #0B0D12 0 52%, #F5C451 52% 100%);
  --bb-swatch-ai:       linear-gradient(135deg, #0A1124 0 52%, #F5C451 52% 100%);
  --bb-swatch-urushi:   linear-gradient(135deg, #160A09 0 52%, #E9A23B 52% 100%);
  --bb-swatch-wakatake: linear-gradient(135deg, #071710 0 52%, #E8C35A 52% 100%);
  --bb-swatch-washi:    linear-gradient(135deg, #F5F0E6 0 52%, #B8860B 52% 100%);
}

/* 藍染め：深い藍の地に金。陣営色・五行はそのまま */
:root[data-bb-theme="ai"] {
  --bb-c-ink-950: #050913;
  --bb-c-ink-900: #0A1124;
  --bb-c-ink-800: #111A33;
  --bb-c-ink-700: #18244A;
  --bb-c-ink-600: #24345F;
  --bb-c-ink-500: #364A7C;
  --bb-c-ink-400: #5A6E9E;
  --bb-c-ink-300: #A3B3D8;
  --bb-c-ink-100: #EAF0FF;
  --bb-c-navy-800: #0E1A3D;
  --bb-c-navy-950: #070D22;
  --bb-c-plum-900: #12133A;
}

/* 朱漆：黒漆に朱の照り、暖かい金 */
:root[data-bb-theme="urushi"] {
  --bb-c-ink-950: #0B0505;
  --bb-c-ink-900: #120908;
  --bb-c-ink-800: #1D0F0D;
  --bb-c-ink-700: #2A1613;
  --bb-c-ink-600: #42221C;
  --bb-c-ink-500: #5E3328;
  --bb-c-ink-400: #8A5A4E;
  --bb-c-ink-300: #CDAA9E;
  --bb-c-ink-100: #FAEFE8;
  --bb-c-gold-200: #FFE6B0;
  --bb-c-gold-500: #E9A23B;
  --bb-c-gold-700: #94600F;
  --bb-c-navy-800: #2A0F0E;
  --bb-c-navy-950: #160707;
  --bb-c-plum-900: #2B0A12;
}

/* 若竹：深い緑の地に金 */
:root[data-bb-theme="wakatake"] {
  --bb-c-ink-950: #030C08;
  --bb-c-ink-900: #071710;
  --bb-c-ink-800: #0D2118;
  --bb-c-ink-700: #132D21;
  --bb-c-ink-600: #1F4232;
  --bb-c-ink-500: #2F5947;
  --bb-c-ink-400: #557F6B;
  --bb-c-ink-300: #A3C7B5;
  --bb-c-ink-100: #EDF8F2;
  --bb-c-gold-200: #FFF2C7;
  --bb-c-gold-500: #E8C35A;
  --bb-c-gold-700: #9C7A1A;
  --bb-c-navy-800: #0C2A1F;
  --bb-c-navy-950: #061710;
  --bb-c-plum-900: #102619;
}

/* 和紙：明るい生成りの地に墨の文字。ページの地・パネル・メニューだけが明るくなる。
   カード・対戦画面・演出は暗い地の上で作ってあるので、下の「暗いまま残す部品」で夜戦の色に戻す */
:root[data-bb-theme="washi"] {
  --bb-c-ink-950: #E6DDCB;
  --bb-c-ink-900: #F5F0E6;
  --bb-c-ink-800: #FFFDF8;
  --bb-c-ink-700: #FFFFFF;
  --bb-c-ink-600: #DCD1BC;
  --bb-c-ink-500: #BFAF92;
  --bb-c-ink-400: #8C7D62;
  --bb-c-ink-300: #5F5340;
  --bb-c-ink-100: #2A2318;
  --bb-c-gold-200: #8A6410;
  --bb-c-gold-500: #B8860B;
  --bb-c-gold-700: #7A5A0A;
  --bb-c-sky-300: #1470B8;
  --bb-c-umber-950: #FFFFFF;
}
/* 暗いまま残す部品：カード（デッキ枠・大きいカード・山札の列）、対戦画面、登録演出、詳細表示、カットイン、結果画面。
   役割トークンは親から計算済みの値で受け継がれるので、ここで原色と役割を両方とも夜戦の値に戻す */
:root[data-bb-theme="washi"] :is(.deck-card-slot, .rich-card-outer, .fs-card-mini, .battle-fullscreen-arena, .summon-overlay,
  .card-zoom-overlay, .chuuni-cutin, .special-cutin, .synergy-cutin-overlay, .special-detail-overlay, .winner-result-overlay, .solo-summon, .pause-overlay, .light-pause-badge) {
  --bb-c-ink-950: #07080C;
  --bb-c-ink-900: #0B0D12;
  --bb-c-ink-800: #141821;
  --bb-c-ink-700: #1C212D;
  --bb-c-ink-600: #2A3140;
  --bb-c-ink-500: #3D4658;
  --bb-c-ink-400: #5E687D;
  --bb-c-ink-300: #97A0B3;
  --bb-c-ink-100: #EEF1F6;
  --bb-c-gold-200: #FFF0C2;
  --bb-c-gold-500: #F5C451;
  --bb-c-gold-700: #A87A12;
  --bb-c-sky-300: #9FDBFF;
  --bb-c-umber-950: #1A1408;
  --bb-surface-sunken: var(--bb-c-ink-950);
  --bb-surface-base: var(--bb-c-ink-900);
  --bb-surface-panel: var(--bb-c-ink-800);
  --bb-surface-raised: var(--bb-c-ink-700);
  --bb-border: var(--bb-c-ink-600);
  --bb-border-strong: var(--bb-c-ink-500);
  --bb-text: var(--bb-c-ink-100);
  --bb-text-sub: var(--bb-c-ink-300);
  --bb-text-faint: var(--bb-c-ink-400);
  --bb-rarity: var(--bb-c-gold-500);
  --bb-rarity-light: var(--bb-c-gold-200);
  --bb-rarity-deep: var(--bb-c-gold-700);
  --bb-on-rarity: var(--bb-c-umber-950);
  --bb-info: var(--bb-c-sky-300);
  --bb-p2-light: var(--bb-c-sky-300);
  --bb-myogi-light: var(--bb-c-ink-100);
  --bb-myogi-deep: var(--bb-c-ink-500);
  --bb-on-myogi: var(--bb-c-ink-900);
}