/* ==========================================================================
   00-tokens.css
   一括設定ファイル（デザイントークン）

   ★このファイルの :root 内の値を書き換えるだけで、サイト全体の配色・
     フォント・余白が変わります。他のCSSファイルはこのファイルの変数を
     参照するだけで、直接カラーコードを書きません。

   ★店名・電話番号・画像パスなどの「文字・データ」は
     config/store.config.js を編集してください。色の二重管理はしません。
   ========================================================================== */

:root{
  /* ---- メインカラー／サブカラー（★プラン契約店舗ごとに変更する箇所） ---- */
  --color-primary: #7B2E2E;        /* メインカラー（例：ボタン、価格、見出し飾り） */
  --color-primary-dark: #5E2222;   /* メインカラーの濃色（hover・文字用） */
  --color-primary-soft: #F3E6E4;   /* メインカラーの淡色（背景・バッジ用） */
  --color-secondary: #2F4F3E;      /* サブカラー（例：バッジ、営業中ラベル） */
  --color-secondary-soft: #E7EDE7; /* サブカラーの淡色 */
  --color-gold: #B8862E;           /* 特別な項目の強調用 */
  --color-gold-soft: #F5EBD6;

  /* ---- 基本カラー（背景・文字・境界線） ---- */
  --color-bg: #FBF8F3;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3EEE5;
  --color-ink: #2A2320;
  --color-ink-soft: #6B6058;
  --color-border: #E7DFD3;
  --color-star: #C88A2E;

  /* ---- フォント ----
     先頭のWebフォントはインターネット接続時のみ読み込まれます。
     オフラインや読み込み失敗時は、2番目以降のOS標準フォントに
     自動的に切り替わります（Mac→Hiragino / Windows→游書体・メイリオ）。 */
  --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'MS PMincho', serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif;

  /* ---- 余白スケール（8pxベース） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- 角丸・影 ---- */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-full: 999px;
  --shadow-card: 0 2px 8px rgba(42,35,32,.08), 0 1px 2px rgba(42,35,32,.06);
  --shadow-float: 0 6px 20px rgba(42,35,32,.18);

  /* ---- レイアウト ---- */
  --container-width: 1080px;

  /* ---- z-index スケール ---- */
  --z-header: 100;
  --z-tel-button: 200;

  /* 参考：ブレークポイントはCSS変数化できないため、各CSSファイル内で
     min-width:600px（タブレット）／min-width:1024px（PC）を直接指定する。
     数値を変える場合は全modulesファイルを横断で一括置換すること。 */
}

@media (prefers-color-scheme: dark){
  :root{
    --color-bg: #1C1815;
    --color-surface: #262019;
    --color-surface-2: #302A22;
    --color-ink: #F1EAE0;
    --color-ink-soft: #B8AA9C;
    --color-border: #3D362C;
    --color-primary: #C97A6A;
    --color-primary-dark: #E3A697;
    --color-primary-soft: #3A2723;
    --color-secondary: #8FBBA0;
    --color-secondary-soft: #253028;
    --color-gold: #D9AE63;
    --color-gold-soft: #332A18;
    --color-star: #D9AE63;
    --shadow-card: 0 2px 8px rgba(0,0,0,.35);
    --shadow-float: 0 6px 24px rgba(0,0,0,.5);
  }
}