/* ===== カラー・フォント・変数定義 ===== */

:root {
  /* ---------- カラー ---------- */
  --color-primary:        #63AD52;   /* メインの緑（明） */
  --color-primary-dark:   #5F8058;   /* メインの緑（暗） */
  --color-primary-light:  #EAF4E3;   /* 淡い緑背景 */
  --color-accent-yellow:  #FDF150;   /* CTA黄色 */
  --color-accent-orange:  #D97B3D;   /* アクセントオレンジ */

  --color-text:           #5C3D2E;   /* 本文 ダークブラウン */
  --color-text-sub:       #8A7566;   /* サブ・注釈 */
  --color-text-muted:     #A89A8D;   /* さらに薄いサブ */

  --color-bg-base:        #F5EDE3;   /* ベース背景（暫定単色） */
  --color-bg-white:       #FFFFFF;
  --color-bg-soft:        #F0EBE5;   /* 一般的な支援カード背景 */
  --color-bg-cream:       #FAF5EC;   /* クリーム系 */
  --color-bg-cream2:       #faf6f1;   /* クリーム系2 */

  --color-border:         #E5DCCE;
  --color-shadow:         rgba(92, 61, 46, 0.08);
  --color-shadow-strong:  rgba(92, 61, 46, 0.16);

  /* ---------- フォント ---------- */
  --font-base:
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    "Noto Sans JP",
    sans-serif;

  --font-display:
    "Kiwi Maru",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;

  /* ---------- レイアウト ---------- */
  --header-height:        72px;
  --page-nav-height:      56px;

  --radius-sm:   8px;
  --radius-md:   20px;
  --radius-lg:   28px;
  --radius-pill: 50px;

  --shadow-sm: 0 2px 8px var(--color-shadow);
  --shadow-md: 0 4px 16px var(--color-shadow);
  --shadow-lg: 0 8px 28px var(--color-shadow-strong);

  --container-max: 1120px;
  --container-narrow: 720px;

  /* ---------- フォントサイズ ---------- */
  --fz-3xl:  42px;   /* ヒーローキャッチコピー */
  --fz-2xl:  36px;   /* 料金金額等 */
  --fz-xl:   28px;   /* セクション和文タイトル（h2） */
  --fz-lg:   22px;   /* セクション内の中見出し（h3相当） */
  --fz-md:   18px;   /* カード内タイトル・リード文 */
  --fz-base: 15px;   /* 本文 */
  --fz-sm:   13px;   /* 注釈・補足・タグ・英字ラベル */
  --fz-xs:   11px;   /* コピーライト等 */

  /* ---------- スペーシング ---------- */
  --space-3xl: 120px;  /* セクション間の大きな余白 */
  --space-2xl:  80px;  /* セクション padding-top/bottom（--section-py相当） */
  --space-xl:   56px;  /* セクションタイトル下〜コンテンツ */
  --space-lg:   40px;  /* ブロック間 */
  --space-md:   24px;  /* カード間・要素グループ間 */
  --space-sm:   16px;  /* 要素内の小さな余白 */
  --space-xs:    8px;  /* テキスト間・微調整 */

  /* ---------- ブレークポイント用 ---------- */
  /* 1280 / 1024 / 768 */
}