/* =====================================================================
   cloche  デザイントークン  tokens.css
   全ページ共通の色・書体・余白・装飾の基準値。
   色や書体を変えたいときは、原則ここだけ直せば全ページに反映される。
   ===================================================================== */

:root{
  /* ---- 色：ベース ---- */
  --c-ink:        #3D3933;   /* 基本の文字色 */
  --c-ink-soft:   #5b4f44;   /* 本文のやや淡い文字 */
  --c-muted:      #8a7d6b;   /* 補助テキスト・キャプション */
  --c-bg:         #ffffff;   /* 基本背景（白） */

  /* ---- 色：背景のリズム（セクション交互） ---- */
  --c-bg-warm:    #FBF9F5;   /* cloche とは（ごく淡い温白） */
  --c-bg-linen:   #F4F2ED;   /* 衣装（淡いグレージュ） */
  --c-bg-cream:   #FAF6EE;   /* お知らせ帯・MLT帯（クリーム） */
  --c-bg-blush:   #FAF5F2;   /* 予備（淡いブラッシュ） */

  /* ---- 色：ゴールド系（アクセント） ---- */
  --c-gold:       #ae8842;   /* 罫線・枠の標準ゴールド */
  --c-gold-deep:  #866226;   /* 見出し・ラベルの濃いゴールド */
  --c-gold-light: #c6a05c;   /* 額装グラデの明るいゴールド */
  --c-gold-pale:  #e9cfa6;   /* 額装グラデの最も明るい側 */

  /* ---- 色：差し色 ---- */
  --c-blush:      #ce9a92;   /* お知らせのドット等、淡い赤み */
  --c-cap-cream:  #f3e7d2;   /* 写真上キャプションの文字色 */

  /* ---- 書体 ---- */
  --f-serif-en:   "Cormorant", serif;          /* 欧文見出し（明朝セリフ） */
  --f-serif-sc:   "Cormorant SC", serif;        /* 欧文スモールキャップス */
  --f-serif-jp:   "Shippori Mincho", serif;     /* 和文（しっぽり明朝） */
  --f-sans:       "Jost", sans-serif;           /* ラベル・英字サンセリフ */

  /* ---- 写真の質感（セピア寄せ）---- */
  --img-filter:        sepia(.22) contrast(1.03) brightness(1.02) saturate(.92);
  --img-filter-hero:   sepia(.20) contrast(1.03) brightness(.90) saturate(.92);
  --img-filter-map:    sepia(.35) contrast(1.04) brightness(1.00) saturate(.70);

  /* ---- 罫線・枠 ---- */
  --line-gold:    1px solid rgba(174,136,66,.40);
  --line-soft:    1px solid #efe2cc;
  --ring-gold:    inset 0 0 0 1px rgba(191,160,99,.45);

  /* ---- 影 ---- */
  --shadow-card:  0 16px 30px rgba(150,118,62,.18);
  --shadow-soft:  0 18px 40px rgba(150,118,62,.16);
  --shadow-deep:  0 22px 44px rgba(150,118,62,.22);

  /* ---- 余白スケール（セクション内側パディング等）---- */
  --pad-sec-y:    clamp(40px, 6vw, 80px);
  --pad-sec-x:    clamp(18px, 4vw, 72px);
  --gap-grid:     clamp(14px, 2vw, 26px);

  /* ---- レイアウト幅 ---- */
  --w-wide:       1180px;   /* 大きめセクションの最大幅 */
  --w-mid:        1040px;   /* 標準セクションの最大幅 */
  --w-narrow:     920px;    /* テキスト主体の最大幅 */

  /* ---- 角丸 ---- */
  --r-sm:         3px;
  --r-md:         5px;
  --r-lg:         10px;

  /* ---- 字間（letter-spacing）---- */
  --ls-label:     .42em;    /* 英字ラベル（Jost大文字） */
  --ls-jp:        .30em;    /* 和文見出しの広め字間 */
  --ls-logo:      .24em;    /* ロゴ cloche の字間 */
}

/* リセット最小限（各ページのCSSより前に読み込む想定） */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-serif-jp);
  background:var(--c-bg);
  color:var(--c-ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* よく使う共通パーツ */
.ey{font-family:var(--f-sans);font-weight:300;letter-spacing:var(--ls-label);text-transform:uppercase;font-size:11px;color:var(--c-gold-deep)}
.secTitle{font-family:var(--f-serif-en);font-weight:500;line-height:1;color:var(--c-ink)}
.secTitle .jp{display:block;font-family:var(--f-serif-jp);font-weight:600;letter-spacing:var(--ls-jp);color:var(--c-gold-deep);margin-top:12px}
.ph{position:relative;overflow:hidden;background:#ece3d3}
.ph img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}