/* =============================================================
 * Esper Design Tokens (Phase 1) - Mobile First Foundation
 * Created: 2026-04-20
 * Purpose: Centralize brand tokens (color/radius/shadow/type/spacing)
 *          and lay down a mobile-first base that overrides legacy
 *          declarations in common.css / style.css without rewriting them.
 * ============================================================= */

:root {
  /* カラー */
  --brand-900: #0b3a6b;
  --brand-700: #0f5aa6;
  --brand-500: #2d7fd4;
  --brand-50:  #eef3fa;
  --accent:    #e8a93a;
  --ink:       #141821;
  --sub:       #5a616b;
  --line:      rgba(0,0,0,.08);
  --bg-soft:   #f6f8fb;
  --bg:        #ffffff;

  /* 角丸 */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;

  /* シャドウ */
  --sh-sm: 0 2px 8px rgba(0,0,0,.05);
  --sh-md: 0 10px 28px rgba(0,0,0,.08);
  --sh-lg: 0 24px 60px rgba(0,0,0,.12);

  /* タイポ */
  --font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-en: "Inter Tight", "Inter", system-ui, sans-serif;

  /* 間隔 */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 64px;
}

/* ===== ベースタイポ統一（モバイルファースト） ===== */
body {
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .02em;  /* letter-spacing:3pxを上書き */
  line-height: 1.3;
}

/* 欧文タグ */
.tpHero__tagText,
.spHero__tag,
.spSection__tag {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .12em;
}

/* モバイルでのタッチフレンドリーなサイズ */
@media (max-width: 767px) {
  a, button {
    min-height: 44px; /* Apple HIG推奨 */
  }

  /* スマホでのフォントサイズ調整 */
  body { font-size: 15px; }

  /* セクション余白の圧縮 */
  section { padding-top: clamp(32px, 7vw, 56px); padding-bottom: clamp(32px, 7vw, 56px); }

  /* 画像の自動レスポンシブ */
  img { max-width: 100%; height: auto; display: block; }

  /* 水平スクロール防止 */
  html, body { overflow-x: hidden; }
}

/* コンテナのモバイルパディング統一 */
@media (max-width: 480px) {
  .tpContainer,
  .spSection__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}