/* =============================================================
   WalkingPad LP — Design Tokens
   Figma: walkingpad_raf (PC_1440px)
   すべての色・フォント・サイズ・余白の「基準値」をここに集約。
   各セクションのCSSは必ずこの変数を参照すること（直値を書かない）。
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     1. COLOR — Figmaから確定
     --------------------------------------------------------- */
  --color-ink:        #441313;  /* 基調テキスト（濃いマルーン）。見出し・本文の標準色 */
  --color-accent:     #fa6e71;  /* コーラルピンク。サブ見出し・バッジ・タグ・強調 */
  --color-sale:       #74d188;  /* グリーン。タイムセールバー背景 */
  --color-navy:       #133044;  /* ネイビー。副アクセント */
  --color-on-accent:  #ffffff;  /* アクセント上の文字色 */

  /* 中立色（実装で必要・セクションごとに微調整する暫定値） */
  --color-bg:         #ffffff;  /* ページ基本背景 */
  --color-surface:    #f5f3f1;  /* 淡いオフホワイト面（カード・帯など） */
  --color-line:       #e3ded9;  /* ヘアライン・区切り線 */
  --color-muted:      #8a7f7a;  /* 補助テキスト（弱い灰茶） */

  /* ---------------------------------------------------------
     2. TYPOGRAPHY
     ※ Ryumin / Shuei は Morisawa の有償フォント。
       Web配信にはライセンスが必要なため、未導入時は下記フォールバックで表示される。
       本番では Web フォント or 代替フォントの方針を別途決める（TOKENS.md参照）。
     --------------------------------------------------------- */
  /* 欧文ディスプレイ／ラテン（Optima系・ヒューマニストサンセリフ） */
  --font-latin:   "Optima", "Optima Nova", "Candara", "Segoe UI", "Helvetica Neue", sans-serif;
  /* 和文・明朝（リュウミン） */
  --font-mincho:  "A-OTF Ryumin Pr5", "Ryumin", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* 和文・ゴシック（秀英角ゴ銀） */
  --font-gothic:  "A-OTF Shuei KakuGo Gin Std", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;

  /* フォントサイズ（Figma実測のタイプスケール） */
  --fs-display: 96px;  /* ヒーロー大見出し（Beyond / Walk） */
  --fs-h1:      40px;  /* セクションタイトル／製品名 */
  --fs-h2:      32px;  /* THE 等 中見出し */
  --fs-xl:      24px;  /* サブ見出し・リード文 */
  --fs-lg:      20px;  /* やや大きい本文 */
  --fs-md:      18px;  /* 中本文・括弧記号 */
  --fs-base:    16px;  /* 標準本文・リンク（View More） */
  --fs-sm:      13px;  /* バッジ・タグ */
  --fs-xs:      12px;  /* 小本文・注記 */

  /* 行間 */
  --lh-tight:   1;     /* 見出し（leading-none相当） */
  --lh-normal:  1.6;   /* 一般本文 */
  --lh-body-jp: 2.5;   /* 和文本文（ゆったり） */

  /* 字間（letter-spacing） */
  --ls-hero-jp:  20px;     /* ヒーロー和文タイトル（大きく開ける） */
  --ls-wide:     2px;      /* ラテン製品名 */
  --ls-tight:    -0.36px;  /* 和文本文の軽い詰め */
  --ls-tight-2:  -0.72px;  /* 和文見出しの詰め */

  /* ---------------------------------------------------------
     3. SPACING — 8pxベース（Figmaのgap実測に整合）
     --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 120px;

  /* ---------------------------------------------------------
     4. RADIUS
     --------------------------------------------------------- */
  --radius-pill: 100px;  /* バッジ・タグ・ボタン（完全な丸） */
  --radius-md:   12px;   /* カード・画像（暫定／実装時に確認） */
  --radius-sm:   4px;

  /* ---------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------- */
  --design-width: 1440px;  /* Figmaのデザイン基準幅 */
  --content-max:  1200px;  /* コンテンツ最大幅（1440 - 左右120） */
  --gutter:       120px;   /* PCの左右マージン */
  --gutter-inner: 222px;   /* 一部セクションの本文左位置 */

  /* レスポンシブ用ブレークポイント（スマホ対応はこの値で@media） */
  --bp-tablet: 1024px;
  --bp-mobile: 768px;
}

/* =============================================================
   ユーティリティ的な基本設定（任意・必要なら使用）
   ============================================================= */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mincho);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* 中央寄せコンテナ（崩れ防止の要：固定pxでなくmax-width＋100%） */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}