/* =========================================================
   00 スライド型教材デモ テーマ（皮）＝★デザイナーが編集するファイル
   - ここにある変数（デザイントークン）の値を書き換えるだけで、
     全画面の色・影・角丸・フォント・動きが一括で変わります。
   - HTML・JS・_shared/ のファイルは編集しないでください。
   - 変数の意味と変更例 → アプリ製作/診断アプリ/_デザイン変更ガイド.md
   - 現在のテーマ：「ステージライト」＝ダークチャコール×アンバーゴールド×ティール
   ========================================================= */
:root {
  /* ---- 色（基本） ---- */
  --gd-bg: #101216;            /* ページ背景（ほぼ黒のチャコール） */
  --gd-card: #171a21;          /* カード・ヘッダー・目次の背景 */
  --gd-ink: #eae7e1;           /* 本文の文字色 */
  --gd-ink-soft: #a19b90;      /* 補足・弱い文字色 */
  --gd-line: #2a2e38;          /* 罫線・枠線 */

  /* ---- 色（アクセント） ---- */
  --gd-accent: #f0b429;        /* 主アクセント（ゴールド＝ボタン・強調・進捗） */
  --gd-accent-ink: #201500;    /* 主アクセントの上に載せる文字色 */
  --gd-accent-soft: #2b2415;   /* 主アクセントの淡い面（バッジ・ホバー・選択中） */
  --gd-sub: #56c2a7;           /* 副アクセント（ティール＝章ラベル・完了チェック） */

  /* ---- 色（部位別） ---- */
  --gd-header-bg: rgba(16, 18, 22, 0.88);   /* 固定ヘッダー（半透明＋ぼかし） */
  --gd-badge-bg: #f0b429;                    /* 診断の行き先バッジ */
  --gd-badge-ink: #201500;
  --gd-toast-bg: #f0b429;                    /* 「コピーしました」等の通知 */
  --gd-toast-ink: #201500;
  --gd-slide-bg: #14171d;                    /* スライド画像の下地 */
  --gd-lightbox-overlay: rgba(4, 5, 8, 0.9); /* 拡大表示の背景幕 */
  --gd-progress-fill: linear-gradient(90deg, #f0b429, #56c2a7); /* 進捗バー（グラデ可） */

  /* ---- 形 ---- */
  --gd-radius: 18px;           /* カードの角丸 */
  --gd-radius-sm: 12px;        /* ボタン・小部品の角丸 */

  /* ---- 影（ダークでは深めに・CTAはゴールドの発光） ---- */
  --gd-shadow-card: 0 10px 34px rgba(0, 0, 0, 0.45);
  --gd-shadow-cta: 0 6px 24px rgba(240, 180, 41, 0.35);
  --gd-shadow-drawer: 6px 0 30px rgba(0, 0, 0, 0.65);

  /* ---- 文字 ---- */
  --gd-heading-tracking: 0.02em;   /* 見出しの字間（広げると高級感） */

  /* ---- 動き ---- */
  --gd-ticker-duration: 22s;       /* ティッカー帯の一周時間（小さいほど速い） */
}