/* ============================================================
   variables.css — デザイントークン定義
   ============================================================ */

:root {

  /* --------------------------------------------------
     カラーパレット
     -------------------------------------------------- */
  --color-bg:       #F5F0E8; /* 生成り（ページ背景） */
  --color-text:     #2B1F1A; /* 焙煎色（本文） */
  --color-accent:   #6B4423; /* 中煎り（アクセント） */
  --color-sub:      #7A8471; /* オリーブ（サブカラー） */
  --color-line:     #D4C9B8; /* 罫線 */
  --color-white:    #FFFCF7; /* オフホワイト */

  /* 派生カラー */
  --color-accent-light:  #8B5E3C;
  --color-accent-dark:   #4A2E14;
  --color-bg-dark:       #EDE6D6;
  --color-text-muted:    #6E5A52;
  --color-overlay:       rgba(43, 31, 26, 0.55);


  /* --------------------------------------------------
     フォントファミリー
     -------------------------------------------------- */
  --font-mincho:    "Shippori Mincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  --font-sans:      "Noto Sans JP", "ヒラギノ角ゴ ProN", sans-serif;
  --font-roman:     "Cormorant Garamond", "Georgia", serif;


  /* --------------------------------------------------
     フォントサイズ (rem / 1rem=10px基準)
     -------------------------------------------------- */
  --fs-xs:    1.1rem;
  --fs-sm:    1.3rem;
  --fs-base:  1.6rem;
  --fs-md:    1.8rem;
  --fs-lg:    2.4rem;
  --fs-xl:    3.2rem;
  --fs-2xl:   4.0rem;
  --fs-3xl:   5.6rem;
  --fs-4xl:   7.2rem;


  /* --------------------------------------------------
     フォントウェイト
     -------------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;


  /* --------------------------------------------------
     行間・字間
     -------------------------------------------------- */
  --lh-tight:   1.3;
  --lh-base:    1.75;
  --lh-relaxed: 2.0;
  --lh-loose:   2.4;

  --ls-tight:   -0.02em;
  --ls-base:    0.02em;
  --ls-wide:    0.1em;
  --ls-wider:   0.2em;
  --ls-widest:  0.3em;


  /* --------------------------------------------------
     スペーシング
     -------------------------------------------------- */
  --space-1:   0.4rem;
  --space-2:   0.8rem;
  --space-3:   1.2rem;
  --space-4:   1.6rem;
  --space-5:   2.0rem;
  --space-6:   2.4rem;
  --space-8:   3.2rem;
  --space-10:  4.0rem;
  --space-12:  4.8rem;
  --space-16:  6.4rem;
  --space-20:  8.0rem;
  --space-24:  9.6rem;
  --space-32: 12.8rem;
  --space-40: 16.0rem;


  /* --------------------------------------------------
     コンテナ幅
     -------------------------------------------------- */
  --container-sm:   640px;
  --container-md:   900px;
  --container-lg:  1100px;
  --container-xl:  1280px;
  --container-pad:   clamp(2.4rem, 5vw, 6.4rem);


  /* --------------------------------------------------
     ボーダー・角丸
     -------------------------------------------------- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-line);
  --border-medium: 2px solid var(--color-line);


  /* --------------------------------------------------
     シャドウ
     -------------------------------------------------- */
  --shadow-sm:  0 1px 4px rgba(43, 31, 26, 0.08);
  --shadow-md:  0 4px 16px rgba(43, 31, 26, 0.12);
  --shadow-lg:  0 8px 32px rgba(43, 31, 26, 0.16);


  /* --------------------------------------------------
     トランジション
     -------------------------------------------------- */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;


  /* --------------------------------------------------
     ヘッダー高さ（JSなし追従用）
     -------------------------------------------------- */
  --header-h:        8.0rem;
  --header-h-shrunk: 5.6rem;


  /* --------------------------------------------------
     z-index 管理
     -------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  300;
  --z-toast:   400;

}


/* --------------------------------------------------
   ブレークポイント補足 (メディアクエリ参照値)
   768px: タブレット境界
   480px: スマートフォン境界
   -------------------------------------------------- */