/*
 * TABI Motion — Design Tokens（デザインシステム第1弾）
 *
 * LP と本体アプリで共有することを想定した設計言語の一元定義。
 * ここには「色・タイポ・余白リズム・罫線・角丸」などの素となる値だけを置き、
 * 見た目の実装（レイアウト）は各ページ側に書く。
 *
 * 方向性: エディトリアル（旅雑誌風）
 *   - 温かみのある紙色の地に、黒に近い墨色の文字
 *   - 見出しは明朝（セリフ）、本文はゴシック（サンセリフ）のコントラスト
 *   - アクセントは朱・テラコッタ。地図上のルート線（赤）と呼応させる
 *   - 角丸は控えめ、影はほぼ使わない、罫線で面を区切る
 */
:root {
  /* ── 色 ────────────────────────────────────────────── */
  --paper: #ffffff; /* 主背景：純白 */
  --paper-deep: #f4f3f0; /* 交互に挟むセクションの背景（ごく淡い） */
  --card: #ffffff; /* 面（カード・フォーム） */
  --ink: #211d17; /* 主文字：温かい黒 */
  --ink-soft: #6a6252; /* 副文字 */
  --ink-faint: #9a9284; /* 補足・キャプション */
  --ink-deep: #171410; /* フッターなど濃い面 */
  --line: #e2e0db; /* 罫線 */
  --line-soft: #ededea; /* 淡い罫線 */
  --navy: #14306b; /* ブランド基調（ロゴの濃紺） */
  --accent: #1668c0; /* アクセント青（見出し強調・番号・キッカー。ロゴの青に呼応） */
  --accent-deep: #0f4c9c; /* アクセントの濃色（hover 等） */
  --accent-wash: #e9f1fc; /* アクセントの極淡色（選択・強調背景） */
  --cta: #1f8a5b; /* CTA（行動を促すボタン）の緑 */
  --cta-deep: #176b47; /* CTA の濃色（hover） */

  /* ── 書体 ──────────────────────────────────────────── */
  /* 旅動画クリエイター向け。明朝は使わず、ゴシック（サンセリフ）で統一。
     見出しは太ウェイトで階層を立て、欧文ラベル・数字は無機質なグロテスク系で締める。 */
  --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo',
    'Noto Sans JP', system-ui, sans-serif;
  --font-display: var(--font-sans); /* 見出し。weight で差をつける（将来 Web フォントに差し替え可） */
  --font-latin: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Yu Gothic UI', sans-serif; /* 欧文ラベル・数字 */
  --font-mono: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; /* 座標・テレメトリ */

  /* ── タイポスケール ───────────────────────────────── */
  --fs-display: clamp(34px, 5.2vw, 58px); /* ヒーロー見出し */
  --fs-h2: clamp(25px, 3.1vw, 36px);
  --fs-h3: clamp(18px, 1.4vw, 20px);
  --fs-lead: clamp(16px, 1.3vw, 18px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-kicker: 13px;

  /* ── 余白リズム ───────────────────────────────────── */
  --section-y: clamp(68px, 9vw, 128px); /* セクションの上下 */
  --wrap: 1120px; /* 本文の最大幅 */
  --measure: 62ch; /* 読みやすい行長 */

  /* ── 形 ──────────────────────────────────────────── */
  --radius: 3px; /* 角丸は控えめ（ピル型は使わない） */
  --radius-lg: 6px;
  --rule: 1px solid var(--line);
}