/* ============================================================
   tokens.css — デザイントークン（唯一の真実のソース）
   テーマ: 「ぬくもりブラウン」 warm / soft / hand-made
   ここの値を変えるとサイト全体の見た目が変わります。
   新しい色・サイズを足すときも、まずここに変数で定義すること。
   ============================================================ */

:root{
  /* -------- Color: 背景 / 面 -------- */
  --bg:        #F7F1E8;  /* ページ全体の背景（ベージュ） */
  --bg-warm:   #F1E6D6;  /* 一段濃い背景。Services/Contactの面に使用 */
  --surface:   #FFFFFF;  /* カード・フォームなど前面の面 */
  --round:     #FBF4EA;  /* 入力欄・タグなど淡い塗り */

  /* -------- Color: 文字（インク） -------- */
  --ink:       #3B302A;  /* 主要テキスト・見出し */
  --ink-soft:  #7A6A5C;  /* 本文・補足テキスト */
  --ink-faint: #A99A8A;  /* キャプション・年号などごく薄い文字 */

  /* -------- Color: アクセント（ブラウン/テラコッタ） -------- */
  --accent:      #C98343; /* 主アクセント。CTA・リンク・強調 */
  --accent-2:    #B86A4B; /* hover時の濃いアクセント */
  --accent-soft: #F3DEC4; /* アクセントの淡い背景（バッジ・タグ・下線） */

  /* -------- Color: カテゴリ補助色 -------- */
  /* サービスカード等のアイコン背景に使う差し色。warm基調を崩さない範囲で */
  --sage:      #E3EAD9;   /* セージグリーン背景 */
  --sage-ink:  #6E8254;   /* セージの文字色 */
  --rose:      #F3DDD6;   /* ローズ背景 */

  /* -------- Color: 罫線 -------- */
  --line:      #EADBC7;   /* 境界線・カード枠 */

  /* -------- プレースホルダー画像のストライプ -------- */
  /* 実画像に差し替えるまでの仮ビジュアル（45度ストライプ） */
  --ph-a:      #F1E3CE;
  --ph-b:      #EAD9BE;
  --thumb-grad: repeating-linear-gradient(45deg, var(--ph-a) 0 12px, var(--ph-b) 12px 24px);

  /* -------- Typography: フォントファミリー -------- */
  --maru: "Zen Maru Gothic", sans-serif;     /* 見出し・ブランド・装飾的な箇所（丸ゴシック） */
  --sans: "Zen Kaku Gothic New", sans-serif; /* 本文・UI（角ゴシック） */

  /* -------- Typography: ウェイト -------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  900;

  /* -------- Typography: サイズスケール（必要に応じて利用） -------- */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-base:15px;
  --fs-lg:  16px;
  --fs-xl:  22px;
  --fs-2xl: 30px;
  /* 見出しは可変。clamp() を直接使用:
     h1 → clamp(36px,5.6vw,68px) / h2 → clamp(28px,3.8vw,44px) */

  /* -------- Spacing: 余白スケール -------- */
  --sp-1:  6px;
  --sp-2:  12px;
  --sp-3:  18px;
  --sp-4:  26px;
  --sp-5:  34px;
  --sp-6:  48px;
  --sp-section: 88px; /* セクション上下の標準パディング */

  /* -------- Radius: 角丸スケール -------- */
  --r-sm:   12px;  /* 入力欄・小チップ */
  --r-md:   16px;  /* サムネイル・浮きチップ */
  --r:      26px;  /* カード標準（基準値） */
  --r-lg:   36px;  /* Contactカードなど大きい面 */
  --r-pill: 999px; /* 完全な丸（ピル型ボタン・ナビ） */

  /* -------- Elevation: 影 -------- */
  --shadow: 0 24px 50px -30px rgba(120,80,40,.45);       /* 標準の浮き影 */
  --shadow-sm: 0 12px 30px -24px rgba(120,80,40,.6);     /* ナビ等の控えめな影 */

  /* -------- Motion: トランジション -------- */
  --t-fast: .2s;
  --t-base: .25s;

  /* -------- Layout -------- */
  --maxw: 1180px;   /* コンテンツ最大幅 */
  --gutter: 32px;   /* 左右の余白（.wrap のパディング） */

  /* -------- z-index -------- */
  --z-header: 50;
}