/**
 * tokens.css — Pattern E (inabe DNA)
 * 白基調 + 写真青 + 濃ネイビー文字
 * inabe の茶黒 (#201614) → 濃ネイビー (#1A2740) に置換
 * ベージュ/アイボリー禁止: inabe の暖色 #C67A1C 不採用
 */

:root {
  /* ===== ベース背景 ===== */
  --bg:          #FAFAFA;      /* ページ全体の地色（完全白でなく薄い紙質） */
  --bg-soft:     #F3F3F1;      /* セクション背景の濃淡差 */
  --bg-blue-tint:#EEF4F8;      /* 青み帯びたごく薄い背景 */

  /* ===== 文字色 ===== */
  --ink:         #1A2740;      /* 濃ネイビー (inabe #201614 の茶黒を置換) */
  --ink-soft:    #3A4358;      /* やや弱い文字色 */
  --ink-muted:   #6B7590;      /* 補足・メタ情報 */

  /* ===== ライン・ボーダー ===== */
  --line:        #D2D1CF;
  --line-soft:   #E8E7E5;

  /* ===== 写真由来の青 (inabe そのまま) ===== */
  --blue-500:    #5396B8;      /* コンセプト背景・アクセント */
  --blue-700:    #0C526E;      /* 山影・深い青 */
  --blue-200:    #9EC5D5;      /* 霞・空・薄い水色 */
  --blue-100:    #D4E8F0;      /* 極薄い水色背景 */

  /* ===== CTA ===== */
  --cta-dark:    #1A2740;      /* ダーク CTA 塗り */
  --cta-light:   #D2D1CF;      /* ライト CTA 塗り */

  /* ===== 余白 ===== */
  --space-section: clamp(72px, 8vw, 144px);
  --space-block:   clamp(24px, 3vw,  48px);

  /* ===== 角丸 ===== */
  --radius-xl:   28px;
  --radius-lg:   20px;
  --radius-md:   12px;
  --radius-sm:    8px;

  /* ===== コンテナ ===== */
  --container:   min(1660px, calc(100vw - 64px));
  --container-md:min(1200px, calc(100vw - 48px));
  --container-sm:min(800px,  calc(100vw - 40px));

  /* ===== シャドウ (控えめ) ===== */
  --shadow-card: 0 4px 20px rgba(26, 39, 64, 0.06);
  --shadow-md:   0 8px 32px rgba(26, 39, 64, 0.10);

  /* ===== トランジション ===== */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-normal:  0.3s;
}

@media (max-width: 767px) {
  :root {
    --container:    calc(100vw - 40px);
    --container-md: calc(100vw - 40px);
    --container-sm: calc(100vw - 40px);
    --radius-xl:    20px;
    --radius-lg:    16px;
  }
}