/**
 * デザイントークン (レスポンシブ化 Phase 0)
 *
 * ◆ ブレークポイント規約(正準) ====================================
 *   961px 以上 … PC  (min-width: 961px)
 *   960px 以下 … SP/タブレット (max-width: 960px)
 *   768px      … 補助境界(タブレット縦・必要時のみ)
 *   ※ CSSカスタムプロパティはメディアクエリの条件式には使えないため、
 *     ブレークポイントの値そのものはこの規約とレビューで統制する
 *     (カスタムプロパティ化はしない)。
 *
 * 値は既存の
 *   - user_data/packages/default/responsive/asset/css/style.css (Sass生成物)
 *   - category/include/asset/css/style.css
 * から頻出のものを抽出して定義している。新しい色や寸法をここで発明しない。
 * ページ別CSS(pages/*.css)はこのファイルの変数を参照して実装すること。
 */
:root {
	/* ブランドカラー */
	--color-brand-text: #7E432C;   /* 本文色・ブランドブラウン(body color) */
	--color-brand-red: #d22600;    /* 強調・警告・価格等 */
	--color-brand-orange: #DD5834; /* ボタン・アクセント */
	--color-brand-yellow: #FED81F; /* ボタン・バッジ */
	--color-brand-green: #4fb340;  /* 完了・OK系 */
	--color-brand-blue: #0071BC;   /* カテゴリLP系アクセント */

	/* 文字色・背景色・境界色 */
	--color-text: #7E432C;
	--color-bg: #fff;
	--color-bg-sub: #F8F8F8;       /* セクション背景等 */
	--color-bg-tint-yellow: #FFF8CC; /* 淡い黄背景 */
	--color-bg-tint-blue: #DBF2FF;   /* 淡い青背景(category系) */
	--color-border: #E1E1E1;
	--color-border-sub: #ccc;

	/* コンテナ幅 */
	--container-max-width: 1000px;
	--breakpoint-pc: 961px;
	--breakpoint-sp: 960px;
	--breakpoint-tablet: 768px;

	/* 基本スペーシング(rem) */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 2.5rem;
	--space-xxl: 3rem;

	/* タイポグラフィ */
	--font-family-base: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic";
	--font-size-base: 1.6rem;
	--line-height-base: 1.5;

	/* z-index スケール(既存 SP オーバーレイ z800 の慣例と整合) */
	--z-index-base: 1;
	--z-index-dropdown: 100;
	--z-index-sticky: 300;
	--z-index-overlay: 800;
	--z-index-modal: 1000;
	--z-index-toast: 100000;
}