/* 配色トークン。色はここ以外に直書きしない */
:root,
:root[data-theme="white"] {
  --bg: #FFFFFF;
  --fg: #0A0A0A;
  --bg-2: #F3F3F3;
  --fg-2: #6B6B6B; /* 2026-09-22 QA: #8C8C8C は白背景でコントラスト比3.36と不足(WCAG AA 4.5:1未満)だったため調整 */
  --line: #E5E5E5;
  --inv-bg: #0A0A0A;
  --inv-fg: #FFFFFF;
  --inv-bg-2: #1E1E1E;
  --inv-fg-2: #9A9A9A;
  --inv-line: #2A2A2A;
  --accent: #0A0A0A;
  --accent-fg: #FFFFFF;
  --inv-accent: #FFFFFF;
  --inv-accent-fg: #0A0A0A;
  /* 2026-09-22 QA: エラー文・必須マーク用。--accent を流用すると ACCENT テーマの
     反転面で AA(4.5:1)未達だったため分離（詳細は下の accent テーマのコメント） */
  --danger: #B3261E;
  --inv-danger: #FF8A80;
  /* テーマ切替スウォッチ（ヒーローの Try a theme）表示専用。現在のテーマに関わらず
     差し色そのものを見せる必要があるため --accent とは分離。差し色を確定するときは
     ここも一緒に変える（テーマで変えない） */
  --accent-swatch: #2F5BFF;
  /* 3本柱の担当色（Web制作・改善伴走・AI導入）。2026-09-23 FV で決定（緑・桃・黄）。
     テーマで変えない。面・線・図形の装飾専用で、文字色には使わない */
  --p1: #12A37F;
  --p2: #FF6FA5;
  --p3: #FFD60A;
}
:root[data-theme="black"] {
  --bg: #0A0A0A;
  --fg: #FFFFFF;
  --bg-2: #1E1E1E;
  --fg-2: #9A9A9A;
  --line: #2A2A2A;
  --inv-bg: #FFFFFF;
  --inv-fg: #0A0A0A;
  --inv-bg-2: #F3F3F3;
  --inv-fg-2: #6B6B6B;
  --inv-line: #E5E5E5;
  --accent: #FFFFFF;
  --accent-fg: #0A0A0A;
  --inv-accent: #0A0A0A;
  --inv-accent-fg: #FFFFFF;
  --danger: #FF8A80;
  --inv-danger: #B3261E;
}
:root[data-theme="accent"] {
  /* 白黒の骨格に差し色1色。スウォッチ・非反転面の --accent はユーザーが後で決める値
     （仮：#2F5BFF、--accent-swatch と揃える）。
     2026-09-22 QA 第2ラウンド：反転面の --inv-accent を #7FA3FF（明るい水色寄りの青）
     にしていたが、ページで最も目立つ主CTA（ヒーローの「無料相談する」）だけ淡い色に
     見え、直下の Try a theme スウォッチ（#2F5BFF）と色が食い違う回帰になったため
     #2F5BFF に戻す（ブランド色優先。差し色は3色提示で確定予定）。
     --accent / --inv-accent はボタン背景・:focus-visible のアウトライン・境界線
     専用で、文字色としては使っていない（文字色は --danger か --fg 系）。そのため
     背景・境界線は WCAG 1.4.11（非テキスト、3:1）を満たせば足り、4.5:1 は不要。
     #2F5BFF on #0A0A0A（反転面の背景）= 3.83:1 で 3:1 をクリア。
     white（--inv-accent-fg）on #2F5BFF（ボタン文字としての組み合わせ）= 5.17:1 で
     文字色の基準 4.5:1 もクリアする。contrast.unit.test.mjs の非テキスト用グループ
     を参照。 */
  --accent: #2F5BFF;
  --accent-fg: #FFFFFF;
  --inv-accent: #2F5BFF;
  --inv-accent-fg: #FFFFFF;
}
/* 反転セクション内ではトークンを差し替える */
.section--inv {
  --bg: var(--inv-bg);
  --fg: var(--inv-fg);
  --bg-2: var(--inv-bg-2);
  --fg-2: var(--inv-fg-2);
  --line: var(--inv-line);
  --accent: var(--inv-accent);
  --accent-fg: var(--inv-accent-fg);
  --danger: var(--inv-danger);
}