/* ==========================================================================
   デザイントークン
   出典: Claude Design プロトタイプ「プログラミング研修LMS UI」
         （Harness Learning LMS.dc.html）から抽出した確定値。

   方針:
     - 生の色コード・寸法をコンポーネント CSS に直接書かない。必ずここを経由する。
     - フォントサイズはプロトタイプの 0.5px 刻みをそのまま採用する（丸めない）。
     - 座標系はプロトタイプの DEBUG バー（44px）を除いた値に補正済み。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     カラー: グレー階調
     --------------------------------------------------------------------- */
  --c-gray-900: #111827; /* 見出し・強調テキスト */
  --c-gray-800: #1f2937; /* body 既定色 */
  --c-gray-700: #374151; /* 本文・ラベル */
  --c-gray-600: #4b5563; /* 補足本文 */
  --c-gray-500: #6b7280; /* 説明文・テーブル見出し */
  --c-gray-400: #9ca3af; /* プレースホルダ・日時・シェブロン */
  --c-gray-300: #d1d5db; /* 入力枠・スクロールバーつまみ */
  --c-gray-200: #e5e7eb; /* 標準の罫線 */
  --c-gray-100: #f3f4f6; /* 淡い罫線・ページ背景 */
  --c-gray-50: #f9fafb; /* hover 背景 */
  --c-gray-25: #fafafa; /* テーブル見出し背景・展開行背景 */
  --c-white: #ffffff;

  /* ---------------------------------------------------------------------
     カラー: プライマリ（青）
     --------------------------------------------------------------------- */
  --c-blue-700: #1d4ed8; /* 濃 */
  --c-blue-600: #2563eb; /* 基準 */
  --c-blue-500: #3b82f6; /* ログイン入力のフォーカスリング（試作サイト ring-blue-500 準拠） */
  --c-blue-300: #93c5fd; /* 無効時のログインボタン（試作サイト disabled:bg-blue-300 準拠） */
  --c-blue-200: #bfdbfe; /* 淡ボーダー */
  --c-blue-100: #dbeafe;
  --c-blue-50: #eff6ff; /* 淡背景 */

  /* ---------------------------------------------------------------------
     カラー: 成功・学習中（緑）
     --------------------------------------------------------------------- */
  --c-green-700: #15803d; /* 文字・実施中レンジ */
  --c-green-600: #16a34a; /* 強 */
  --c-green-500: #22c55e;
  --c-green-200: #bbf7d0; /* ボーダー */
  --c-green-50: #f0fdf4; /* 背景 */

  /* ---------------------------------------------------------------------
     カラー: エラー・危険（赤）
     --------------------------------------------------------------------- */
  --c-red-700: #b91c1c; /* 淡色地（red-50 / gray-100）に載せる文字色・danger-solid の hover。AA 4.5:1 確保用 */
  --c-red-600: #dc2626; /* 文字（白地専用。淡色地では --c-red-700 を使う） */
  --c-red-500: #ef4444;
  --c-red-200: #fecaca; /* ボーダー */
  --c-red-50: #fef2f2; /* 背景 */

  /* ---------------------------------------------------------------------
     カラー: 警告（橙）
     --------------------------------------------------------------------- */
  --c-amber-800: #92400e;
  --c-amber-700: #b45309;
  --c-amber-600: #d97706; /* 文字 */
  --c-amber-500: #f59e0b; /* フォルダアイコン */
  --c-amber-200: #fde68a; /* ボーダー・蛍光ペン */
  --c-amber-50: #fffbeb; /* 背景 */

  /* ---------------------------------------------------------------------
     カラー: コード・ターミナル（ダーク面）
     コードの構文トークン配色は highlight.js の github-dark テーマ CSS が持つ。
     ここではコードブロックの外枠（背景・既定文字色・行番号）だけを管理し、github-dark と値をそろえる。
     --------------------------------------------------------------------- */
  --c-code-bg: #0f172a; /* コードブロック背景（slate-900。モック準拠。github-dark の .hljs 背景は article.css で透明化して上書き） */
  --c-code-fg: #e2e8f0; /* コード既定文字（slate-200。未ハイライト時のフォールバック。モック準拠） */
  --c-term-bg: #111827; /* ターミナル背景 */
  --c-term-bar: #0b1220; /* ターミナルのタイトルバー */
  --c-term-border: #1f2937;
  --c-code-lineno: #475569; /* 行番号（slate-600。モック準拠） */
  --c-code-bar-bg: #f8fafc; /* コードブロック上部バー */
  --c-slate-400: #94a3b8;
  --c-slate-300: #cbd5e1;
  --c-slate-100: #f1f5f9;

  /* ---------------------------------------------------------------------
     カラー: オーバーレイ
     --------------------------------------------------------------------- */
  --c-overlay-modal: rgba(17, 24, 39, 0.45);
  --c-overlay-drawer: rgba(0, 0, 0, 0.35);
  --c-code-line-hl: rgba(59, 130, 246, 0.15);

  /* ---------------------------------------------------------------------
     セマンティックな別名（用途で参照したいとき用）
     --------------------------------------------------------------------- */
  --c-text: var(--c-gray-800);
  --c-text-strong: var(--c-gray-900);
  --c-text-body: var(--c-gray-700);
  --c-text-muted: var(--c-gray-600);
  --c-text-faint: var(--c-gray-600);
  --c-border: var(--c-gray-200);
  --c-border-soft: var(--c-gray-100);
  --c-border-input: var(--c-gray-300);
  --c-bg-page: var(--c-gray-100);
  --c-bg-surface: var(--c-white);
  --c-bg-subtle: var(--c-gray-25);
  --c-primary: var(--c-blue-600);
  --c-in-progress: var(--c-green-700); /* 実施中レンジの緑 */
  --c-shell-bg: var(--c-gray-100); /* サイドバー・ドロワーの不透明グレー地（SHELL-R5） */
  --c-header-bg: color-mix(
    in oklab,
    var(--c-shell-bg) 70%,
    transparent
  ); /* ヘッダーの半透明グレー（SHELL-R5・design.md D7） */

  /* 章ロック表示（chapter-unlock / CU-R4） */
  --c-nav-locked: var(--c-gray-400); /* ロック章の文字・鍵アイコン（淡いグレー） */
  --c-nav-locked-bg: var(--c-gray-50); /* ロック行/カードの背景 */
  --c-badge-unlock-auto-fg: var(--c-green-700);
  --c-badge-unlock-auto-bg: var(--c-green-50);
  --c-badge-unlock-individual-fg: var(--c-blue-700);
  --c-badge-unlock-individual-bg: var(--c-blue-50);

  /* ---------------------------------------------------------------------
     カラー: 学習カレンダー（260724 モック CAL_COLORS 準拠 / learning-calendar）
     --------------------------------------------------------------------- */
  /* --c-cal-l0 はセル塗りとしては休止（match-mock-calendar-metrics 2026-07-29 のユーザー
     レビュー。記録なしのマスは透明にする）。凡例の level 0 スウォッチも枠線表現に変わったため
     現在この値を参照する規則は無いが、level 0 の色の定義として残す（復活時にそのまま使える）。 */
  --c-cal-l0: #edeff2; /* 記録なし（グレー。現在は休止中） */
  --c-cal-l1: #c5dbf7; /* level1: 1 記録以上（薄い青） */
  --c-cal-l2: #8fb8f5; /* level2: 12 記録以上（やや濃い青） */
  --c-cal-l3: #5b8def; /* level3: 30 記録以上（濃い青） */
  --c-cal-l4: #2563eb; /* level4: 42 記録以上（最も濃い青。= --c-blue-600 と同値だが用途分離のため別名で持つ） */
  --c-cal-card-bg: #f4f5f7; /* コンテナカード地（モック #f4f5f7） */
  --c-cal-stat-bg: #e9ebef; /* 統計カード地（モック #e9ebef） */
  --c-cal-seg-bg: #e7e9ee; /* セグメントグループ地（モック #e7e9ee。切替タブ休止中のため未参照） */
  --c-cal-selected: #16a34a; /* 選択日ハイライトの緑枠（= --c-green-600 と同値。用途分離のため別名） */
  /* 学習カレンダーカードの固定幅（match-mock-calendar-metrics MCM-R1 / design.md D1）。
     モック StudyCalendar の CAL_W + 40 と同値。
     529px（グリッド実効幅）= マス 16.5px × 26 列 + gap 4px × 25、+ padding 20px × 2 = 569px。
     色ではなく寸法のトークンだが、参照箇所が学習カレンダーだけなのでカレンダー群にまとめて置く。 */
  --cal-card-w: 569px;
  /* マスのホバー日付ツールチップ（fix-calendar-tooltip-delay D7）。260724 モックにツールチップ
     表現は存在しない（マスは title 属性のみ。実測確認済み）ため、濃色背景 + 白文字という一般的な
     ツールチップ表現を既定として採る（design.md Open Questions）。 */
  --c-cal-tip-bg: var(--c-gray-900); /* ツールチップ背景（濃色） */
  --c-cal-tip-fg: var(--c-white); /* ツールチップ文字（白） */

  /* ---------------------------------------------------------------------
     カラー: 教材 callout（curriculum-content / restyle-callout-obsidian）
     2026-08-07 ユーザー指定の参考画像（_work/image/{info,tip,warning}-color.png）
     の実測値に合わせて刷新した（それ以前の Obsidian 実測ベースの配色を置き換え）。

     参考画像は macOS の Display P3 スクリーンショットで、ページ地の #fafafa は
     不変なのに彩度のある色だけが灰方向へずれている。sRGB へ逆変換すると 10 色すべてが
     Tailwind の sky / green / orange パレットに一致したため、CSS には逆変換後の
     sRGB 値（＝参考サイトが実際に書いている値）を入れてある。
       画像実測 → 採用値: #f5f9fd → #f0f9ff / #8cd2fd → #7dd3fc / #1d496e → #0c4a6e /
       #2167a4 → #0369a1 / #f5fcf6 → #f0fdf4 / #2b6536 → #166534 / #265330 → #14532d /
       #fcf9f3 → #fff7ed / #f7bb77 → #fdba74 / #753017 → #7c2d12 / #82442d → #9a3412

     4 系統に分ける:
       bg     = 背景色
       border = 枠線（type ごとに色を持つ。以前は 3 type 共通の --c-border だった）
       fg     = アイコンとタイトルの文字色
       body   = 本文の文字色（以前は --c-text-body を継承させていた）

     tip の枠線だけは参考画像に写っていない（画像の上端・右端に枠線ピクセルが無い）。
     3 type で枠線の有無を揃えるため、info / warning と同じ Tailwind 300 レベルの
     green-300 で補完している。

     用途は教材 callout 専用。汎用パレット（--c-blue-* など）とは分けて持つ
     （--c-cal-l4 と同じ「同値でも用途分離のため別名で持つ」流儀）。
     ★ 値を変えるときは必ずコントラスト比を再計算すること
       （CalloutColorTokenCssTest が fg・body の 4.5:1 を機械的に検査して落ちる）。
     --------------------------------------------------------------------- */
  --c-callout-info-bg: #f0f9ff; /* Tailwind sky-50 */
  --c-callout-info-border: #7dd3fc; /* Tailwind sky-300 */
  --c-callout-info-fg: #0c4a6e; /* Tailwind sky-900。bg に対し 8.87:1 */
  --c-callout-info-body: #0369a1; /* Tailwind sky-700。bg に対し 5.57:1 */
  --c-callout-tip-bg: #f0fdf4; /* Tailwind green-50 */
  --c-callout-tip-border: #86efac; /* Tailwind green-300。参考画像に枠線が無いため 300 レベルで補完 */
  --c-callout-tip-fg: #166534; /* Tailwind green-800。bg に対し 6.81:1 */
  --c-callout-tip-body: #14532d; /* Tailwind green-900。bg に対し 8.70:1 */
  --c-callout-warning-bg: #fff7ed; /* Tailwind orange-50 */
  --c-callout-warning-border: #fdba74; /* Tailwind orange-300 */
  --c-callout-warning-fg: #7c2d12; /* Tailwind orange-900。bg に対し 8.83:1 */
  --c-callout-warning-body: #9a3412; /* Tailwind orange-800。bg に対し 6.88:1 */

  /* ---------------------------------------------------------------------
     タイポグラフィ
     --------------------------------------------------------------------- */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* プロトタイプの 0.5px 刻みをそのまま採用する */
  --fs-10: 10px; /* サイドバーの CP バッジ */
  --fs-11: 11px; /* ピル・カリキュラムラベル */
  --fs-11-5: 11.5px; /* 補足メタ情報 */
  --fs-12: 12px; /* テーブル見出し・キャプション */
  --fs-12-5: 12.5px; /* パンくず・目次・小ボタン */
  --fs-13: 13px; /* フィールドラベル・説明文 */
  --fs-13-5: 13.5px; /* 基準: td・サイドバー行・トースト */
  --fs-14: 14px; /* ボタン・入力・モーダル本文 */
  --fs-14-5: 14.5px; /* ステップ見出し */
  --fs-15: 15px; /* 記事本文 p・h4 */
  --fs-16: 16px; /* ホーム h2 */
  --fs-16-5: 16.5px; /* 確認ダイアログ見出し */
  --fs-17: 17px; /* 記事 h3・モーダル見出し・ロゴ */
  --fs-18: 18px; /* 学習カレンダーの統計タイル値（260724 モック準拠） */
  --fs-19: 19px; /* （旧再開カードのセクション名。参照元は削除済みだが値は据え置き） */
  --fs-20: 20px; /* 記事 h2 */
  --fs-22: 22px; /* 管理画面 h1・ログインタイトル */
  --fs-24: 24px; /* ホーム h1 */
  --fs-26: 26px; /* セクション h1 */
  --fs-28: 28px; /* 進捗サークルの数値 */
  --fs-56: 56px; /* エラーページの大きいステータス番号（tasks 9.0） */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-article: 1.9; /* 記事本文 */
  --lh-relaxed: 1.7; /* blockquote・アコーディオン本文 */
  --lh-snug: 1.6;
  --lh-tight: 1.35; /* h1 */

  /* ---------------------------------------------------------------------
     レイアウト固定値
     --------------------------------------------------------------------- */
  --header-h: 56px;
  --sidebar-w: 280px;
  --toc-w: 220px;
  --content-max-w: 960px;
  /* 本文カラムの最小幅。左右の余白を等しく保つために本文を --content-max-w 未満へ
     縮めるときの下限であり、--content-max-w と対になる値
     （fix-content-center-mid-width design.md D2・CLC-BR-02）。

     794px の根拠: サイドバー展開・ビューポート 1650px のとき .lms-section の内幅は
     1306px である（実測）。この幅で左スペーサーと目次カラムを両方 220px 確保すると
     本文に残るのは 1306 − (--toc-w × 2) − (--article-toc-gap × 2) = 1306 − 440 − 72
     = 794px になる。つまり 794px は「不具合帯の下端 1650px で左右の余白を完全に
     等しくできる本文幅の最大値」である。
     これより大きくすると 1650px で左スペーサーが目次カラムより狭くなり、
     これより小さくすると詰め配置帯（1440px 付近）の本文が余分に縮む。 */
  --content-min-w: 794px;
  --article-toc-gap: 36px;
  --page-narrow-max-w: 620px; /* 新規ユーザー発行など縦長フォーム画面 */
  /* 一覧テーブルの最小幅（.lms-table-scroll 内）。狭幅で列が潰れないための下限。
     値は課題提出一覧（submissions.html）で実績のあった 720px を共通値として採用した
     （fix-user-table-overflow design.md D3・GitHub issue #5）。
     ★ 役割: 「列幅を明示しない表」の下限。現在の利用者は課題提出一覧（6 列）で、
     将来追加される列幅未指定の表もこちらを使う。値は変更しないこと。 */
  --table-min-w: 720px;
  /* 一覧テーブルの最小幅（狭幅・列幅を明示する表）。
     ★ 役割: 「狭幅で table-layout: fixed により列幅を明示する表」の幅。
     ユーザー一覧（190+170+100+100）とチェックポイント管理（56+200+140+88+76）の
     列幅合計がこの値に一致する。--table-min-w（720px）と役割が違うため別トークンにする
     （unify-admin-table-scroll-layout design.md D3）。 */
  --table-min-w-compact: 560px;

  /* 絞り込みフォーム（.lms-filter-form）内のコントロール高。select とボタンの上下中心を
     揃えるため、両方に同じ高さを与える（fix-filter-form-alignment design.md D2）。
     値の根拠 = 変更前の .lms-select の実測高さと同値（padding 9px×2 + border 1px×2 +
     行ボックス 22px = 42px）。select の見た目を変えないための値なので勝手に変えない。 */
  --filter-control-h: 42px;

  /* sticky 要素の上端。ヘッダー直下に 10px の余白を足した位置 */
  --sticky-top: calc(var(--header-h) + 10px); /* 66px */
  /* 見出しのアンカージャンプ時に隠れないためのオフセット */
  --scroll-offset: calc(var(--header-h) + 10px); /* 66px */

  --main-pad-y: 32px;
  --main-pad-x: 32px;
  --main-pad-bottom: 96px;
  --main-pad-y-sp: 20px;
  --main-pad-x-sp: 16px;
  --main-pad-bottom-sp: 80px;

  /* ---------------------------------------------------------------------
     角丸
     --------------------------------------------------------------------- */
  --r-2: 2px; /* 学習カレンダー凡例の色見本（レビュー Medium-3 対応。直書き解消） */
  --r-3: 3px; /* 学習カレンダーのマス（レビュー Medium-3 対応。直書き解消） */
  --r-4: 4px; /* CP バッジ・スクロールバー */
  --r-5: 5px; /* kbd・インラインコード */
  --r-6: 6px; /* デモ番号バッジ・カレンダーの日付ツールチップ */
  --r-7: 7px; /* サイドバー行・アイコンボタン・ロゴマーク */
  --r-8: 8px; /* ボタン・入力・小カード */
  --r-10: 10px; /* トースト・コードブロック */
  --r-12: 12px; /* カード */
  --r-14: 14px; /* モーダル */
  --r-pill: 20px; /* ピル・トグル */
  --r-capsule: 999px; /* 高さに関係なく完全なカプセル形（雫トースト・汎用トースト .lms-toast） */
  --r-full: 50%;

  /* ---------------------------------------------------------------------
     影
     --------------------------------------------------------------------- */
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-toast: 0 10px 26px rgba(0, 0, 0, 0.14); /* モック(260724 ToastHost L495)準拠。汎用トースト .lms-toast のみが参照 */
  --shadow-study-toast: 0 12px 28px rgba(37, 99, 235, 0.18); /* 青みがかった影（雫トースト。--c-blue-600 と同色相） */
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.25);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-toggle-knob: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* 横スクロール領域の端に出す影の「色」。他の --shadow-* が box-shadow の値一式なのに対し、
     これは radial-gradient の色として使うため色単体で持つ（プロジェクト規約により
     CSS への色の直書きは禁止）。利用者は components.css の .lms-table-scroll のみ
     （unify-admin-table-scroll-layout design.md D4）。 */
  --c-shadow-scroll-edge: rgba(0, 0, 0, 0.1);

  /* ---------------------------------------------------------------------
     重なり順
     --------------------------------------------------------------------- */
  --z-step-num: 1;
  --z-cal-tip: 1; /* ホバー中のカレンダーマス。ツールチップを右隣以降のマスの下に潜らせない（fix-calendar-tooltip-delay D4） */
  --z-header: 80;
  --z-drawer: 90;
  /* --z-study-toast: 250; */ /* 2026-08-03 unify-study-toast-stacking で休止。学習中確認トーストは
     汎用トーストと同じ共有スタック（.lms-toast-host）に積むため --z-toast に一本化した */
  --z-modal: 300;
  --z-progress: 350; /* 部分更新のローディングバー（ヘッダー・モーダルより上、トーストより下） */
  --z-toast: 400; /* 全トースト共通の共有スタック（汎用 + 学習中確認）の重なり順 */

  /* ---------------------------------------------------------------------
     モーション
     --------------------------------------------------------------------- */
  --dur-fade: 0.15s; /* オーバーレイのフェードイン */
  --dur-modal: 0.18s; /* モーダル本体 */
  --dur-acc: 0.2s; /* アコーディオン展開・トグル */
  --dur-toast: 0.3s; /* トースト入場（上から等速で降りて膨らむ）・退場（拡大＋ぼかしで弾ける） */
  --dur-study-drop: 0.6s; /* 学習中トーストの雫ドロップイン（lmsDrop） */
  --dur-study-burst: 0.45s; /* 学習中トーストのバースト退場（lmsBurst）。dom.ts の除去タイマーと一致させる */
  --dur-card: 0.15s; /* カード hover */
  --dur-sidebar: 0.3s; /* サイドバー開閉の幅トランジション（SHELL-R4・試作サイト 300ms） */
  --dur-progress: 2s; /* 部分更新のローディングバーが左端から全幅まで伸びきる時間（受講者 #13） */
}

/* ブレークポイント: max-width 1023px 以下をモバイルとして扱う（プロトタイプ準拠の 1 段階のみ）。
   CSS カスタムプロパティはメディアクエリの条件に使えないため、値は各所に直接記述する。 */