/* テーマトークン。dark = .ak-shell / light = .ak-shell[data-theme="light"]。
   navy / mocha / sky / sand は .ak-shell[data-palette="…"] (#695)。data-theme は明暗の系統を表し、
   sky / sand は data-theme="light" と data-palette を同じ要素に併せ持つ — 系統で分岐する各 css の
   [data-theme="light"] 規則がそのまま当たる。navy / mocha は dark 系統なので data-theme を持たない。
   data-palette のブロックは light ブロックと同じ詳細度で、後ろに置くことで勝つ — light より前へ移さない。
   全セレクタは同一 CSS 変数集合を必ず定義する(#56: 欠落はそのテーマでサイレント見た目バグ)。
   --font-mono / --font-sans / --font-display / --radius-* / --bevel-* はテーマ非依存だが
   同一集合の不変条件のため全ブロックに定義する。

   コントラスト制約(#226/PR#234): --danger-line / --accent は枠として中立面の上に置くと 3:1 を割る
   (前者は --danger-soft 面向けの淡色、後者は light の最悪面で 2.75:1) — ボタン/チップの枠に使うのは
   --btn-line(通常)と --btn-accent-line(accent 塗り・選択状態)の2つだけ。
   --danger を文字として中立面に載せると 4.5:1 を割る — テキストの danger hover は面を --danger-soft に
   する。"✕" 等のアイコングリフは 3:1 要件なので中立面のままでよい(.flt-icon-btn は意図的)。 */

.ak-shell {
    --bg:#0A0B0C;--chrome:#141517;--chrome-line:#2A2C30;--menu:#101113;--menu-line:#24262B;
    --tool:#17181B;--tool-line:#2A2C31;--panel:#0E0F11;--panel2:#121316;--head:#16181B;--head-line:#2A2C31;
    --subhead:#141518;--line:#262930;--line2:#3A3F47;--rowline:#17191D;--matrowline:#16181C;--input:#0B0C0E;
    --chip:#1B1E23;--card:#141618;--card-line:#2A2E35;--text:#E8EAEC;--text2:#D6D9DD;--text3:#F4F5F7;
    --mute:#AEB4BC;--mute2:#949AA3;--mute3:#A6ACB4;--dim:#6E747C;--dim2:#676D74;--faint:#555A61;--code:#8A9099;
    --off:#33373D;--accent:#F5731A;--accent-ink:#140A02;--accent-soft:#241710;--accent-soft-line:#3E2A14;
    --danger:#F0553A;--danger-soft:#2A1210;--danger-line:#4A211A;--danger-row:#1A1113;--rowbg:transparent;
    --ok:#46A860;--ok-soft:#0F1A12;--ok-line:#2A5A38;--ok-text:#6FBF84;--sur:#4C5560;--tgt-soft:#1E1608;--tgt-line:#3E2E14;--tgt-text:#F2B653;--tgt-btn:#B58A3E;
    --tgt-btn-bg:#241C0C;--cur-hover-bg:#1A1D22;--divider:#1A1C21;--detail-bg:#090A0C;--detail-grid:#181A1F;--vline:#282C33;
    --r6:#F2A93C;--r5:#CE86D8;--r4:#6EA3DE;--r3:#77C289;--r2:#93A2AE;--r1:#93A2AE;
    --search-hit-bg:#3E2E0E;--search-hit-current-bg:#604612;
    --row-alt:#131519;--row-hover:#1A1D22;
    --font-mono:"Cascadia Mono", Consolas, "Courier New", monospace;
    --font-sans:"Segoe UI", "Meiryo UI", sans-serif;
    --font-display:"Bahnschrift","Bahnschrift SemiCondensed","Segoe UI Variable Display",var(--font-sans);
    --radius-frame:3px;--radius-container:2px;--radius-control:3px;
    --bevel-frame:6px;--bevel-container:5px;--bevel-control:4px;
    --btn-bg:#1A1D22;--btn-line:#7A828E;--btn-hover-bg:#262A31;--btn-hover-line:#949CA8;
    --btn-active-bg:#31363F;--btn-accent-hover-bg:#FF8A3D;--btn-ok-hover-bg:#57C075;--focus-ring:#8FB8FF;
    --btn-accent-line:#FF8A3D;
    color-scheme: dark;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
    /* 単一出所: WPF ウィンドウ枠(DWMWA_BORDER_COLOR)は WindowChromePalette がこの値を複製する(issue #227)。
       CSS 側はまだこのトークンを参照しない。 */
    --window-border:#4E545C;
}

