/**
 * kawaremake Design Tokens
 * Phase 1: ブランド・UIリニューアル
 *
 * このファイルは kawaremake サイト全体で使用する
 * カラー・タイポグラフィ・スペーシング・罫線などの
 * デザイントークン(共通変数)を定義する。
 *
 * 変更履歴:
 *   2026/4 初版作成 (Phase 1)
 *
 * @package kawaremake
 */

:root {
  /* ============================================
     Color — モノトーンパレット (9色)
     ============================================ */

  /* 背景 */
  --km-bg-primary:    #FAF9F6; /* オフホワイト(生成り) */
  --km-bg-secondary:  #F4F2EC; /* 淡いグレージュ */
  --km-bg-dark:       #1A1A1A; /* ダーク背景 */

  /* 文字 */
  --km-text-primary:    #2C2826; /* ダークグレー */
  --km-text-secondary:  #6B6760; /* ミディアムグレー */
  --km-text-tertiary:   #888780; /* ライトグレー */

  /* 罫線 */
  --km-border-light: #E8E5DE; /* 淡いグレージュ */
  --km-border-mid:   #D4D0C7; /* グレージュ */

  /* CTA アクセント */
  --km-line-green: #06C755; /* LINE Green (LINE CTA のみ) */


  /* ============================================
     Typography — フォントファミリー
     ============================================ */

  --km-font-heading-en: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --km-font-heading-ja: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --km-font-body-en:    "Inter", system-ui, -apple-system, sans-serif;
  --km-font-body-ja:    "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif;


  /* ============================================
     Spacing — 余白・スペーシング
     ============================================ */

  --km-space-section:    120px; /* セクション間 (PC) */
  --km-space-section-sp:  80px; /* セクション間 (SP) */
  --km-space-block:       64px; /* ブロック間 */
  --km-space-card:        32px; /* カード間 */
  --km-space-para:        24px; /* 段落間 */
  --km-space-inline:      16px; /* インライン余白 */

  --km-content-max:    1200px; /* コンテンツ最大幅 */
  --km-content-mid:     720px; /* 中幅(記事) */
  --km-content-narrow:  560px; /* 狭幅(コピー) */


  /* ============================================
     Border / Radius / Shadow
     ============================================ */

  --km-border-thin:     0.5px solid var(--km-border-light);
  --km-border-mid-rule: 1px solid var(--km-border-mid);

  --km-radius-default: 0;   /* シャープ(デフォルト) */
  --km-radius-soft:    2px; /* ボタン等、必要時のみ */

  --km-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
}


/* ============================================
   レスポンシブ調整
   SP では section 間隔を縮小
   ============================================ */
@media (max-width: 767px) {
  :root {
    --km-space-section: var(--km-space-section-sp);
  }
}