:root {
  /* ========== カラー: ベース ========== */
  --kc-color-bg-base: #FDFBF7;         /* メイン背景(温白色) */
  --kc-color-bg-subtle: #F5EDE5;       /* セクション区切り(ベージュ) */
  --kc-color-bg-card: #FFFFFF;         /* カード背景(純白) */

  /* ========== カラー: アクセント(ピンク) ========== */
  --kc-color-pink-50:  #FBEAF0;        /* 最も薄い背景塗り */
  --kc-color-pink-100: #F4C0D1;        /* バッジ・タグ背景 */
  --kc-color-pink-400: #D4537E;        /* ボタン基本色 */
  --kc-color-pink-600: #993556;        /* 見出し・強調・リンク */

  /* ========== カラー: テキスト ========== */
  --kc-color-text-primary: #3A2519;    /* 本文(深いブラウン) */
  --kc-color-text-secondary: #6B5448;  /* 補足テキスト(ミディアムブラウン) */
  --kc-color-text-accent: #993556;     /* 強調・リンク(深いピンク) */
  --kc-color-text-inverse: #FFFFFF;    /* ダーク背景上のテキスト */

  /* ========== カラー: ボーダー ========== */
  --kc-color-border-subtle: rgba(58, 37, 25, 0.12);  /* 薄い罫線 */
  --kc-color-border-default: rgba(58, 37, 25, 0.2);  /* 通常の罫線 */
  --kc-color-border-strong: rgba(58, 37, 25, 0.35);  /* 強い罫線 */

  /* ========== カラー: 状態 ========== */
  --kc-color-state-error: #A32D2D;     /* エラー(フォームバリデーション) */
  --kc-color-state-success: #3B6D11;   /* 成功(フォーム送信完了) */

  /* ========== タイポグラフィ: フォントファミリー(Adobe Fonts) ========== */
  /* design-spec §12.3: Adobe Fonts kit "bko7cdz" を使用。
   * Typekit 読込失敗時は OS 標準フォントへフォールバックする。 */
  --kc-font-serif: "hiragino-mincho-pron", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "MS P明朝", serif;
  --kc-font-sans: "fot-tsukubrdgothic-std", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "游ゴシック", "Meiryo", "メイリオ", sans-serif;

  /* ========== タイポグラフィ: サイズ(改善4: 高齢者配慮で 12.5% 増) ========== */
  --kc-font-size-xs: 0.8125rem;        /* 13px 相当 */
  --kc-font-size-sm: 0.9375rem;        /* 15px 相当 */
  --kc-font-size-base: 1.125rem;       /* 18px */
  --kc-font-size-lg: 1.25rem;          /* 20px */
  --kc-font-size-xl: 1.375rem;         /* 22px */
  --kc-font-size-2xl: 1.6875rem;       /* 27px */
  --kc-font-size-3xl: 2.125rem;        /* 34px */
  --kc-font-size-4xl: 2.5rem;          /* 40px */
  --kc-font-size-5xl: 3.375rem;        /* 54px */

  /* ========== タイポグラフィ: 行間 ==========
   * design-spec §13.9 v3: 日本語の余韻を作るため base/expanded を拡張 */
  --kc-line-height-tight: 1.3;         /* 見出し用 */
  --kc-line-height-base: 1.85;         /* 本文用(carekura 風の余白) */
  --kc-line-height-loose: 2.0;         /* ゆったりした読み物用 */

  /* ========== タイポグラフィ: ウェイト ========== */
  --kc-font-weight-regular: 400;
  --kc-font-weight-medium: 500;
  --kc-font-weight-bold: 700;

  /* ========== 余白(スペーシング) ========== */
  --kc-space-xs: 0.25rem;              /* 4px */
  --kc-space-sm: 0.5rem;               /* 8px */
  --kc-space-md: 1rem;                 /* 16px */
  --kc-space-lg: 1.5rem;               /* 24px */
  --kc-space-xl: 2rem;                 /* 32px */
  --kc-space-2xl: 3rem;                /* 48px */
  --kc-space-3xl: 4rem;                /* 64px */
  --kc-space-4xl: 6rem;                /* 96px */

  /* ========== レイアウト: コンテナ幅 ========== */
  --kc-container-narrow: 720px;        /* 記事本文など */
  --kc-container-default: 1100px;      /* 通常のセクション */
  --kc-container-wide: 1280px;         /* ヒーロー・全幅コンテンツ */

  /* ========== レイアウト: 角丸 ========== */
  --kc-radius-sm: 4px;                 /* 小さな要素(バッジ、タグ) */
  --kc-radius-md: 8px;                 /* 通常の要素(ボタン、カード) */
  --kc-radius-lg: 16px;                /* 大きなカード */
  --kc-radius-full: 9999px;            /* 円形・ピル形 */

  /* ========== レイアウト: 影(控えめに使用) ========== */
  --kc-shadow-subtle: 0 1px 3px rgba(58, 37, 25, 0.06);
  --kc-shadow-card: 0 2px 8px rgba(58, 37, 25, 0.08);

  /* ========== トランジション ========== */
  --kc-transition-fast: 150ms ease;
  --kc-transition-base: 250ms ease;
  --kc-transition-slow: 400ms ease;

  /* ========== ブレークポイント(メディアクエリ内で直接記述、ここでは定義のみ) ========== */
  /* モバイル: 〜767px */
  /* タブレット: 768px〜1023px */
  /* デスクトップ: 1024px〜 */

  /* =========================================================
   * Warm Elegance 拡張トークン(design-spec.md §2.1)
   * ========================================================= */

  /* ===== カラー拡張 ===== */
  --kc-color-cream: #FBF7F1;
  --kc-color-warm-beige: #EDE2D3;
  --kc-color-blush: #F9E6EC;
  --kc-color-rose-dust: #E8C8D1;
  --kc-color-shadow-warm: rgba(58, 37, 25, 0.05);
  --kc-color-shadow-pink: rgba(212, 83, 126, 0.08);

  /* ===== ディスプレイサイズ ===== */
  --kc-font-size-display-sm: 3.5rem;
  --kc-font-size-display-md: 4.5rem;
  --kc-font-size-display-lg: 6rem;
  --kc-font-size-display-xl: 7.5rem;

  /* ===== 文字間隔 ===== */
  --kc-letter-spacing-tight: -0.02em;
  --kc-letter-spacing-normal: 0;
  --kc-letter-spacing-wide: 0.1em;
  --kc-letter-spacing-wider: 0.2em;

  /* ===== 行間拡張(design-spec §13.9 v3 で expanded を 1.9 → 2.1) ===== */
  --kc-line-height-display: 1.15;
  --kc-line-height-expanded: 2.1;

  /* ===== 余白拡張 ===== */
  --kc-space-5xl: 8rem;
  --kc-space-6xl: 10rem;
  --kc-space-7xl: 12rem;

  /* ===== シャドウ拡張 ===== */
  --kc-shadow-soft: 0 4px 24px rgba(58, 37, 25, 0.06);
  --kc-shadow-elegant: 0 12px 40px rgba(58, 37, 25, 0.08);
  --kc-shadow-dreamy: 0 20px 60px rgba(212, 83, 126, 0.12);

  /* ===== グラデーション ===== */
  --kc-gradient-warm: linear-gradient(180deg, #FDFBF7 0%, #F9E6EC 100%);
  --kc-gradient-blush: linear-gradient(135deg, #FBF7F1 0%, #F5EDE5 50%, #F9E6EC 100%);
  --kc-gradient-sunset: linear-gradient(180deg, #FDFBF7 0%, #F5EDE5 40%, #EDE2D3 100%);

  /* ===== イージング ===== */
  --kc-ease-quiet: cubic-bezier(0.25, 0.1, 0.25, 1);
  --kc-ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --kc-ease-luxe: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== トランジション拡張 ===== */
  --kc-transition-reveal: 900ms cubic-bezier(0.22, 1, 0.36, 1);
  --kc-transition-parallax: 0ms linear;

  /* ===== Adobe Fonts ウェイト(design-spec §12.7) =====
   * 明朝体: 大見出しは Light、小見出しは SemiBold
   * 丸ゴシ: 本文は Regular、強調は Bold */
  --kc-weight-serif-light: 300;
  --kc-weight-serif-bold: 600;
  --kc-weight-sans-regular: 400;
  --kc-weight-sans-bold: 700;
}