.ak-shell[data-theme="light"] {
    --bg:#EDECEA;--chrome:#F7F7F6;--chrome-line:#D5D6D4;--menu:#F0F0EF;--menu-line:#D5D6D4;
    --tool:#EFEFEE;--tool-line:#D5D6D4;--panel:#F2F1F0;--panel2:#ECEBEA;--head:#E7E7E5;--head-line:#D5D6D4;
    --subhead:#E7E7E5;--line:#D7D8D6;--line2:#C7C8C6;--rowline:#E2E2E0;--matrowline:#E2E2E0;--input:#FFFFFF;
    --chip:#EAEAE8;--card:#F8F8F7;--card-line:#D8D9D7;--text:#1A1B1D;--text2:#26272A;--text3:#101113;
    --mute:#3A3C40;--mute2:#5A5E63;--mute3:#5A5E63;--dim:#888C92;--dim2:#888C92;--faint:#A6AAB0;--code:#888C92;
    --off:#C4C5C3;--accent:#E05610;--accent-ink:#160B02;--accent-soft:#FBEBDD;--accent-soft-line:#F0CDA8;
    --danger:#C0392B;--danger-soft:#FBEBE8;--danger-line:#F0CFC8;--danger-row:#FBEEEB;--rowbg:#FBFAF6;
    --ok:#2E8B4E;--ok-soft:#EAF6EE;--ok-line:#BFE0C9;--ok-text:#1F6E3B;--sur:#A6AAB0;--tgt-soft:#FBEBDD;--tgt-line:#F0CDA8;--tgt-text:#B45A0A;--tgt-btn:#B58A3E;
    --tgt-btn-bg:#F3E2C4;--cur-hover-bg:#EAEAE8;--divider:#E2E2E0;--detail-bg:#EBEBE9;--detail-grid:#E2E2E0;--vline:#D9DAD8;
    --r6:#C8781A;--r5:#A64CB0;--r4:#3E76BF;--r3:#3E9A5B;--r2:#8A8E96;--r1:#8A8E96;
    --search-hit-bg:#FBEEC0;--search-hit-current-bg:#F3D882;
    --row-alt:#EAEAE8;--row-hover:#E4E4E2;
    --font-mono:"Cascadia Mono", Consolas, "Courier New", monospace;
    --font-sans:"Segoe UI", "Meiryo UI", sans-serif;
    --font-display:"Bahnschrift","Bahnschrift SemiCondensed","Segoe UI Variable Display",var(--font-sans);
    --radius-frame:3px;--radius-container:2px;--radius-control:3px;
    --bevel-frame:6px;--bevel-container:5px;--bevel-control:4px;
    --btn-bg:#EAEAE8;--btn-line:#6E6E6C;--btn-hover-bg:#DEDEDC;--btn-hover-line:#5C5C5A;
    --btn-active-bg:#CECECC;--btn-accent-hover-bg:#F26A1E;--btn-ok-hover-bg:#4FB06B;--focus-ring:#0B57D0;
    --btn-accent-line:#C94E0C;
    color-scheme: light;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
    /* 単一出所: WPF ウィンドウ枠(DWMWA_BORDER_COLOR)は WindowChromePalette がこの値を複製する(issue #227)。
       CSS 側はまだこのトークンを参照しない。 */
    --window-border:#B0B0AE;
}

/* 追加テーマは面と罫線だけに色みを持たせる。--accent / --danger / --ok / --focus-ring / 文字色 / --btn-line は
   同じ系統の dark・light と同値に保つ — 色相環のほぼ全域が意味色とレアリティ(--r6..--r2)に使われており、
   テーマごとに替えるとどれかと衝突する(#695)。 */
