/* ============================================================================
   Hiragana Trial — Design System Tokens（実装用・正）
   ----------------------------------------------------------------------------
   Claude Design 納品（和紙「昼」テーマ）の値を抽出し、
   ① KanjiTrial DS のトークン名にパリティを取り、
   ② 査読の修正（不正解に赤なし／タップ88px＋／セーフエリア／実体影3px）を織り込み、
   ③ styles.css の直書き値をトークン化（中立シェード ramp を追加）したもの。
   出典: docs/design/hiragana-trial-design-system-brief.md / -followup-brief.md
   ============================================================================ */

:root {
  /* ---- サーフェス（昼・和紙） ------------------------------------------- */
  --paper:        #fdfaf3;   /* ページ背景 */
  --paper-deep:   #f4ecda;   /* 沈み面（＝不正解の中立面にも使用） */
  --paper-shade:  #efe6d2;   /* 縞・カード実体影のトーン */
  --surface:      #fffdf7;   /* カード面（KanjiTrial 名にパリティ。--card は別名） */
  --card:         var(--surface);

  /* ---- 罫・境界（中立シェード ramp） ------------------------------------ */
  --line:         #e7ddc9;   /* 標準の罫・境界 */
  --line-deep:    #eadfc9;   /* タイル下の実体影（中立） */
  --line-shade:   #e3d8c1;   /* 不正解タイルの実体影 */
  --line-strong:  #d8cdb6;   /* 不正解タイルの境界 */
  --line-dash:    #cbbfa3;   /* 破線（アート枠など） */

  /* ---- インク（文字） -------------------------------------------------- */
  --ink:          #33302b;
  --ink-soft:     #6f685d;
  --ink-faint:    #9b917d;   /* プレースホルダ */
  --ink-disabled: #b7ae9d;   /* 無効状態の文字 */
  --ink-ghost:    #c7bfae;   /* フェード（ローマ字の薄れ） */
  --sub:          var(--ink-soft);   /* KanjiTrial parity 別名 */

  /* ---- アクセント（KanjiTrial 名を踏襲・値は昼） -----------------------
     構造: <name> = base / -soft = 淡面 / -deep = 濃 / -bright = 明 */
  --shu:          #e8462e;  --shu-soft:    #fce3dc;  --shu-deep:    #c4351f;  --shu-darker:  #a52a16;  /* 一次アクション/CTA 専用（不正解には使わない） */
  --teal:         #1f9e8f;  --teal-soft:   #d7efeb;  --teal-deep:   #14766a;  --teal-bright: #7fd8c9;  /* 正解・情報 */
  --gold:         #f2b21e;  --gold-soft:   #fbecc2;  --gold-deep:   #cf9109;  --gold-bright: #f9d268;  --gold-ink: #7a5300;  /* ごほうび */
  --indigo:       #34558c;  --indigo-soft: #dde6f4;  --indigo-deep: #25406e;  --indigo-line: #b7c3dd;  /* 見出し・構造 */
  --sky:          #3a9dd8;  --sky-soft:    #ddeef9;  --sky-deep:    #2b7bb0;                           /* リンク・落ち着き */

  /* ---- rarity（ごほうびスタンプ／シール） -----------------------------
     ※KanjiTrial は common/rare/epic の"収集レア度"。本アプリは低年齢向けの
       スタンプ帳なので bronze/silver/gold/legendary を採用（意図的な差分）。 */
  --rarity-bronze:    #b6773f;
  --rarity-silver:    #9aa4ab;
  --rarity-gold:      #f2b21e;
  --rarity-legendary: conic-gradient(from 0deg, #f2b21e, #e8462e, #3a9dd8, #1f9e8f, #f2b21e);

  /* ---- 状態（★不正解に赤を使わない★） --------------------------------- */
  --state-correct:        var(--teal);
  --state-correct-surface:var(--teal-soft);
  --state-wrong:          var(--ink-soft);   /* 中立。shu(赤)は使わない */
  --state-wrong-surface:  var(--paper-deep); /* 淡い中立面＋「もういちど」＋スミ励まし */
  --link:                 var(--sky);
  --link-hover:           var(--sky-deep);

  /* ---- タイポグラフィ -------------------------------------------------
     Klee One（教科書体寄り・OFL）＝かな見出し/学習対象。
     Zen Maru Gothic（丸ゴシック・OFL）＝UI/本文。本番はセルフホスト必須。
     UDデジタル教科書体があれば --font-kana を差し替え。 */
  --font-kana:  "Klee One", "UD デジタル 教科書体 NP-R", serif;         /* 学習対象・お手本 */
  /* タイ文字は和文書体の【直後】に置く。末尾（sans-serif の後ろ）だと手前の
     system-ui が先にタイ文字を拾ってしまい、指定書体が使われない（104）。
     グリフ単位のフォールバックなので、和文・欧文の見え方は変わらない。 */
  --font-ui:    "Zen Maru Gothic", "Noto Sans Thai Looped", "Hiragino Maru Gothic ProN", system-ui, sans-serif;

  --fs-kana-hero: 128px;  --fw-kana-hero: 600;
  --fs-display:    40px;  --fw-display:   600;
  --fs-title:      28px;  --fw-title:     700;
  --fs-body:       17px;  --fw-body:      500;
  --fs-label:      14px;  --fw-label:     700;
  --fs-caption:    12px;  --fw-caption:   500;

  /* ---- スペーシング / 角丸 -------------------------------------------- */
  --sp-1: 8px;  --sp-2: 12px;  --sp-3: 16px;  --sp-4: 24px;  --sp-5: 32px;  --sp-6: 48px;
  --radius-sm: 10px;  --radius-md: 16px;  --radius-lg: 24px;  --radius-pill: 999px;

  /* ---- タップ標的（★88px 以上★） ------------------------------------- */
  --hit-min: 88px;    /* 最小 */
  --hit-rec: 108px;   /* 推奨（96〜120の中央） */
  --hit-gap: 20px;    /* 選択肢の間隔（指2本ぶん）→ .ht-choice-group で適用 */

  /* ---- セーフエリア（上端・端8%は操作要素を置かない） ------------------ */
  --safe-top: max(8%, env(safe-area-inset-top, 0px));
  --safe-x:   max(8%, env(safe-area-inset-left, 0px));

  /* ---- 影（★実体影は 3px に統一★） ----------------------------------- */
  --shadow-btn-y:     3px;                            /* 実体影オフセット（色は各バリアントが与える） */
  --shadow-press-y:   1px;
  --shadow-card:      0 2px 0 var(--paper-shade), 0 12px 28px rgba(51,48,43,.06);
  --shadow-btn:       0 var(--shadow-btn-y) 0 var(--indigo-deep);   /* 汎用既定 */
  --shadow-btn-press: 0 var(--shadow-press-y) 0 var(--indigo-deep);
  --shadow-chip:      0 6px 16px -8px rgba(51,48,43,.28);

  /* ---- モーション ----------------------------------------------------- */
  --motion-tap: 160ms ease;
  --motion-pop: 220ms cubic-bezier(.2,.9,.2,1);   /* 正解ポップ scale 1→1.08→1・過度な回転/点滅は禁止 */

  /* ---- セマンティック別名（KanjiTrial parity・利便） ------------------ */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --surface-page:   var(--paper);
  --surface-card:   var(--surface);
  --border-default: var(--line);
  --brand-primary:  var(--indigo);
  --accent-action:  var(--shu);
  --accent-correct: var(--teal);
  --accent-reward:  var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-tap: 0ms; --motion-pop: 0ms; }
}

/* ============================================================================
   パリティ / 修正メモ
   - card→--surface に統一（--card は別名で温存）。accent は base/-soft/-deep/-bright。
   - rarity のみ意図的差分（bronze/silver/gold/legendary 対 common/rare/epic）。
   - ★不正解に赤なし：--state-wrong は中立。--shu は一次アクション/CTA 専用。
   - ★タップ 88px+、★セーフエリア、★実体影 3px（--shadow-btn-y で統一）。
   - 中立シェード ramp（--line-deep/-shade/-strong/-dash、--ink-faint/-disabled/-ghost、
     --paper-shade、--shu-darker、--gold-ink、--indigo-line）は styles.css の
     直書き値をトークン化したもの。値は納品意匠のまま。
   ============================================================================ */