@charset "utf-8";
/* =========================================================================
   theme.css  —  デザイントークン（共通）
   トレーサビリティSYSTEM — 配色・タイポグラフィの共通定義
   食品トレーサビリティに相応しい「信頼感」「品格」「ぬくもり」を意識した配色
   ========================================================================= */

:root {
	/* --- ブランド：プライマリ（深い藍緑＝信頼・品格） --- */
	--c-primary:        #0F4C5C;
	--c-primary-hover:  #156478;
	--c-primary-soft:   #2D7A8C;
	--c-primary-pale:   #E6EFF2;
	--c-primary-bg:     #F4F8F9;

	/* --- アクセント：温かみのあるゴールド（職人技・上質感） --- */
	--c-accent:         #B8862F;
	--c-accent-hover:   #D19C42;
	--c-accent-pale:    #FAF3E2;

	/* --- セマンティック --- */
	--c-success:        #4F7942;
	--c-success-pale:   #EDF3EA;
	--c-warning:        #C97E3D;
	--c-warning-pale:   #FBF1E5;
	--c-danger:         #A83A48;
	--c-danger-pale:    #F5E6E8;
	--c-info:           #4A6B8A;
	--c-info-pale:      #EBF0F5;

	/* --- ニュートラル（やや暖色寄りで上品な紙の質感） --- */
	--c-bg:             #FAFAF6;
	--c-surface:        #FFFFFF;
	--c-surface-alt:    #F5F3EC;
	--c-surface-mute:   #EDEAE0;
	--c-border:         #E2DED1;
	--c-border-strong:  #C8C2B0;

	/* --- テキスト --- */
	--c-text:           #1F2937;
	--c-text-soft:      #4B5563;
	--c-text-mute:      #6B7280;
	--c-text-faint:     #9CA3AF;
	--c-text-on-dark:   #FFFFFF;

	/* --- シャドウ（重ねがけ可能） --- */
	--shadow-xs:  0 1px 2px rgba(15, 30, 40, 0.04);
	--shadow-sm:  0 2px 6px rgba(15, 30, 40, 0.06);
	--shadow-md:  0 6px 18px rgba(15, 30, 40, 0.08);
	--shadow-lg:  0 14px 38px rgba(15, 30, 40, 0.12);

	/* --- 角丸 --- */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 14px;
	--r-xl: 22px;
	--r-pill: 999px;

	/* --- スペーシング --- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;

	/* --- フォント --- */
	--ff-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, -apple-system, sans-serif;
	--ff-num: "SF Pro Display", "Helvetica Neue", "Arial", var(--ff-jp);

	/* --- アニメーション --- */
	--t-fast: 0.15s;
	--t-base: 0.25s;
	--t-slow: 0.4s;
	--ease: cubic-bezier(.2, .7, .25, 1);
}

/* レイアウト変数（ヘッダ高など） */
:root {
	--header-h: 56px;
}
@media screen and (max-width:767px) {
	:root { --header-h: 52px; }
}

/* スクロール時のフォーカスリング統一 */
:focus-visible {
	outline: 2px solid var(--c-primary-soft);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}