.ak-shell[data-palette="navy"] {
    --bg:#080C14;--chrome:#111C30;--chrome-line:#283858;--menu:#0E1626;--menu-line:#223150;
    --tool:#131D30;--tool-line:#283858;--panel:#0B111C;--panel2:#0F1623;--head:#142037;--head-line:#283858;
    --subhead:#121B2C;--line:#233048;--line2:#364865;--rowline:#162032;--matrowline:#151F30;--input:#070B13;
    --chip:#1A2740;--card:#111A2A;--card-line:#28374F;--text:#E8EAEC;--text2:#D6D9DD;--text3:#F4F5F7;
    --mute:#AEB4BC;--mute2:#949AA3;--mute3:#A6ACB4;--dim:#6E747C;--dim2:#676D74;--faint:#555A61;--code:#8A9099;
    --off:#2E3B52;--accent:#F5731A;--accent-ink:#140A02;--accent-soft:#241710;--accent-soft-line:#3E2A14;
    --danger:#F0553A;--danger-soft:#2A1210;--danger-line:#4A211A;--danger-row:#1A1113;--rowbg:transparent;
    --ok:#46A860;--ok-soft:#0F1A12;--ok-line:#2A5A38;--ok-text:#6FBF84;--sur:#46587A;--tgt-soft:#1E1608;--tgt-line:#3E2E14;--tgt-text:#F2B653;--tgt-btn:#B58A3E;
    --tgt-btn-bg:#241C0C;--cur-hover-bg:#18243A;--divider:#182336;--detail-bg:#070A11;--detail-grid:#162033;--vline:#25344E;
    --r6:#F2A93C;--r5:#CE86D8;--r4:#6EA3DE;--r3:#77C289;--r2:#93A2AE;--r1:#93A2AE;
    --search-hit-bg:#3E2E0E;--search-hit-current-bg:#604612;
    --row-alt:#111A29;--row-hover:#1A2740;
    --font-mono:"Cascadia Mono", Consolas, "Courier New", monospace;
    --font-sans:"Segoe UI", "Meiryo UI", sans-serif;
    --font-display:"Bahnschrift","Bahnschrift SemiCondensed","Segoe UI Variable Display",var(--font-sans);
    --radius-frame:3px;--radius-container:2px;--radius-control:3px;
    --bevel-frame:6px;--bevel-container:5px;--bevel-control:4px;
    --btn-bg:#18243A;--btn-line:#7A828E;--btn-hover-bg:#223250;--btn-hover-line:#949CA8;
    --btn-active-bg:#2C4066;--btn-accent-hover-bg:#FF8A3D;--btn-ok-hover-bg:#57C075;--focus-ring:#8FB8FF;
    --btn-accent-line:#FF8A3D;
    color-scheme: dark;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
    /* 単一出所: WPF ウィンドウ枠(DWMWA_BORDER_COLOR)は WindowChromePalette がこの値を複製する(issue #227)。
       CSS 側はまだこのトークンを参照しない。 */
    --window-border:#47608F;
}

/* 面の色相がオレンジ・琥珀・赤に近く、dark と同じ淡い塗りは下地に溶ける — --accent-soft / --tgt-* /
   --danger-soft / --danger-row / --search-hit-* と対応する line を一段明るく置く。 */
.ak-shell[data-palette="mocha"] {
    --bg:#0E0B08;--chrome:#1F1811;--chrome-line:#3D3122;--menu:#1A140E;--menu-line:#362B1E;
    --tool:#201912;--tool-line:#3D3122;--panel:#130F0B;--panel2:#17120D;--head:#241C13;--head-line:#3D3122;
    --subhead:#1D1711;--line:#332A20;--line2:#4D4234;--rowline:#221B14;--matrowline:#211A13;--input:#0D0A07;
    --chip:#2B2218;--card:#1B1610;--card-line:#3A3024;--text:#E8EAEC;--text2:#D6D9DD;--text3:#F4F5F7;
    --mute:#AEB4BC;--mute2:#949AA3;--mute3:#A6ACB4;--dim:#6E747C;--dim2:#676D74;--faint:#555A61;--code:#8A9099;
    --off:#42382D;--accent:#F5731A;--accent-ink:#140A02;--accent-soft:#3A2410;--accent-soft-line:#5C3B18;
    --danger:#F0553A;--danger-soft:#34130F;--danger-line:#5A261D;--danger-row:#2A1512;--rowbg:transparent;
    --ok:#46A860;--ok-soft:#0F1A12;--ok-line:#2A5A38;--ok-text:#6FBF84;--sur:#63574A;--tgt-soft:#332608;--tgt-line:#54400F;--tgt-text:#F2B653;--tgt-btn:#B58A3E;
    --tgt-btn-bg:#382B0C;--cur-hover-bg:#282017;--divider:#261E16;--detail-bg:#0C0907;--detail-grid:#231C15;--vline:#382E23;
    --r6:#F2A93C;--r5:#CE86D8;--r4:#6EA3DE;--r3:#77C289;--r2:#93A2AE;--r1:#93A2AE;
    --search-hit-bg:#4A3A0C;--search-hit-current-bg:#6E5412;
    --row-alt:#1B150F;--row-hover:#2B2218;
    --font-mono:"Cascadia Mono", Consolas, "Courier New", monospace;
    --font-sans:"Segoe UI", "Meiryo UI", sans-serif;
    --font-display:"Bahnschrift","Bahnschrift SemiCondensed","Segoe UI Variable Display",var(--font-sans);
    --radius-frame:3px;--radius-container:2px;--radius-control:3px;
    --bevel-frame:6px;--bevel-container:5px;--bevel-control:4px;
    --btn-bg:#282017;--btn-line:#7A828E;--btn-hover-bg:#362C20;--btn-hover-line:#949CA8;
    --btn-active-bg:#45382A;--btn-accent-hover-bg:#FF8A3D;--btn-ok-hover-bg:#57C075;--focus-ring:#8FB8FF;
    --btn-accent-line:#FF8A3D;
    color-scheme: dark;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
    /* 単一出所: WPF ウィンドウ枠(DWMWA_BORDER_COLOR)は WindowChromePalette がこの値を複製する(issue #227)。
       CSS 側はまだこのトークンを参照しない。 */
    --window-border:#6B5A45;
}

