/**
 * CapeMotion SUPツアー - デザイントークン
 * プレフィックス: --cm-
 * SWELLのデフォルト変数（--main-color 等）との衝突を避けるため
 * すべての変数に --cm- プレフィックスを使用しています。
 */

:root {

  /* ============================================================
   * カラー
   * ============================================================ */

  /* Primary */
  --cm-clear-sky:     #38BDF8;
  --cm-ocean-blue:    #0EA5E9;
  --cm-deep-sea:      #0C4A6E;
  --cm-sky-blue:      #BAE6FD;

  /* Accent */
  --cm-sunset-orange: #FB923C;
  --cm-golden-hour:   #FED7AA;
  --cm-warm-light:    #FFF7ED;

  /* Text */
  --cm-text-dark:     #0C4A6E;
  --cm-text-medium:   #0369A1;
  --cm-text-light:    #7DD3FC;

  /* ============================================================
   * グラデーション
   * ============================================================ */

  --cm-gradient-hero:   linear-gradient(to bottom, rgba(14,165,233,0.18) 0%, rgba(14,165,233,0.5) 48%, rgba(12,74,110,0.72) 100%);
  --cm-gradient-sunset: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 42%, #FED7AA 72%, #FB923C 100%);

  /* ============================================================
   * タイポグラフィ
   * ============================================================ */

  --cm-font-heading: 'Montserrat', 'Noto Sans JP', sans-serif;
  --cm-font-body:    'Noto Sans JP', sans-serif;

  --cm-text-hero:  clamp(2.5rem, 6vw, 4.5rem);
  --cm-text-h1:    clamp(1.8rem, 4vw, 2.8rem);
  --cm-text-h2:    clamp(1.4rem, 3vw, 2rem);
  --cm-text-h3:    1.25rem;
  --cm-text-body:  1rem;
  --cm-text-small: 0.875rem;

  /* ============================================================
   * スペーシング
   * ============================================================ */

  --cm-section-py:   clamp(4rem, 8vw, 8rem);
  --cm-container-px: clamp(1rem, 5vw, 4rem);
  --cm-grid-gap:     clamp(1.5rem, 3vw, 2.5rem);
  --cm-content-max:  1100px;

  /* ============================================================
   * シェイプ
   * ============================================================ */

  --cm-radius-card:   12px;
  --cm-radius-button: 50px;
  --cm-radius-image:  8px;

  /* ============================================================
   * シャドウ
   * ============================================================ */

  --cm-shadow-card:   0 8px 28px rgba(14,165,233,0.14);
  --cm-shadow-hover:  0 14px 44px rgba(14,165,233,0.24);
  --cm-shadow-button: 0 8px 22px rgba(251,146,60,0.34);

  /* ============================================================
   * レイアウト
   * ============================================================ */

  --cm-header-h:    80px;  /* PC固定ヘッダー高さ */
  --cm-header-h-sp: 64px;  /* SP固定ヘッダー高さ */

  /* ============================================================
   * トランジション
   * ============================================================ */

  --cm-transition: all 0.25s ease;
}