/* ===========================================================
   tokens.css — 色・文字・余白の定義
   Figmaに登録されているスタイルと1対1で対応しています。
   値を変えるときは、必ずFigma側も合わせてください。
   =========================================================== */

:root {

  /* --- 色 ------------------------------------------------ */
  --c-text:        #543720;  /* 本文・見出し（こげ茶） */
  --c-text-sub:    #A38F74;  /* 副見出し・補足（うす茶） */
  --c-green:       #9FAF64;  /* 緑（ラベル・サブボタン） */
  --c-orange:      #FFA263;  /* オレンジ（主ボタン） */
  --c-yellow:      #FED384;  /* 黄（見出しの下線） */
  --c-bg:          #FFFFFF;  /* 基本の背景 */
  --c-bg-beige:    #F7F5F0;  /* ベージュの背景 */
  --c-placeholder: #D9D9D9;  /* 画像が入る前の仮の面 */

  /* --- 書体 ---------------------------------------------- */
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* --- 文字サイズ（PC） ---------------------------------- */
  --fs-catch:   48px;  /* キャッチコピー */
  --fs-h1:      32px;  /* 見出し／大 */
  --fs-h2:      24px;  /* 見出し／中 */
  --fs-h3:      20px;  /* 見出し／小 */
  --fs-lead:    20px;  /* リード文 */
  --fs-body:    16px;  /* 本文 */
  --fs-note:    14px;  /* 注釈 */

  /* --- 行間 ---------------------------------------------- */
  --lh-tight: 1.5;
  --lh-base:  1.8;
  --lh-loose: 2.0;

  /* --- 余白スケール -------------------------------------- */
  --s-4:    4px;
  --s-8:    8px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-40:  40px;
  --s-48:  48px;
  --s-64:  64px;
  --s-80:  80px;
  --s-96:  96px;
  --s-120: 120px;
  --s-160: 160px;

  /* --- レイアウト ---------------------------------------- */
  --w-frame:  1440px;  /* デザインの基準幅 */
  --w-wide:   1120px;  /* ワイド（写真など） */
  --w-base:    928px;  /* 標準（文章など） */
  --w-narrow:  736px;  /* 読ませる文章 */
  --gutter:     32px;  /* 要素と要素の間 */
  --margin-x:  160px;  /* 左右の余白（PC） */

  /* --- 比例の単位 ---------------------------------------- */
  /* デザイン（1440幅）上の 1px。画面が1440より狭いと、同じ比率で小さくなる。
     使い方：calc(189 * var(--u)) → 1440幅で189px、720幅で94.5px */
  --u: min(1px, calc(100vw / 1440));

  /* --- 角丸 ---------------------------------------------- */
  --r-sm:   8px;
  --r-md:  16px;
  --r-lg:  40px;
  --r-pill: 999px;
}

/* スマホ。幅の指定だけ差し替えます */
@media (max-width: 767px) {
  :root {
    --fs-catch: 28px;
    --fs-h1:    24px;
    --fs-h2:    20px;
    --fs-h3:    17px;
    --fs-lead:  17px;
    --fs-body:  15px;

    --margin-x: 16px;
    --gutter:   16px;
  }
}