/**
 * assets/css/tokens.css
 *
 * PickOne デザイントークン定義。
 * CSS カスタムプロパティ（変数）のみ定義する。クラスはここに書かない。
 * すべての色・フォント・サイズ・余白はここから参照する。
 *
 * 参照: pickone-tasty_design.md
 *
 * 方向性: 「無印良品 × iHerb × 自然食品売り場」
 * キーワード: 清潔感 / 整理 / 自然 / 安心感
 */

/* -----------------------------------------------------------------------
   カラーパレット
----------------------------------------------------------------------- */
:root {
  /* 背景色 */
  --color-bg-base:    #FAF8F3; /* メイン背景（生成り。完全白は避ける） */
  --color-bg-section: #F3EFE6; /* セクション背景・カード内強調エリア */
  --color-bg-white:   #FFFFFF; /* 商品カード背景 */

  /* テキスト */
  --color-text-main:  #2E2A26; /* 本文（真っ黒禁止。濃いブラウン） */
  --color-text-sub:   #6F6A64; /* サブテキスト・補足説明 */
  --color-text-muted: #A8A09A; /* プレースホルダ・無効テキスト */

  /* アクセント */
  --color-accent:       #6B7A4B; /* メインアクセント（オリーブ系） */
  --color-accent-hover: #59663E; /* ボタンホバー（少し濃く） */
  --color-accent-light: #EEF1E8; /* アクセントの薄い背景（バッジ等） */

  /* 補助色 */
  --color-warm:       #C97B36; /* 補助色（ドライフルーツのマンゴー・デーツ感） */
  --color-warm-light: #FBF1E6; /* 補助色の薄い背景 */

  /* 境界線 */
  --color-border:     #ECE7DF; /* 商品カード枠線 */
  --color-border-mid: #D9D3CB; /* 区切り線 */

  /* フラッシュメッセージ */
  --color-success-bg:   #F0F5EB;
  --color-success-text: #4A6030;
  --color-error-bg:     #FEF2F2;
  --color-error-text:   #B91C1C;
  --color-info-bg:      #EFF6FF;
  --color-info-text:    #1D4ED8;
}

/* -----------------------------------------------------------------------
   タイポグラフィ
----------------------------------------------------------------------- */
:root {
  /* フォントスタック */
  --font-sans-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-sans-en: 'Inter', 'Manrope', system-ui, sans-serif;

  /* フォントサイズ（PC基準） */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px; /* 本文 */
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;

  /* フォントウェイト */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 行間 */
  --leading-body:    1.8; /* 本文（食品ECは余裕が大事） */
  --leading-heading: 1.3; /* 見出し */
  --leading-tight:   1.1;

  /* 字間 */
  --tracking-body:    0.02em;
  --tracking-heading: 0.01em;
}

/* -----------------------------------------------------------------------
   スペーシング・レイアウト
----------------------------------------------------------------------- */
:root {
  /* コンテナ幅 */
  --container-max:     1280px;
  --container-content: 1180px;

  /* セクション上下余白 */
  --section-padding-y:    80px;
  --section-padding-y-sm: 48px; /* SP用 */

  /* カード間隔 */
  --gap-card: 24px;

  /* コンポーネント */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-card: 16px;
  --radius-btn:  8px; /* 角丸ボタン（ピル型はAI臭が強いため変更） */
  --radius-input: 8px;

  /* ボタン高さ */
  --btn-height: 48px;
  --btn-height-sm: 40px;

  /* シャドウ */
  --shadow-card:       0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);

  /* トランジション */
  --transition-base: 0.2s ease;
}

/* -----------------------------------------------------------------------
   アイコン
----------------------------------------------------------------------- */
:root {
  --icon-stroke: 1.5; /* 線系アイコンのstroke-width */
}