/* tokens.css — モックアップ由来のデザイントークン（Stripe風）。テーマ全体で参照。
 *
 * 2026-08-27 コントラスト見直し。
 * 現場（屋外・明るい場所）やPCディスプレイで「どこに何があるか分からない」という
 * 指摘を受け、実測して原因を特定した。数値はいずれも白地に対する比。
 *
 *   変更前            比      問題
 *   --muted  #6b7c93  4.26   本文の基準 4.5 を下回る。補足説明の大半がこの色。
 *   --border #E3E8EE  1.23   罫線がほぼ見えない。カードの境界が消える。
 *   --surface#F6F9FC  1.06   ページの地とカードの白が同じに見える。区画が立たない。
 *   --success#0BB07B  2.80   合格・正解の文字が読めない。白抜きも同様。
 *   --warning#F59E0B  2.15   同上。
 *
 * 変更後は、文字は 4.5 以上、境界線は 3.0 以上（非文字の判別基準）を満たす。
 * 面の分離は比 1.13（#EDF1F7 vs #FFF）＋境界線で担保する。
 */
:root {
    --ink: #0A2540;            /* 15.54 見出し */
    --body: #3D4E63;           /*  8.51 本文 */
    --muted: #556579;          /*  5.96 補足。旧 #6b7c93 は 4.26 で不足 */
    --border: #C3CDD9;         /*  1.61 カード内の細い区切り（行間など） */
    --border-strong: #7B8BA3;  /*  3.46 区画の境界。カードの外周・見出しの下罫 */
    --bg: #FFFFFF;
    --surface: #EDF1F7;        /* ページの地。カードの白との差を作る */
    --surface-2: #E2E9F2;      /* バーの溝など、地よりさらに一段沈める面 */
    --accent: #5449E8;         /*  6.01 白抜き文字が乗っても読める */
    --accent-2: #0570DE;
    --accent-warm: #FF5A5F;
    --success: #077A55;        /*  5.35 文字にも白抜きの下地にも使える */
    --warning: #8A5700;        /*  6.10 */
    --danger: #C81139;         /*  5.51 */
    /* 面の塗り（文字を乗せない装飾用）。上の文字色と対にして使う。 */
    --success-bg: #E3F5EC;
    --warning-bg: #FBF0DC;
    --danger-bg: #FCE8ED;
    --accent-bg: #ECEAFD;
    --shadow-sm: 0 1px 2px rgba(10,37,64,0.06), 0 2px 4px rgba(10,37,64,0.06);
    --shadow-md: 0 4px 12px rgba(10,37,64,0.10), 0 2px 4px rgba(10,37,64,0.06);
    --shadow-lg: 0 12px 24px rgba(10,37,64,0.12), 0 4px 8px rgba(10,37,64,0.08);

    /* --------------------------------------------------------------
     * 別名。app.css が以前から使っていたのに **一度も定義されていなかった** 変数。
     *
     * `border: 1px solid var(--line)` は --line が未定義だと宣言ごと無効になり、
     * 罫線が1本も描かれない。app.css の 75 箇所がこれに当たっていた
     * （学習履歴の行・模試結果・選択肢・規約ページの表など、区画の枠が丸ごと消えていた）。
     * `outline: 2px solid var(--brand)` も同様で、キーボード操作時のフォーカス枠が
     * 出ていなかった。
     *
     * 名前を app.css 側で一括置換すると差分が大きく、見落としも出る。
     * ここで正しい値に束ねる（2026-08-27）。
     * -------------------------------------------------------------- */
    --line: var(--border);          /* 細い区切り */
    --line-2: var(--border-strong); /* 目立たせたい区切り */
    --brand: var(--accent);
    --bg-soft: var(--surface);
    --warn: var(--warning);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
  }