/* =============================================================
   BVC Design Tokens
   -------------------------------------------------------------
   These CSS custom properties are the ONLY source of truth for
   colors / typography / spacing throughout the site.

   WordPress implementation notes:
   - Emit this block dynamically via wp_head using get_theme_mod()
     so the Customizer can rewrite each variable live.
   - Recommended Customizer sections:
       [BVC Colors]     bvc_color_ink / bvc_color_green / ...
       [BVC Typography] bvc_font_jp / bvc_font_en / bvc_fs_hero / ...
       [BVC Spacing]    bvc_section_y / bvc_container_x / ...
   ============================================================= */

:root {
  /* ------- Colors (Customizer: [BVC Colors]) ------- */
  --color-ink:        #1a1c1a;   /* @wp:bvc_color_ink        - 濃墨（メインテキスト & フッター背景） */
  --color-green:      #2f4a3a;   /* @wp:bvc_color_green      - 深緑（アクセント · コーポレートカラー） */
  --color-gold:       #b89968;   /* @wp:bvc_color_gold       - ロゴ・二次アクセント */
  --color-cream:      #f4f1ea;   /* @wp:bvc_color_cream      - 引用帯背景 */
  --color-bg:         #ffffff;   /* @wp:bvc_color_bg         - メイン背景 */
  --color-border:     #ebe6dc;   /* @wp:bvc_color_border     - 罫線 */
  --color-text-body:  #333331;   /* @wp:bvc_color_text_body  - 本文 */
  --color-text-muted: #6b6a63;   /* @wp:bvc_color_text_muted - メタ・キャプション */
  --color-footer-fg:  #dad4c5;   /* @wp:bvc_color_footer_fg  - フッター文字色 */

  /* ------- Typography (Customizer: [BVC Typography]) ------- */
  --font-jp: -apple-system, BlinkMacSystemFont,
             "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
             "Noto Sans JP", "Yu Gothic", "游ゴシック",
             sans-serif;                                       /* @wp:bvc_font_jp */
  --font-en-serif: "Times New Roman", "Times", "Cormorant Garamond",
                   serif;                                       /* @wp:bvc_font_en */

  /* Font sizes (Desktop) — v1.4.0: 全ページで統一感を持たせる階層 */
  --fs-hero-title:     72px;    /* @wp:bvc_fs_hero_title    - サブヒーロー H1 */
  --fs-section-title:  48px;    /* @wp:bvc_fs_section_title - セクション見出し H2（全ページ共通） */
  --fs-h2:             36px;    /* @wp:bvc_fs_h2 - サブセクション */
  --fs-h3:             26px;    /* @wp:bvc_fs_h3 - カード見出しなど */
  --fs-h4:             20px;    /* @wp:bvc_fs_h4 - 小見出し */
  --fs-lead:           18px;    /* リード文（サブヒーロー本文）*/
  --fs-body:           16px;    /* @wp:bvc_fs_body - 本文 */
  --fs-small:          14px;    /* @wp:bvc_fs_small - キャプション */
  --fs-kicker:         13px;    /* @wp:bvc_fs_kicker - 英字ラベル */
  --fs-meta:           12px;    /* @wp:bvc_fs_meta - メタ情報 */

  /* Font scale ratio: --fs-body ÷ 16 (base). Used to scale small texts
     so they follow the body font-size customizer setting. */
  --fs-scale: calc(var(--fs-body) / 16px);

  /* Line heights */
  --lh-hero:  1.25;   /* @wp:bvc_lh_hero  */
  --lh-title: 1.35;   /* @wp:bvc_lh_title */
  --lh-body:  2.0;    /* @wp:bvc_lh_body  */
  --lh-tight: 1.6;    /* @wp:bvc_lh_tight */

  /* Letter spacing */
  --ls-title:  0.02em;
  --ls-kicker: 0.16em;
  --ls-meta:   0.16em;

  /* ------- Spacing / Layout (Customizer: [BVC Spacing]) ------- */
  --container-x: 56px;      /* @wp:bvc_container_x - 左右パディング */
  --section-y:   96px;      /* @wp:bvc_section_y   - セクション上下 (v1.4.1: 128→96) */
  --meta-col:    240px;     /* @wp:bvc_meta_col    - 左メタ列幅 */
  --gap-2col:    56px;      /* @wp:bvc_gap_2col    - 2カラムgap */
  --radius:      0px;       /* 基本フラット */
  --radius-pill: 999px;

  /* ------- Motion ------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast: 240ms;
  --dur-med:  600ms;
  --dur-slow: 1200ms;

  /* Z-index scale */
  --z-nav:     50;
  --z-overlay: 100;
  --z-modal:   200;
}

/* ------- Tablet: 768–1199px ------- */
@media (max-width: 1199px) {
  :root {
    --container-x:      32px;
    --section-y:        96px;
    --meta-col:         180px;
    --gap-2col:         40px;
    --fs-hero-title:    52px;
    --fs-section-title: 36px;
    --fs-h2:            28px;
    --fs-h3:            22px;
    --fs-lead:          17px;
    --fs-body:          16px;
  }
}

/* ------- Mobile: ≤767px ------- */
@media (max-width: 767px) {
  :root {
    --container-x:      20px;
    --section-y:        72px;
    --meta-col:         100%;   /* 1カラム化 */
    --gap-2col:         24px;
    --fs-hero-title:    36px;
    --fs-section-title: 26px;
    --fs-h2:            22px;
    --fs-h3:            20px;
    --fs-lead:          16px;
    --fs-body:          15px;
    --lh-body:          1.9;
  }
}