/* グラデーション(Figmaの「色スタイル」= gradation/*)
 *
 * このファイルは手で書く。自動生成しない。
 * 理由: グラデーションはFigmaの変数(variable)ではなく**スタイル**なので、
 *       トークンJSONの書き出しに含まれず build_tokens.js では生成できない。
 *
 * **プリミティブ(htdocs/lite/css/common/tokens.css)を先に読み込むこと。**
 *
 * カラーストップ:
 *   Figmaの「色スタイルを編集」パネルの実値を写している(スクリーンショットで確認済み)。
 *   注意: `get_design_context` が書き出すCSSではストップが 7.1429% / 92.857% になるが、
 *   これは書き出し時の変換由来で、スタイル本来の値は 0% / 100% である。
 *   既存コンポーネントCSSは書き出し値のまま持っているため、ここへ寄せると
 *   わずかに見た目が変わる。移行する場合は必ず目視で確認すること。
 *
 * 角度:
 *   Figmaはグラデーションを「ノードの矩形に対する正規化ベクトル」で保持するため、
 *   同じスタイルでもノードの縦横比によって書き出される角度が変わる
 *   (例: gradation/pale-orange は 143deg / 145deg / 170deg と揺れて出てくる)。
 *   スタイル本来の向きを代表値として1つ決めている。
 *   角度は「色スタイルを編集」パネルからは読み取れないため、
 *   実ノードから書き出した角度がある7種はその代表値、
 *   実ノードでの使用箇所が未確認の2種(green-yellow / yellow-orange)は
 *   **暫定で135deg**にしてある。使う際にFigmaの実ノードで角度を確認すること。
 */

:root {
  /* --- 2色 --- */

  /* 白 → ほぼ白のオレンジ。カード/パネルの地色 */
  --guest-gradation-pale-orange: linear-gradient(170deg, var(--color-neutral-0) 0%, var(--color-orange-25) 100%);

  /* 淡いオレンジ。アコーディオンの「Q」マークなど */
  --guest-gradation-light-orange: linear-gradient(135deg, var(--color-orange-50) 0%, var(--color-orange-100) 100%);

  /* 中間のオレンジ。section-title の連番(既定色) */
  --guest-gradation-mid-orange: linear-gradient(141deg, var(--color-orange-100) 0%, var(--color-orange-300) 100%);

  /* 濃いオレンジ。アクセントボタンの地色、セカンダリボタンの文字色。
   * dark-orange と紛らわしいので注意(こちらは 500 → 300 で明るくなる向き) */
  --guest-gradation-deep-orange: linear-gradient(172deg, var(--color-orange-500) 0%, var(--color-orange-300) 100%);

  /* deep-orange より暗く、逆に濃くなる向き(300 → 600)。
   * mvのキャッチコピーの文字塗りに使用。
   * 角度は実ノード(4904:2792 / 4904:2793)の書き出し値 176.33deg / 177.08deg から177degとした。 */
  --guest-gradation-dark-orange: linear-gradient(177deg, var(--color-orange-300) 0%, var(--color-orange-600) 100%);

  /* section-title の連番のバリアント */
  --guest-gradation-mid-yellow: linear-gradient(141deg, var(--color-yellow-200) 0%, var(--color-yellow-500) 100%);
  --guest-gradation-mid-green: linear-gradient(141deg, var(--color-green-100) 0%, var(--color-green-300) 100%);

  /* --- 3色 --- */
  /* いずれも緑・黄・オレンジの3色だが、ストップ位置がまったく違うため見た目は大きく異なる。
   * 名前ではなく必ずストップ位置で選ぶこと。 */

  /* 緑→黄→オレンジ。左から右へ水平。緑と黄がほぼ均等に出る */
  --guest-gradation-green-yellow-orange: linear-gradient(
    90deg,
    var(--color-green-400) 10%,
    var(--color-yellow-500) 40%,
    var(--color-orange-500) 70%
  );

  /* ほぼ全面が緑で、末端だけ黄→オレンジに抜ける */
  --guest-gradation-green-yellow: linear-gradient(
    135deg,
    var(--color-green-300) 70%,
    var(--color-yellow-500) 90%,
    var(--color-orange-400) 100%
  );

  /* 名前は yellow-orange だが起点は緑。緑と黄は先頭10%に圧縮され、半分以降はオレンジ一色 */
  --guest-gradation-yellow-orange: linear-gradient(
    135deg,
    var(--color-green-300) 0%,
    var(--color-yellow-500) 10%,
    var(--color-orange-400) 50%
  );
}