/* =============================================
   variables.css — デザイントークン（CSS変数）
   ============================================= */

:root {

  /* ===== カラー ===== */

  /* テキスト */
  --color-text:         #333333;
  --color-text-dark:    #000000;
  --color-text-white:   #ffffff;

  /* 背景 */
  --color-bg:           #ffffff;
  --color-bg-warm:      #faf7f2;
  --color-bg-dark:      #000000;
  --color-bg-footer:    #fff8f8;
  --color-footer-top:   #e3dff9;

  /* アクセント */
  --color-accent:       #c46a3c;
  --color-accent-light:   rgba(196, 106, 60, 0.12);
  --color-accent-shadow:  rgba(196, 106, 60, 0.35);

  /* その他 */
  --color-overlay:         rgba(111, 100, 90, 0.5);
  --color-overlay-dark:    rgba(111, 100, 90, 0.7);
  --color-overlay-white:   rgba(255, 255, 255, 0.6);
  --color-overlay-white-sm: rgba(255, 255, 255, 0.3);
  --color-dot:             #d9d9d9;
  --color-feature-bg:      rgba(217, 217, 217, 0.7);
  --color-border:          #000000;
  --color-shadow-subtle:   rgba(0, 0, 0, 0.08);
  --color-shadow-dark:     rgba(0, 0, 0, 0.25);
  --color-text-ghost:      rgba(0, 0, 0, 0.3);


  /* ===== フォント ===== */

  --font-family-base:    'Zen Kaku Gothic New', sans-serif;
  --font-family-en:      'Inter', sans-serif;
  --font-family-display: 'Bayon', sans-serif;

  /* サイズ（Mobile基準） */
  --font-size-display: 48px;
  --font-size-h1:      24px;
  --font-size-h2:      22px;
  --font-size-h3:      20px;
  --font-size-h4:      18px;
  --font-size-body-lg: 16px;
  --font-size-body:    15px;
  --font-size-body-sm: 14px;
  --font-size-caption: 13px;
  --font-size-tiny:    11px;

  /* ウェイト */
  --font-weight-black:    900;
  --font-weight-bold:     700;
  --font-weight-semibold: 600;
  --font-weight-regular:  400;


  /* ===== スペーシング ===== */

  --section-padding-v: 32px;
  --section-padding-h: 20px;
  --gap-section:       60px;
  --gap-content:       40px;


  /* ===== レイアウト ===== */

  --container-max:    1200px;
  --border-radius-sm: 4px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;

}


/* ===== Tablet（600px以上）===== */
@media (min-width: 600px) {
  :root {
    --font-size-display: 64px;
    --font-size-h1:      32px;
    --font-size-h2:      28px;
    --font-size-h3:      22px;

    --section-padding-v: 50px;
    --section-padding-h: 40px;
  }
}


/* ===== Desktop（1024px以上）===== */
@media (min-width: 1024px) {
  :root {
    --font-size-display: 96px;
    --font-size-h1:      48px;
    --font-size-h2:      36px;
    --font-size-h3:      26px;
    --font-size-body-lg: 20px;
    --font-size-body:    16px;

    --section-padding-v: 80px;
    --section-padding-h: 60px;
  }
}