/* =========================================================
   Design Tokens — biu THE SALON
   Figmaカンプ確定値が出たら本ファイルを更新すること。
   ========================================================= */

:root {
  /* Color — ベース・ゴールド系 */
  --color-base:        #FFF8EE;  /* 背景ベース（クリーム） */
  --color-base-soft:   #F5EBD8;  /* ベース内のアクセント面 */
  --color-main:        #C9A961;  /* メインゴールド */
  --color-main-deep:   #B8924A;  /* 濃ゴールド */
  --color-main-soft:   #E8D7AA;  /* 淡ゴールド */
  --color-accent:      #B8924A;
  --color-text:        #333333;
  --color-text-sub:    #666666;
  --color-text-mute:   #999999;
  --color-white:       #FFFFFF;
  --color-black:       #222222;
  --color-line:        #E5DCC8;  /* 罫線・境界線 */
  --color-required:    #E94B7D;  /* 必須ラベル（ピンク） */

  /* Typography */
  --font-en:           "Julius Sans One", "Cormorant Garamond", serif;
  --font-en-script:    "Cormorant Garamond", "Julius Sans One", serif;
  --font-jp-serif:     "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-jp-sans:      "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* Font sizes — PC基準 */
  --fs-h1:    48px;
  --fs-h2:    48px;
  --fs-h3:    32px;
  --fs-h4:    25.6px;
  --fs-h5:    20.8px;
  --fs-h6:    18px;
  --fs-body:  16px;
  --fs-cap:   10px;
  --fs-en:    20.8px;
  --fs-en-xl: 80px;
  --fs-btn:   16px;
  --fs-nav:   16px;
  --fs-bread: 14px;

  /* Line heights */
  --lh-heading: 1.3;
  --lh-body:    1.6;

  /* Spacing */
  --sp-min:    20px;
  --sp-same:   40px;   /* 同コンテンツ間 */
  --sp-diff:   100px;  /* 異コンテンツ間 */

  /* Container widths */
  --w-site:    1920px;
  --w-content: 1180px;
  --w-narrow:  960px;

  /* Buttons */
  --btn-h-1: 50px;
  --btn-h-2: 85px;
  --btn-h-3: 100px;

  /* Radius / Shadow / Transition */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.3s;

  /* Header height */
  --header-h-pc: 100px;
  --header-h-sp: 64px;
}

/* SP用のフォントサイズ調整 */
@media (max-width: 767px) {
  :root {
    --fs-h1:    32px;
    --fs-h2:    32px;
    --fs-h3:    24px;
    --fs-h4:    20px;
    --fs-h5:    18px;
    --fs-h6:    16px;
    --fs-en-xl: 48px;
    --sp-same:  24px;
    --sp-diff:  60px;
  }
}