/* sky / sand の --tgt-text / --r6 / --r3 / --r2 / --r1 は light と同じ色相で一段暗い — light の値のままだと
   目標値セルの文字が 4.5:1、交互行(--row-alt)上のレアリティバーが 3:1 を割る。 */
.ak-shell[data-palette="sky"] {
    --bg:#E1E8F1;--chrome:#E3ECF7;--chrome-line:#BECBDD;--menu:#DDE7F4;--menu-line:#BECBDD;
    --tool:#E4ECF6;--tool-line:#BECBDD;--panel:#EDF2F8;--panel2:#E6ECF4;--head:#D6E0EE;--head-line:#BECBDD;
    --subhead:#DCE5F0;--line:#C7D2E0;--line2:#B3C0D2;--rowline:#D5DEEA;--matrowline:#D5DEEA;--input:#FFFFFF;
    --chip:#DFE7F1;--card:#F3F7FB;--card-line:#C8D3E1;--text:#1A1B1D;--text2:#26272A;--text3:#101113;
    --mute:#3A3C40;--mute2:#5A5E63;--mute3:#5A5E63;--dim:#888C92;--dim2:#888C92;--faint:#A6AAB0;--code:#888C92;
    --off:#B5C0CE;--accent:#E05610;--accent-ink:#160B02;--accent-soft:#FBEBDD;--accent-soft-line:#F0CDA8;
    --danger:#C0392B;--danger-soft:#FBEBE8;--danger-line:#F0CFC8;--danger-row:#FBEEEB;--rowbg:#F7FAFD;
    --ok:#2E8B4E;--ok-soft:#EAF6EE;--ok-line:#BFE0C9;--ok-text:#1F6E3B;--sur:#9AA8BA;--tgt-soft:#FBEBDD;--tgt-line:#F0CDA8;--tgt-text:#A04F08;--tgt-btn:#B58A3E;
    --tgt-btn-bg:#F3E2C4;--cur-hover-bg:#DCE5F0;--divider:#D5DEEA;--detail-bg:#E3E9F1;--detail-grid:#D5DEEA;--vline:#CBD5E2;
    --r6:#BF7012;--r5:#A64CB0;--r4:#3E76BF;--r3:#379255;--r2:#7F838B;--r1:#7F838B;
    --search-hit-bg:#FBEEC0;--search-hit-current-bg:#F3D882;
    --row-alt:#E6EDF5;--row-hover:#D9E3F0;
    --font-mono:"Cascadia Mono", Consolas, "Courier New", monospace;
    --font-sans:"Segoe UI", "Meiryo UI", sans-serif;
    --font-display:"Bahnschrift","Bahnschrift SemiCondensed","Segoe UI Variable Display",var(--font-sans);
    --radius-frame:3px;--radius-container:2px;--radius-control:3px;
    --bevel-frame:6px;--bevel-container:5px;--bevel-control:4px;
    --btn-bg:#DFE7F1;--btn-line:#6E6E6C;--btn-hover-bg:#D0DBEA;--btn-hover-line:#5C5C5A;
    --btn-active-bg:#BFCCDF;--btn-accent-hover-bg:#F26A1E;--btn-ok-hover-bg:#4FB06B;--focus-ring:#0B57D0;
    --btn-accent-line:#C94E0C;
    color-scheme: light;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
    /* 単一出所: WPF ウィンドウ枠(DWMWA_BORDER_COLOR)は WindowChromePalette がこの値を複製する(issue #227)。
       CSS 側はまだこのトークンを参照しない。 */
    --window-border:#8FA3BF;
}

