:root {
  /* ── 生成り系 / Washi-paper background tones ─── */
  --c-bg:       #F4EEE2;   /* 白茶 (shirocya) — warm washi main bg */
  --c-bg-alt:   #FBF8F0;   /* 生成り (kimonari) raw silk — lighter sections */
  --c-bg-panel: #EBE2CE;   /* 薄茶 pale tea — deeper panel */

  /* ── ダーク基調色（ボタン・ダークボタン・フッター・見出し共通。ここ1箇所で全体が変わります） ─── */
  /* 「4つの理由」バッジと同系統のセージグリーン（文字が読める濃さに調整） */
  --c-dark:          #5A6A4C;
  --c-text:          #423E39;
  --c-text-muted:    #736E66;
  --c-text-subtle:   #C9C3BC;

  /* On-dark surface */
  --c-on-dark:        #FBF8F0;
  --c-on-dark-muted:  #C9C3BC;
  --c-on-dark-subtle: rgba(218, 201, 161, 0.55);

  /* ── 金色系 / Gold tones ──────────────────── */
  --c-gold:       #B89A5B;   /* 金箔 kinpaku */
  --c-gold-dark:  #9C7F45;
  --c-gold-light: #DAC9A1;
  --c-gold-pale:  rgba(218, 201, 161, 0.25);

  /* ── 紅色 / Beni crimson accent ───────────── */
  --c-beni:      #B0484F;
  --c-beni-pale: #F4D9DB;

  /* ── Borders ──────────────────────────────── */
  --c-border:       rgba(42, 39, 35, 0.12);
  --c-border-light: rgba(42, 39, 35, 0.10);
  --c-border-gold:  rgba(184, 154, 91, 0.35);
  --c-border-dark:  rgba(218, 201, 161, 0.25); /* on dark bg */

  /* ── Typography ───────────────────────────── */
  --f-serif:  'Noto Serif JP', 'Times New Roman', Georgia, serif;
  --f-sans:   'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --f-accent: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;

  /* Size scale */
  --fs-xs:   0.75rem;     /* 12px */
  --fs-sm:   0.8125rem;   /* 13px */
  --fs-base: 0.875rem;    /* 14px */
  --fs-md:   0.9375rem;   /* 15px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.1875rem;   /* 19px */
  --fs-2xl:  1.375rem;    /* 22px */
  --fs-3xl:  1.75rem;     /* 28px */
  --fs-4xl:  2rem;        /* 32px */
  --fs-5xl:  2.75rem;     /* 44px */
  --fs-hero: 4rem;        /* 64px */

  /* Line heights */
  --lh-tight:  1.4;
  --lh-snug:   1.6;
  --lh-normal: 2.05;
  --lh-loose:  2.15;

  /* Letter spacing */
  --ls-base:    0.04em;
  --ls-wide:    0.08em;
  --ls-wider:   0.16em;
  --ls-widest:  0.28em;
  --ls-accent:  0.34em;  /* Cormorant Garamond logo */
  --ls-step:    0.20em;  /* STEP 01, 02... labels */

  /* ── Spacing ──────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Section padding */
  --section-gap:    5rem;    /* 80px（余白を詰めて間延びを解消） */
  --section-gap-sm: 4.25rem;
  --page-side:      3rem;    /* 48px */

  /* ── Border radius ────────────────────────── */
  --r-sm:   3px;
  --r-md:   4px;
  --r-full: 9999px;

  /* ── Shadows ──────────────────────────────── */
  --shadow-sm:   0 2px 12px rgba(42, 39, 35, 0.07);
  --shadow-md:   0 4px 24px rgba(42, 39, 35, 0.11);
  --shadow-beni: 0 12px 30px rgba(176, 72, 79, 0.25);

  /* ── Layout ───────────────────────────────── */
  --container-max:    1200px;
  --container-narrow: 800px;
  --header-height:    72px;

  /* ── Z-index ──────────────────────────────── */
  --z-header:  50;
  --z-overlay: 100;
  --z-modal:   200;

  /* ── Transitions ──────────────────────────── */
  --tr-fast: 150ms ease;
  --tr-base: 250ms ease;
  --tr-slow: 400ms ease;

  /* ── Compatibility aliases ─────────────────── */
  --c-sumi:         var(--c-dark);
  --c-white:        #ffffff;
  --c-bg-warm:      var(--c-bg-alt);
  --c-washi:        var(--c-bg-alt);   /* lighter washi tone for card surfaces */
  --c-text-light:   var(--c-text-muted);
  --c-gold-ultra:   rgba(218, 201, 161, 0.10);
  --r-xl:           var(--r-md);
  --r-lg:           var(--r-md);
  --fw-bold:        var(--fw-semi);
  --shadow-xs:      0 1px 6px rgba(42, 39, 35, 0.04);
  --container-wide: 1400px;
}