/* =========================================================================
   徳島県 食育動画コンテスト — デザイントークン（単一の正）
   -------------------------------------------------------------------------
   このファイルが LP・応募/お問い合わせフォーム・将来の WordPress 化で
   使い回す変数の唯一の定義元です。値を変えるときは必ずここを直す。
   すべて接頭辞 `--tsk-` に統一（既存 style.css の `--cat-*` 等は
   このファイルへの移行対象。style.css 自体は本ファイルでは編集しない）。

   出典:
   - ブランドカラー（黄/赤/紺/青/緑）・テキスト/背景/罫線・規格アイコン色
     … 支給チラシ（食育動画コンテストA4チラシ）実測値
   - 8カテゴリカラー … チラシ画像（flyer-1.png）から Python(PIL) で
     各カテゴリの丸アイコン＋見出し文字のピクセルを直接サンプリングし
     確定。Figma最終デザイン（figma-overview.png）側の該当カードでも
     ほぼ同値であることを目視・サンプリングの両方でクロスチェック済み。
   - フォント … Noto Sans JP（Google Fonts）に統一。商用モリサワは不使用。
   ========================================================================= */

:root {
  /* ===== 1. ブランドカラー（チラシ実測） ===== */
  --tsk-yellow:      #feef88; /* FVバナー画像の地色に一致（黄） */
  --tsk-red:         #ED1C24; /* メインCTA・タイトル（赤） */
  --tsk-red-deep:    #C8121A; /* 赤の濃色（hover/押下・強調） */
  --tsk-navy:        #2C3F7E; /* ロゴ・見出し補助（紺） */
  --tsk-navy-sub:    #515693; /* 紺の補助トーン（表・サブ見出し） */
  --tsk-blue:        #52A5E0; /* アクセント・吹き出し（青） */
  --tsk-blue-pale:   #C8EBFA; /* FV淡水色・淡背景ボックス */
  --tsk-green:       #33B540; /* 最優秀賞バッジ等（緑） */
  --tsk-purple:      #8986B4; /* 装飾・サブアクセント（紫） */

  /* ===== 2. テキスト・背景・罫線 ===== */
  --tsk-ink:         #231F20; /* 本文・見出しの基本文字色 */
  --tsk-ink-muted:   #5b6168; /* 注釈・補足の薄字 */
  --tsk-bg:          #ffffff; /* 基本背景（白） */
  --tsk-bg-pale:     #f5f7f8; /* セクション交互背景・淡色ボックス */
  --tsk-border:      #e2e6e8; /* 罫線・カード枠 */

  /* ===== 3. 規格アイコンchip専用色 ===== */
  --tsk-spec-bg:     #ECEBF4; /* 淡ラベンダー円 */
  --tsk-spec-ink:    #3D3F6B; /* 円内アイコン線色（濃紺） */

  /* ===== 4. 8カテゴリカラー（チラシPILサンプリング確定値） ===== */
  --tsk-cat-food-security: #AC6F48; /* 食料安全保障（茶） */
  --tsk-cat-safety:        #DA71A1; /* 食の安全（ピンク） */
  --tsk-cat-loss:          #6965A9; /* 食品ロス削減（藍紫） */
  --tsk-cat-tech:          #68B7CA; /* 食の新技術（水色） */
  --tsk-cat-health:        #D86056; /* 健康（赤系） */
  --tsk-cat-diversity:     #AF61A6; /* 食の多様性（紫） */
  --tsk-cat-culture:       #7ABB60; /* 食文化・地産地消（緑） */
  --tsk-cat-enjoy:         #E49F53; /* 食を楽しむ（橙） */

  /* ===== 5. フォント ===== */
  --tsk-font-base: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --tsk-fw-regular: 400;
  --tsk-fw-medium:  500;
  --tsk-fw-bold:    700;
  --tsk-fw-black:   900;

  /* タイポスケール（見出し／本文／注釈） */
  --tsk-fs-h1:    clamp(2.1rem, 6.5vw, 3.6rem);
  --tsk-fs-h2:    clamp(1.4rem, 3.6vw, 2rem);
  --tsk-fs-h3:    clamp(1.15rem, 2.6vw, 1.3rem);
  --tsk-fs-h4:    1.05rem;
  --tsk-fs-lead:  1.02rem;
  --tsk-fs-body:  1rem;
  --tsk-fs-note:  .9rem;
  --tsk-fs-caption: .85rem;

  --tsk-lh-heading: 1.4;
  --tsk-lh-body:    1.85;

  /* ===== 6. スペーシングスケール（4刻み） ===== */
  --tsk-space-4:  4px;
  --tsk-space-8:  8px;
  --tsk-space-12: 12px;
  --tsk-space-16: 16px;
  --tsk-space-24: 24px;
  --tsk-space-32: 32px;
  --tsk-space-48: 48px;
  --tsk-space-64: 64px;

  /* ===== 7. レイアウト（コンテナ・角丸） ===== */
  --tsk-container-max: 750px;   /* Figma準拠：本文コンテナ最大幅 */
  --tsk-radius-card: 12px;
  --tsk-radius-btn:  8px;
  --tsk-radius-pill: 999px;

  /* ===== 8. シャドウ・トランジション ===== */
  --tsk-shadow-btn:  0 3px 10px rgba(237, 28, 36, .28);
  --tsk-shadow-card: 0 2px 10px rgba(35, 31, 32, .06);
  --tsk-shadow-float: 0 12px 24px rgba(35, 31, 32, .20); /* フローティングCTAの浮遊感（PC右下） */
  --tsk-shadow-bar:   0 -6px 18px rgba(35, 31, 32, .10); /* SP下部常駐バーの持ち上がり影 */
  --tsk-transition-fast: .15s ease;
  --tsk-transition-move: .1s ease;

  /* ===== 9. ブレークポイント（参考値・@media には直書きが必要） ===== */
  --tsk-bp-sm: 480px;
  --tsk-bp-md: 720px;
  --tsk-bp-lg: 1000px;
}