/* ================================================================
   デザイントークン — BOBOJYU デリバリー
   design-image.png のカラーパレット（漆黒・炭・琥珀・クリーム・朱）に基づく
================================================================ */
:root {
  /* ===== カラー ===== */
  --color-sumi:          #0A0A0A;   /* 墨（ブランドカラー：design-image.png 準拠） */
  --color-main:          #1A1A1A;   /* 漆黒 — プライマリ */
  --color-main-light:    #3D3D3D;   /* 炭色 — ホバー */
  --color-main-lighter:  #616161;   /* 鈍色 — 無効（WCAG AA 4.54:1 on white） */
  --color-main-lightest: #F4F4F4;   /* 薄灰 — 背景 */
  --color-accent:        #B08D57;   /* 琥珀 — カートボタン・価格 */
  --color-accent-light:  #C9A97A;   /* 琥珀ライト — ホバー */
  --color-font:          #1A1A1A;
  --color-white:         #FFFFFF;
  --color-black:         #000000;
  --color-gray:          #888888;
  --color-gray-light:    #BBBBBB;
  --color-gray-lighter:  #E0E0E0;
  --color-border:        #E0E0E0;   /* ボーダー汎用（= --color-gray-lighter の alias） */
  --color-cream:         #F2EDE4;   /* クリーム — セカンダリ背景 */
  --color-washi:         #F5F1EA;   /* 和紙 — セクション背景（CLAUDE.md 準拠） */
  --color-red:           #CC2200;   /* 朱 — エラー・必須 */

  /* ===== フォント ===== */
  --font-family-base:  "Noto Sans JP", sans-serif;
  --font-family-serif: "Noto Serif JP", "游明朝体", "Yu Mincho", "YuMincho", serif;
  --font-mincho:       var(--font-family-serif); /* alias — 重複定義解消 */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-wide:   1.9;
  --line-height-normal: 1.6;
  --line-height-narrow: 1.3;

  /* ===== レイアウト ===== */
  --contents-maxwidth: 1200px;

  /* コンテンツ左右ガター（.container / .inner / ヘッダーの共通値）
     SP（〜749px）20px / タブレット（750〜1024px）50px / PC（1025px〜）40px
     ※ 横位置を本文と揃えたい要素はこの変数を参照すること */
  --container-gutter: 20px;

  /* ===== スペーシング ===== */
  --space-side:    20px;
  --space-section: 56px;
  --space-title:   24px;
  --space-item:    16px;
  --space-text:    8px;

  /* ===== 影・角丸 ===== */
  --shadow-1: 0 4px 24px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 2px 8px  rgba(0, 0, 0, 0.06);
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.30); /* スクロール時ヘッダー影 */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ===== ヘッダー高さ（CLAUDE.md: PC 64px / SP 56px）===== */
  --header-h-sp: 56px;
  --header-h-pc: 64px;

  /* ===== トップ情報バー高さ（PCのみ表示・2段構成、時間欄3行+区切り線）===== */
  --infobar-h-pc: 100px;

  /* ===== ヘッダー右上ボタン幅（ログイン／カートを見るを同幅に揃える）===== */
  --header-btn-w: clamp(148px, 13vw, 176px);
}

@media (min-width: 750px) {
  :root {
    --container-gutter: 50px;
    --space-side:    40px;
    --space-section: 80px;
    --space-title:   40px;
  }
}

@media (min-width: 1025px) {
  :root {
    --container-gutter: 40px;
    --space-side:    80px;
    --space-section: 112px;
  }
}

/* ===== アニメーション無効化（アクセシビリティ） ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}