/**
 * design-tokens.css — クレカマッチ デザイントークン
 *
 * BATCH 025 で定義。全フロントエンドページで読み込まれる。
 * tools.css / single-card.php / archive-card.php 等はここのトークンを参照する。
 * 直書き禁止フィールド: color / spacing / radius / shadow / font / breakpoint
 *
 * source-of-truth: docs/crecamatch-design-tokens-v1.md
 */

:root {

	/* =====================================================
	   Color — Brand
	   ===================================================== */

	/** プライマリブルー（CTA・リンク・フォーカスリング・バッジ） */
	--cm-color-primary:          #1a56db;
	/** プライマリブルー ホバー */
	--cm-color-primary-dark:     #1447b5;
	/** 薄青背景（第一候補カード・ナビゲーション・比較テーブルヘッダー） */
	--cm-color-primary-bg:       #f0f4ff;
	/** さらに薄い青（選択済みラジオ・タグ背景） */
	--cm-color-primary-bg-light: #e8f0fe;
	/** 青ボーダー（比較テーブル・カード枠） */
	--cm-color-primary-border:   #c7d7f5;

	/* =====================================================
	   Color — Accent Green（サブカード・成功状態）
	   ===================================================== */

	--cm-color-green:      #059669;
	--cm-color-green-dark: #065f46;
	--cm-color-green-bg:   #f0fdf4;

	/* =====================================================
	   Color — Amber（警告・注意・ベネフィットボックス）
	   ===================================================== */

	--cm-color-amber:           #f59e0b;
	--cm-color-amber-bg:        #fffbeb;
	--cm-color-amber-dark:      #856404;
	--cm-color-amber-caution-bg:#fff3cd;

	/* =====================================================
	   Color — Orange（比較ページ CTA）
	   ===================================================== */

	--cm-color-orange:        #ea580c;
	--cm-color-orange-dark:   #92400e;
	--cm-color-orange-bg:     #fff8f0;
	--cm-color-orange-border: #fed7aa;

	/* =====================================================
	   Color — Error
	   ===================================================== */

	--cm-color-error:        #cc0000;
	--cm-color-error-bg:     #fff5f5;
	--cm-color-error-border: #ffcccc;

	/* =====================================================
	   Color — CTA Section（ツールページ次ステップ）
	   ===================================================== */

	--cm-color-cta-bg:     #fff7e6;
	--cm-color-cta-border: #f5c542;

	/* =====================================================
	   Color — Neutral Backgrounds
	   ===================================================== */

	--cm-color-white:     #ffffff;
	--cm-color-bg-form:   #f8f9fa;
	--cm-color-bg-card:   #f9f9f9;
	--cm-color-bg-table:  #f4f4f4;

	/* =====================================================
	   Color — Borders
	   ===================================================== */

	--cm-color-border:       #dee2e6;
	--cm-color-border-input: #cccccc;
	--cm-color-border-table: #e0e0e0;
	--cm-color-border-light: #e5e7eb;

	/* =====================================================
	   Color — Text
	   ===================================================== */

	--cm-color-text:        #333333;
	--cm-color-text-muted:  #555555;
	--cm-color-text-subtle: #666666;
	--cm-color-text-dim:    #888888;
	--cm-color-text-meta:   #6b7280;
	--cm-color-text-strong: #222222;

	/* =====================================================
	   Typography — Font Family
	   ===================================================== */

	--cm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
	                  "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", sans-serif;

	/* =====================================================
	   Typography — Font Size
	   ===================================================== */

	--cm-font-2xs:  .75rem;   /* バッジ・ラベル */
	--cm-font-xs:   .8rem;    /* 注記・キャプション */
	--cm-font-sm:   .875rem;  /* 補足・メタ情報 */
	--cm-font-base: 1rem;     /* 本文 */
	--cm-font-md:   1.1rem;   /* サブ見出し */
	--cm-font-lg:   1.5rem;   /* ページタイトル */
	--cm-font-xl:   1.6rem;   /* 強調数値（還元額）*/

	/* =====================================================
	   Typography — Line Height
	   ===================================================== */

	--cm-leading-tight:  1.4;
	--cm-leading-base:   1.55;
	--cm-leading-loose:  1.8;

	/* =====================================================
	   Spacing
	   ===================================================== */

	--cm-space-1: .25rem;  /*  4px */
	--cm-space-2: .5rem;   /*  8px */
	--cm-space-3: .75rem;  /* 12px */
	--cm-space-4: 1rem;    /* 16px */
	--cm-space-5: 1.25rem; /* 20px */
	--cm-space-6: 1.5rem;  /* 24px */
	--cm-space-8: 2rem;    /* 32px */
	--cm-space-10: 2.5rem; /* 40px */

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

	--cm-radius-sm:   4px;   /* 入力・バッジ・小ボタン */
	--cm-radius-md:   6px;   /* カード・ボックス */
	--cm-radius-lg:   8px;   /* フォーム・大カード */
	--cm-radius-pill: 20px;  /* ラジオボタン pill */
	--cm-radius-full: 99px;  /* 全丸（プリセットタグ） */

	/* =====================================================
	   Shadow
	   ===================================================== */

	--cm-shadow-sm:    0 1px 3px rgba(0,0,0,.08);
	--cm-shadow-md:    0 2px 8px rgba(0,0,0,.10);
	--cm-shadow-focus: 0 0 0 3px rgba(26,86,219,.25);

	/* =====================================================
	   Layout — Max Width
	   ===================================================== */

	--cm-max-w-tool: 800px;   /* ツールページ */
	--cm-max-w-list: 1100px;  /* カード一覧・比較 */
	--cm-max-w-card: 860px;   /* 単一カード詳細 */

	/* =====================================================
	   Breakpoints（参照用 — @media 内では直接値を書く）
	   ===================================================== */

	/* 360px / 390px / 400px — スマートフォン最小 */
	/* 580px               — 2カラム分割境界     */
	/* 600px               — グリッド折り返し     */
	/* 768px               — タブレット           */
	/* 1024px              — デスクトップ         */
}