/* ============================================================
   Design tokens — villa-realty.com のトーンを参照した版
   ※色とフォントはスクリーンショット未確認のため推定値。
     実物を見たらこの1ファイルの差し替えで全体が揃う。
   ============================================================ */

:root {
  /* --- 色 -----------------------------------------------
     写真を主役にするため、UIの色数は極限まで削る。
     アクセントは罫と価格まわりだけに使う淡い金。      */
  --ink:       #1A1C1E;   /* ヘッダ・フッタ・濃い帯 */
  --text:      #25272A;
  --text-mute: #8A8C8E;
  --label:     #9A968D;   /* 小ラベル・補助текст */
  --paper:     #FBFBF9;   /* 地 */
  --paper-2:   #FFFFFF;
  --stone:     #F2F0EB;   /* news などの面 */
  --gold:      #C6B48A;   /* view details の下線・小見出し */
  --line:      #E6E4DF;

  /* --- 文字 ---------------------------------------------
     欧文は細く、字間を大きく開ける。和文は明朝を使わず
     ライトのゴシックで軽さを出す。                    */
  --font-latin: "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
  --font-jp:    "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;

  --track-xl: 0.34em;   /* セクションラベル */
  --track-lg: 0.30em;   /* ヒーロー大見出し */
  --track-md: 0.24em;   /* ボタン・view details */
  --track-sm: 0.16em;

  --fs-label:  0.7rem;
  --fs-small:  0.78rem;
  --fs-body:   0.88rem;
  --fs-h3:     1.05rem;
  --fs-h2:     1.5rem;
  --fs-hero:   2.1rem;

  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  --gap-xl: 7rem;

  --wrap: 1240px;
  --pad-x: 1.4rem;
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 3.4rem;
    --fs-h2: 1.9rem;
    --pad-x: 3.5rem;
  }
}