/* =============================================================================
   01-tokens-base.css  （親テーマ jamble-base 共通トークン）
   全サイト共通のトークンと @layer 宣言を提供する。
   サイト固有のブランドカラー・ページスコープは
   子テーマ側の 01-tokens-{slug}.css で上書きする。

   -----------------------------------------------------------------------------
   ブレークポイント方針（@media クエリは以下の4値だけを使うこと）
     - 480px  : xs … 極小スマホ向けの追加調整
     - 600px  : sm … スマホ ↔ タブレット境界（モバイル切替の主基準）
     - 768px  : md … タブレット ↔ デスクトップ境界
     - 1024px : lg … 中型 ↔ 大型デスクトップ境界（ヘッダー・PCレイアウト）

   ※ CSS変数は @media のメディア式に直接展開できないため、値そのものを
      記述する。新規追加時もこの4値以外は使わない。

   -----------------------------------------------------------------------------
   @layer 順（後段ほど優先度高）
     tokens → base → layout → frontpage → components → content → product → pages
   pages を最後にすることで、子テーマのページスコープ（.standard-page など）
   から .c-* コンポーネントを安全に上書きできる。
   ============================================================================= */

@layer tokens, base, layout, frontpage, components, content, product, pages;

@layer tokens {

	:root {
		/* ----- テキスト / 罫線（全サイト共通） ----- */
		--color-text:           #333;
		--color-muted:          #6b6b6b;
		--color-border:         #e6e6e6;
		--color-border-soft:    #eee;
		--color-placeholder-bg: #e0e0e0;

		/* ----- 面（surface）（全サイト共通） ----- */
		--color-surface:        #fff;
		--color-surface-soft:   #fafaf7;
		--color-surface-band:   #f7f9fc;   /* セクション帯背景 */
		--color-bg-gray:        #f9f9f9;

		/* ----- 人気ハイライト（青系、比較表で使用。全サイト共通） ----- */
		--color-popular:        #2670cc;
		--color-popular-soft:   #eaf2fc;
		--color-popular-strong: #d4e4f7;

		/* ----- 在庫アピール用バナー（オレンジ系。全サイト共通） ----- */
		--color-stock-bg:       #fff4e6;
		--color-stock-border:   #f4c98c;
		--color-stock-text:     #a25500;

		/* ----- ブランドトークン（子テーマで必ず上書きする） -----
		   ここの値はフォールバック。子テーマの 01-tokens-{slug}.css で
		   :root を再宣言してサイト固有の値に上書きする。 */
		--color-primary:        #cccccc;
		--color-secondary:      #888888;
		--color-accent:         #cccccc;
		--color-accent-dark:    #888888;
		--color-accent-soft:    #f5f5f5;
		--color-accent-border:  #dddddd;
		--hero-bg:              #f5f5f5;
	}

}