/* データ面(--panel / --panel2 / --row-alt / --card)と淡い塗りは light 以上の明るさに置く — 帯より暗くすると
   文字とレアリティバーのコントラストが light を下回る。ベージュの識別は帯(--chrome / --menu / --tool / --head)が担う。 */
.ak-shell[data-palette="sand"] {
    --bg:#ECE3D2;--chrome:#F3E9D6;--chrome-line:#D0C3A9;--menu:#EFE4CF;--menu-line:#D0C3A9;
    --tool:#F1E8D7;--tool-line:#D0C3A9;--panel:#F9F3E4;--panel2:#F3ECDC;--head:#E6DAC3;--head-line:#D0C3A9;
    --subhead:#E9DFCB;--line:#D6CBB7;--line2:#C6B9A0;--rowline:#E2D8C5;--matrowline:#E2D8C5;--input:#FFFFFF;
    --chip:#EBE2D0;--card:#FCF7EC;--card-line:#D7CCB8;--text:#1A1B1D;--text2:#26272A;--text3:#101113;
    --mute:#3A3C40;--mute2:#5A5E63;--mute3:#5A5E63;--dim:#888C92;--dim2:#888C92;--faint:#A6AAB0;--code:#888C92;
    --off:#C6BBA6;--accent:#E05610;--accent-ink:#160B02;--accent-soft:#FFECD4;--accent-soft-line:#EDBF93;
    --danger:#C0392B;--danger-soft:#FCE6E1;--danger-line:#EFC4BA;--danger-row:#FBE9E4;--rowbg:#FDF9F0;
    --ok:#2E8B4E;--ok-soft:#EAF6EE;--ok-line:#BFE0C9;--ok-text:#1F6E3B;--sur:#ADA08A;--tgt-soft:#FFECD4;--tgt-line:#EDBF93;--tgt-text:#A04F08;--tgt-btn:#B58A3E;
    --tgt-btn-bg:#F3DDB5;--cur-hover-bg:#E8DFCC;--divider:#E2D8C5;--detail-bg:#EBE3D4;--detail-grid:#E2D8C5;--vline:#D9CEBA;
    --r6:#BF7012;--r5:#A64CB0;--r4:#3E76BF;--r3:#379255;--r2:#7F838B;--r1:#7F838B;
    --search-hit-bg:#FAE7A0;--search-hit-current-bg:#F0CC5C;
    --row-alt:#F2EBDB;--row-hover:#E8DDC8;
    --font-mono:"Cascadia Mono", Consolas, "Courier New", monospace;
    --font-sans:"Segoe UI", "Meiryo UI", sans-serif;
    --font-display:"Bahnschrift","Bahnschrift SemiCondensed","Segoe UI Variable Display",var(--font-sans);
    --radius-frame:3px;--radius-container:2px;--radius-control:3px;
    --bevel-frame:6px;--bevel-container:5px;--bevel-control:4px;
    --btn-bg:#EBE2D0;--btn-line:#6E6E6C;--btn-hover-bg:#E3D8C2;--btn-hover-line:#5C5C5A;
    --btn-active-bg:#D2C4A8;--btn-accent-hover-bg:#F26A1E;--btn-ok-hover-bg:#4FB06B;--focus-ring:#0B57D0;
    --btn-accent-line:#C94E0C;
    color-scheme: light;
    scrollbar-color: var(--btn-line) transparent;
    scrollbar-width: thin;
    /* 単一出所: WPF ウィンドウ枠(DWMWA_BORDER_COLOR)は WindowChromePalette がこの値を複製する(issue #227)。
       CSS 側はまだこのトークンを参照しない。 */
    --window-border:#B39E78;
}

/* 素材レアリティ(rarity 0-4)を --r2..--r6 へ写す — 最上位レア4=★6 のオレンジ。素材名セルのカラーバーが background: var(--material-rarity-color) で参照する。 */
.mat-r0 { --material-rarity-color: var(--r2); }
.mat-r1 { --material-rarity-color: var(--r3); }
.mat-r2 { --material-rarity-color: var(--r4); }
.mat-r3 { --material-rarity-color: var(--r5); }
.mat-r4 { --material-rarity-color: var(--r6); }
