/* ============================================================
   デザイントークン（正本: docs/implementation-handoff.md §3）
   2026-07-15 デザインFIX: 構成=旧v1 / トンマナ=旧v3（ダーク×動画サイト）
   カラー変更はこのファイルだけを編集する

   アクセント色は 2026-07-28 クライアント確定でロイヤルブルー固定（比較用の切替UI・他プリセットは撤去済み）。

   2026-08-06 修正指示書 v2:
   CTA を「濃紺の面 × ゴールドの枠線 × 白文字」へ変更（指示書パターン②・打ち合わせで採用確定）。
   --accent（UI部品＝絞り込みチップ・リンク・見出し装飾）と --cta（押してほしいボタン）を分離し、
   ゴールドは CTA の枠線だけに限定する。--accent をゴールドにするとページ中が金色になり逆効果になるため。
   ============================================================ */
:root {
  /* --- アクセント（2026-08-10 確定: CTA の濃紺に寄せた青 #3A8DE0）---
     濃紺 #00489C をそのまま文字に使うと背景 #0C0E13 に対して 2.2:1 で読めないため、
     同じ色相のまま明度を上げた値を採用している（対背景 6.4:1）。
     旧値はロイヤルブルー #4D7CFF（2026-07-28 確定 → 2026-08-10 に上書き） */
  --accent: #3A8DE0;
  --accent-strong: #6FB0EE;          /* hover・強調 */
  --on-accent: #FFFFFF;              /* アクセント面上の文字色 */
  --accent-line: rgba(58, 141, 224, 0.32);
  --accent-dim: rgba(58, 141, 224, 0.12);

  /* --- CTA（2026-08-06 指示書 v2 パターン②）---
     面 #00489C はエンブレム実測のネイビー。ページ背景 #0C0E13 との対比が 2.2:1 しかないため、
     ゴールドの枠線は装飾ではなく「輪郭を保つための必須要素」。外すとボタンが背景に沈む。
     白文字 × 濃紺 = 8.7:1（従来の 白文字 × #4D7CFF = 3.72:1 も同時に解消） */
  --cta: #00489C;                    /* 指示書パターン②のネイビーそのもの */
  --cta-hover: #0A57B8;
  --cta-border: #C4983A;             /* エンブレム実測の平均ゴールド */
  --cta-border-hover: #DCB055;
  --cta-border-w: 1.5px;             /* 指示書の指定値 */
  --cta-text: #FFFFFF;
  --cta-shadow: 0 8px 24px -10px rgba(196, 152, 58, 0.55);   /* 指示書の指定値 */

  /* --- アクセントを「面」として塗るとき（2026-08-10 ユーザー指示）---
     絞り込みチップの選択状態・タブの選択・矢印の丸など、押せる部品の背景は CTA と同じ濃紺に揃える。
     淡い青（--accent）のまま面に敷くと、主役の CTA と色が二種類あるように見えるため。
     ゴールドの枠線は CTA だけの特権なので、こちらには付けない（面だけ合わせる）。
     文字色・下線・ドットなどの装飾は従来どおり --accent（#3A8DE0）を使う */
  --accent-fill: var(--cta);
  --accent-fill-hover: var(--cta-hover);

  /* --- ダークサーフェス --- */
  --paper: #0C0E13;                  /* ページ背景（Obsidian） */
  --panel: #14171E;                  /* 一段浮いた面 */
  --panel-2: #191C24;                /* パネル・カード面 */
  --ink: #F5F5F5;                    /* 本文テキスト */
  --ink-soft: rgba(245, 245, 245, 0.62);
  --ink-mute: #6A6E78;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: #3B3F4A;

  /* --- 旧トークンの別名（下層ページCSSが参照。値はダークへ張替え済み） --- */
  --blue: var(--accent);
  --blue-dark: var(--accent-strong);
  --blue-deep: var(--accent-strong);
  --teal-deep: #14171E;
  --yellow: var(--accent);
  --yellow-deep: var(--accent-strong);
  --mist: #191C24;
  --mint: var(--accent-dim);
  --mint-soft: rgba(255, 255, 255, 0.05);
  --grad: linear-gradient(120deg, #0C0E13 0%, #151923 55%, #1A2030 100%);

  /* 英字は Inter で確定（2026-08-14 クライアント指定「読みやすい書体で」）。
     装飾性の強い Unbounded は読み込みごと外した */
  --font-en: "Inter", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --shadow-card: 0 18px 40px -18px rgba(0, 0, 0, 0.65), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   2026-08-10 に確定し、比較用トグルごと撤去したもの
     - ボタンの色（data-btn）= 指示書 v2 パターン②の濃紺 × ゴールド枠 × 白文字
     - リンク・アクセント文字の色（data-lt）= CTA の濃紺に寄せた青
   いずれも値は上の :root（--cta 系 / --accent 系）が正本。
   ============================================================ */