/*
  ==========================================================================
  Variables（デザイントークン）
  色・フォント・余白などをここで一元管理する。
  一部の値は暫定であり、確定にはカンプ元データの確認が必要（コメントで明記）。
  ==========================================================================
*/

/*
  ブレークポイント一覧（参照用のメモ）
  CSSのカスタムプロパティは @media の条件式の中では使用できないため、
  実際の @media では下記の値を直接pxで記述する。
  1440 / 1280 / 1024 / 768 / 576 / 430
*/

:root {
  /* ---------- Color ----------
     以下はカンプを目視した上での暫定値。
     正式なカラーコードはIllustrator元データからの確認が必要（要確認）。 */
  --color-brand-red: #c7161d;
  /* Products/Cuisine/Events共通の背景色（Phase2でカンプに合わせて統一） */
  --color-bg-cream: #f7f4eb;
  /* PR Characterの背景色として使用。Antenna Shopは専用色（#f1ebda）へ
     切り替えたため、このトークンはPR Character専用として残す。 */
  --color-bg-tan: #ece0c9;
  /* HeaderとIntroduction上部（本文・ギャラリー）専用の白背景。
     既存の--color-bg-creamを差し替えるのではなく、この2箇所だけに
     限定して使う別トークンとして追加している。 */
  --color-bg-white: #ffffff;
  --color-bg-dark: #17130f;
  --color-text-base: #2f2a25;
  --color-text-inverse: #ffffff;
  --color-border: #d8cfc0;

  /* 仮画像領域専用の色（本番の配色と混同しないよう、あえて無彩色にしている） */
  --color-placeholder-bg: #ececec;
  --color-placeholder-border: #999999;
  --color-placeholder-text: #666666;

  /* ---------- Font ----------
     フォントは未確定のため、暫定的にOS標準フォントを指定する。
     最終調整時にWebフォントへ差し替える想定。 */
  --font-family-heading: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --font-family-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-family-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ---------- Font Size ----------
     1remを10pxとして扱う前提の値（style.cssのBaseで html{font-size:62.5%} を設定） */
  --font-size-xs: 1.3rem;
  --font-size-sm: 1.5rem;
  --font-size-base: 1.6rem;
  --font-size-md: 2.2rem;
  --font-size-lg: 3.2rem;
  --font-size-xl: 4.4rem;
  --font-size-2xl: 5.6rem;

  /* ---------- Line Height ---------- */
  --line-height-base: 1.9;
  --line-height-heading: 1.5;

  /* ---------- Letter Spacing ----------
     カンプの落ち着いた組版の印象に寄せるための文字間調整。 */
  --letter-spacing-body: 0.02em;
  --letter-spacing-heading: 0.03em;
  --letter-spacing-en: 0.15em;

  /* ---------- Spacing ---------- */
  --space-3xs: 0.4rem;
  --space-2xs: 0.8rem;
  --space-xs: 1.2rem;
  --space-sm: 1.6rem;
  --space-md: 2.4rem;
  --space-lg: 4.8rem;
  --space-xl: 7.2rem;
  --space-2xl: 9.6rem;
  --space-section-pc: 16rem;
  --space-section-sp: 8rem;

  /* ---------- Container ----------
     コンテナ幅は暫定値。カンプとの目視比較で今後調整する。 */
  --container-max-width: 1280px;
  --container-padding-pc: 6.4rem;
  --container-padding-sp: 2rem;

  /* ---------- Header Height ----------
     SP版Heroの高さ計算（100svh - ヘッダー高さ）に使用する。
     ブラウザでの実測値を基準にした値。
     .header__inner側のpadding-blockを変更した場合はこの値も合わせて調整する（暫定値）。 */
  --header-height-sp: 5.8rem;

  /* ---------- Border Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ---------- z-index ---------- */
  --z-base: 1;
  --z-decoration: 10;
  --z-content: 20;
  --z-header: 100;
  --z-hero-controls: 110;
  --z-back-to-top: 150;
  --z-menu-overlay: 200;

  /* ---------- Animation ---------- */
  --transition-duration-base: 0.6s;
  --transition-easing-base: ease-out;
}