/* =============================================================================
   JAコネクト デザイントークン（単一ソース）

   指針書: docs/design-system/README.md
   実物見本: docs/design-system/design-system.html

   - 全画面（admin / mobile / maintenance）の HTML シェルから <link> で読み込む。
   - 色・セマンティック・shadow・radius・z-index・motion は var() で両画面共通利用可。
   - スペーシング（--jc-space-*）・タイポ（--jc-font-size-*）の rem 値は主に mobile 向け。
     admin は同じスケールを px で直書きする（docs/design-system/README.md 3.0 単位ポリシー）。
   - KSP テーマは app-mobile.tag / app-admin.tag が実行時に --color-primary 系を
     setProperty で上書きする。変数名は変更しないこと。
   ============================================================================= */

:root {
	/* --- 色: 既存プライマリ（#27a639 基準） --- */
	--color-primary: #27A639;
	--color-primary-medium: #309D3A;
	--color-primary-light: #4bbd00;
	--color-primary-dark: #0f7b44;
	--color-primary-alt: #009944;
	--color-primary-muted: #4B8E4E;
	/* --- 色: プライマリ階調（Material 風 50-500） --- */
	--color-primary-50: #e8f5e9;
	--color-primary-100: #c8e6c9;
	--color-primary-200: #a5d6a7;
	--color-primary-300: #81c784;
	--color-primary-400: #66bb6a;
	--color-primary-500: #4caf50;
	/* --- 色: アクセント --- */
	--color-farmer: #f19e38;
	--color-blue-bright: #0091ff;
	--color-develop: #f1a51a;
	/* --- 色: KSP テーマ --- */
	--color-ksp: #802062;
	--color-ksp-medium: #A03060;
	--color-ksp-light: #C04070;
	--color-ksp-dark: #4C1038;
	--color-ksp-alt: #702080;
	--color-ksp-muted: #6A405A;
	--color-ksp-50: #fce4ec;
	--color-ksp-100: #f8bbd0;
	--color-ksp-200: #f48fb1;
	--color-ksp-300: #f06292;
	--color-ksp-400: #ec407a;
	--color-ksp-500: #e91e63;

	/* --- 色: セマンティック --- */
	--jc-color-text: #1f2421;
	--jc-color-text-muted: #66726c;
	--jc-color-text-disabled: #a6afaa;
	--jc-color-text-inverse: #ffffff;
	--jc-color-bg: #f4f6f5;
	--jc-color-surface: #ffffff;
	--jc-color-surface-2: #f0f3f1;
	--jc-color-border: #e2e7e4;
	--jc-color-border-strong: #ccd4cf;
	--jc-color-success: #1f9d4d;
	--jc-color-success-bg: #e8f5e9;
	--jc-color-warning: #e08a00;
	--jc-color-warning-bg: #fdf2e0;
	--jc-color-danger: #d93f33;
	--jc-color-danger-bg: #fdecea;
	--jc-color-info: #0079d3;
	--jc-color-info-bg: #e6f2fb;

	/* --- スペーシング（0.4rem=4px 基準。mobile=rem / admin は px 直書き） --- */
	--jc-space-1: 0.4rem;
	--jc-space-2: 0.8rem;
	--jc-space-3: 1.2rem;
	--jc-space-4: 1.6rem;
	--jc-space-5: 2.0rem;
	--jc-space-6: 2.4rem;
	--jc-space-7: 3.2rem;
	--jc-space-8: 4.0rem;

	/* --- タイポグラフィ（mobile=rem / admin は px 直書き） --- */
	--jc-font-family-base: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
	--jc-font-size-xs: 1.1rem;
	--jc-font-size-sm: 1.2rem;
	--jc-font-size-base: 1.3rem;
	--jc-font-size-md: 1.4rem;
	--jc-font-size-lg: 1.6rem;
	--jc-font-size-xl: 2.0rem;
	--jc-font-size-2xl: 2.4rem;
	--jc-font-size-3xl: 3.2rem;
	--jc-font-weight-normal: 400;
	--jc-font-weight-medium: 500;
	--jc-font-weight-bold: 700;
	--jc-line-height-tight: 1.25;
	--jc-line-height-base: 1.6;
	--jc-line-height-relaxed: 1.8;

	/* --- 角丸（var() で両画面共通） --- */
	--jc-radius-sm: 0.4rem;
	--jc-radius-md: 0.8rem;
	--jc-radius-lg: 1.2rem;
	--jc-radius-full: 9999px;

	/* --- 影 / elevation（var() で両画面共通） --- */
	--jc-shadow-1: 0 0.1rem 0.2rem rgba(20, 40, 30, 0.06), 0 0.1rem 0.3rem rgba(20, 40, 30, 0.04);
	--jc-shadow-2: 0 0.2rem 0.8rem rgba(20, 40, 30, 0.08), 0 0.1rem 0.2rem rgba(20, 40, 30, 0.04);
	--jc-shadow-3: 0 0.8rem 2.4rem rgba(20, 40, 30, 0.14), 0 0.2rem 0.6rem rgba(20, 40, 30, 0.06);

	/* --- z-index スケール --- */
	--jc-z-base: 1;
	--jc-z-dropdown: 1000;
	--jc-z-sticky: 1100;
	--jc-z-overlay: 1400;
	--jc-z-modal: 1600;
	--jc-z-toast: 1800;

	/* --- モーション --- */
	--jc-duration-fast: 0.15s;
	--jc-duration-base: 0.2s;
	--jc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}