/* ==========================================================================
   theme-simple.css
   デザインパターン: 「シンプル」
   配色: 白 + モノトーン / フォント: ゴシック細め / 写真量: 少なめ / 余白広め・整然

   他パターン(密着・あたたかみ / 高級・ラグジュアリー / ナチュラル / モダン・クール)を
   作るときは、このファイルをコピーして theme-〇〇.css を作り、
   この中の値だけを差し替える。base.css は絶対に触らない。
   ========================================================================== */

:root {
  /* ---- ベースカラー ---- */
  --color-bg: #FFFFFF;          /* ページ背景 */
  --color-surface: #F7F7F7;     /* カード等の背景(bgより少し暗い面) */
  --color-text: #1A1A1A;        /* 本文文字色 */
  --color-text-sub: #6B6B6B;    /* 補足文字色(グレー) */
  --color-border: #E4E4E4;      /* 罫線・区切り線 */

  /* ---- キーカラー ---- */
  --color-primary: #1A1A1A;     /* ボタン・強調(モノトーンなので黒) */
  --color-accent: #8A8A8A;      /* アイコン・価格・アクセント(中間グレー) */

  /* ---- ヒーロー(ファーストビュー) ---- */
  --color-hero-overlay: rgba(0, 0, 0, 0.28);
  --color-hero-text: #FFFFFF;

  /* ---- フッター ---- */
  --color-footer-bg: #1A1A1A;
  --color-footer-text: #FFFFFF;

  /* ---- フォント ----
     ゴシック細めを想定。Web上で近いフリーフォントとして
     Noto Sans JP(ウェイト300〜400中心)を指定。
     本番導入時は google Fonts の <link> をheadに追加すること。 */
  --font-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---- 形状・余白・影 ---- */
  --radius: 4px;                 /* 角丸は最小限、整然とした印象 */
  --spacing-unit: 1rem;          /* 余白は広め。sectionでこの倍数を使用 */
  --shadow-style: 0 4px 16px rgba(0, 0, 0, 0.06);
  --image-filter: grayscale(0%); /* シンプルパターンは写真そのまま。落ち着かせたい場合は grayscale(15%) 等に */
}

/* シンプルパターン固有の微調整:文字を少し細く・字間を広めに見せる */
body {
  font-weight: 300;
  letter-spacing: 0.02em;
}
h1, h2, h3, h4 {
  font-weight: 500;
}
.site-header__logo,
.menu-card__price {
  font-weight: 500;
}