/* =============================================
   お片付けプランナー - デザイントークン（tokens.css）
   kplan-style / tokens.css
   値のSSOT。design/DESIGN.md の定義に対応する実測値はここに集約する。
   ============================================= */

:root {
    /* --- カラー（既存。main-kplan.css :root より移管） --- */
    /* morisaki変更 2026-04-26 ロゴカラー（オレンジ＋ネイビー）に統一 */
    --color-primary:     #1E3A5F;   /* メインネイビー（信頼・プロ感） */
    --color-primary-dk:  #122847;   /* ダークネイビー */
    --color-primary-lt:  #E8EEF5;   /* ライトネイビー背景 */
    --color-accent:      #E67817;   /* オレンジ（CTA・分割払い） */
    --color-accent-dk:   #C35D0A;   /* ダークオレンジ */
    --color-text:        #1a1a1a;
    --color-text-sub:    #555555;
    --color-text-lite:   #888888;
    --color-bg:          #ffffff;
    --color-bg-gray:     #f7f8f6;
    --color-border:      #dde8e2;
    --color-white:       #ffffff;

    /* --- カラー（新規：3ファイルで重複していた生値をトークン化） --- */
    --color-primary-gradient-end: #2a5183; /* 出現回数: 3（main-kplan.css/bunkatsu-page.css/main-area.css 各1宣言）。
                                               元の値 #2A5183/#2a5183 → 採用値 --color-primary-gradient-end。
                                               棚卸し草案の4件から、main-kplan.cssのコメント内言及1件を
                                               除外して再集計（2026-07-08 grep再検証） */
    --color-accent-lt:            #ffb85c; /* 出現回数: 3（各ファイル1宣言）。元の値 #FFB85C/#ffb85c →
                                               採用値 --color-accent-lt。同様に4件からコメント内言及1件を除外 */
    --color-accent-tint:          #fff8f2; /* 出現回数: 1（main-kplan.css .cta-section .btn-primary:hover）
                                               単発だが機能色として保持 */

    /* --- カラー（モバイル専用境界線。--color-border(#dde8e2)とは色相が異なるため
       自動統合せず独立トークンとして維持する。Mの決定） --- */
    --color-border-mobile: #f0f0f0; /* 出現回数: 1（main-kplan-sm.css モバイルヘッダー下線） */

    /* --- カラー（LINE公式ブランドカラー。値そのものは変更提案の対象外） --- */
    --color-line-brand:    #06c755; /* 出現回数: 1（main-kplan.css LINEボタン） */
    --color-line-brand-dk: #05b34c; /* 出現回数: 1（main-kplan.css LINEボタンhover） */

    /* --- 書体（既存） --- */
    --font-base: 'Noto Sans JP', sans-serif;

    /* --- 書体ウェイト（新規トークン化） --- */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* --- フォントサイズスケール（新規：33種の生値を9段階に正規化）
       0.65/0.7/0.72/0.75rem → 2xs, 0.78/0.8/0.82rem → xs,
       0.85/0.875/0.9/0.92rem → sm, 0.95/1/1.05rem・16px → base,
       1.1/1.15/1.2/1.25rem → md, 1.3/1.4/1.4em/1.45/1.5rem → lg,
       1.6/1.65/1.75/1.8rem → xl, 1.9/2/2.2rem → 2xl, 2.4/2.6/2.8rem → 3xl */
    --fs-2xs:  0.7rem;
    --fs-xs:   0.8rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.15rem;
    --fs-lg:   1.4rem;
    --fs-xl:   1.6rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.6rem;

    /* --- 行間スケール（新規：15種を5段階に正規化。loose=body既定値1.8を採用） --- */
    --lh-tight:   1;
    --lh-snug:    1.3;
    --lh-normal:  1.4;
    --lh-relaxed: 1.6;
    --lh-loose:   1.8;

    /* --- 角丸（既存＋新規） --- */
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     16px;
    --radius-xs:     2px;   /* 新規トークン化 */
    --radius-full:   999px; /* 新規トークン化（ピル型ボタン） */
    --radius-circle: 50%;   /* 新規トークン化（円形アイコン枠） */

    /* --- 影（既存＋新規） --- */
    --shadow-card:              0 2px 12px rgba(0,0,0,0.08);
    --shadow-card-hover:        0 6px 24px rgba(0,0,0,0.13);
    --shadow-glow-accent:       0 4px 12px rgba(230,120,23,0.35);
    --shadow-glow-accent-hover: 0 8px 24px rgba(230,120,23,0.4);
    --shadow-glow-line:         0 4px 16px rgba(6,199,85,0.3);
    --shadow-glow-line-hover:   0 8px 24px rgba(6,199,85,0.4);

    /* --- モーション（新規） --- */
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --duration-slow: 0.25s;

    /* --- スペーシングスケール（新規：padding/margin/gapの単一値を12段階に整理。
       5px→1, 6px→2, 18px→4, 36px→8 は近似値統合済み） --- */
    --space-1:   4px;
    --space-2:   8px;
    --space-2-5: 10px;
    --space-3:   12px;
    --space-3-5: 14px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;

    /* --- レイアウト（既存） --- */
    --max-width:   1100px;
    --section-pad: 80px 20px;
}