/* デザイントークン（:root のカスタムプロパティ）だけを置くシート。
   base.css から切り出してある — LP のおためし問題（doc/lp_trial_problems_20260914.md）の
   バンドルはトークンだけ要るが、base.css は全要素リセットと body 装飾を含むので
   静的 LP に入れられない。
   読み込み順の先頭（application.html.erb の stylesheet_link_tag）。 */
:root {
  /* --- デザイントークン: doc/design_handoff_10min_work/README.md 準拠 --- */
  --color-bg: #F4F1EC;          /* ホーム背景クリーム */
  --color-bg-quiz: #FFF7EE;     /* 問題画面背景クリーム */
  --color-surface: #fff;
  /* 復習・ウォームアップ問題の手がかりは**上辺ラベルだけ**（2026-08-11）。
     カード地色を薄青（旧 --color-surface-review: #EAF1F9）へ振る案は撤回した。 */
  --color-review-accent: #5A86B5;   /* 復習ラベル文字色 */
  --color-text: #2E3A45;        /* インク */
  --color-text-rgb: 46, 58, 69;
  --color-text-sub: #8A857C;
  --color-text-mute: #C5C0B8;
  --color-primary: #46B48A;     /* ミント */
  --color-primary-rgb: 70, 180, 138;
  --color-primary-dark: #2F8E6B;
  --color-primary-hover: #3da37c;
  --color-primary-soft: #E6F4EE;
  --color-coral: #FF8A65;
  --color-coral-dark: #E2673F;
  --color-coral-hover: #f47a55;
  --color-coral-soft: #FFE3D6;
  --color-sunny: #FFD166;
  --color-correct: #46B48A;
  --color-correct-bg: rgba(70, 180, 138, .94);
  --color-incorrect: #FF8A65;
  --color-incorrect-bg: rgba(255, 247, 238, .97);
  --color-warn: #9A6A00;
  --color-warn-bg: #FFF6E2;
  --color-border: #EDE7DC;
  --color-grid-line: #E4F0EA;
  --color-grid-bg: #FBFEFC;
  --color-ink-line: #2E6FB0;    /* 手書き線 */
  --key-shadow: #E7DECF;
  --radius: 20px;
  --radius-card: 26px;
  --radius-sm: 12px;
  --max-width-child: 480px;
  --max-width-parent: 720px;
  /* journey-card の左右インセット。ホーム側は .app-container(16px)
     （.parent-home の左右 padding は 0。かつては 2px あり合計 18px だったが、
     ≥720px で max-width 頭打ち時にホームだけ 4px 細る差を消すため揃えた）。
     旧T3（finale → ホーム）はこのカードを**そのまま**運ぶので、finale 側の
     .session-portrait-feed-active がここと違う値だと、ゴーストが飛行中に幅を
     補間する羽目になり（規約1の例外を1つ増やす）、カード内の CTA・ヘッダーが
     毎フレーム横へ reflow する。片側だけ変えないこと。 */
  --journey-card-inset-x: 16px;
  /* journey-card の操作行（.journey-action）の箱の高さ。ホームは CTA 1つ分、
     finale は2列ボタンで実ボタンは低いが、**箱は同じ高さ**にする。
     カード高さの差はこの1箇所だけから出る（header / progress / mascot は一致済み）。
     ここがずれると 旧T3 のゴーストが飛行中に高さを補間する羽目になる。 */
  --journey-action-h: 74px;
  /* CTA（`.journey-cta`）の字サイズ。interlude の「つぎにすすむ」と着地のホーム CTA が
     同じ値を読む。文言も字も揃っていれば、interlude → finale で入れ替わっても
     字送りが動かない。body 直下のゴーストでも効くよう :root に置き、計算値の
     焼き付けはしない（規約 3.1）。 */
  --journey-cta-font-size: 25px;
  /* `.journey-cta` の実効幅。`.merged-home-dock` の左右 inset（下の 2 段）と
     `.journey-card` の padding 22px×2 で決まる値を、そのまま式で持つ。

     interlude の「つぎにすすむ」も**この幅**にする。T2 の morph はそのボタンを
     ホーム CTA へ運ぶので、幅が違うと飛行中に横幅を補間する羽目になる
     （DC の BTN_E.pad 18 → BTN_HOME.pad 22 は、この一致のために外す）。
     `--journey-card-inset-x` の注記と同じ理由で、**片側だけ変えないこと**。 */
  --journey-cta-width: calc(
    min(
      100vw
        - max(var(--journey-card-inset-x), env(safe-area-inset-left))
        - max(var(--journey-card-inset-x), env(safe-area-inset-right)),
      var(--max-width-parent)
    ) - 44px
  );
  --control-width-sm: 340px;
  --control-width-md: 360px;
  --control-width-lg: 380px;
  --st: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}