/**
 * ============================================================
 *  DESIGN TOKENS — 外部設定（CSS変数）
 * ------------------------------------------------------------
 *  色・余白・アニメーション速度など、見た目の調整値を
 *  一元管理します。アニメーション関連の値は js/config.js の
 *  animation オブジェクトから実行時に上書きされます
 *  （js/animations.js の applyAnimationConfig 参照）。
 *  ここに書く値はJS未実行時のフォールバック/初期値です。
 * ============================================================
 */
:root {
  /* ---- カラー ------------------------------------------------ */
  --color-bg: #00AEEF;          /* Cyan 100% */
  --color-bg-white: #FFFFFF;    /* LINE-UPセクション背景 */
  --color-text: #FFFFFF;        /* White */
  --color-text-on-white: #123244;
  --color-accent-beige: #EFE6D3;
  --color-accent-gold: #D4AF37;
  --color-accent-gold-soft: rgba(212, 175, 55, 0.35);

  /* ---- タイポグラフィ -----------------------------------------
   * ページ全体をゴシック体で統一（明朝体は使用しない）。
   * --font-display は見出し等で使っていた変数名をそのまま残しつつ、
   * 本文と同じゴシック体を指すようにしている。
   * ------------------------------------------------------------ */
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---- 余白 (セクション) ---------------------------------------
   * スクロールのテンポを良くするため、以前の約半分の余白に設定。
   * ------------------------------------------------------------ */
  --space-section-y: clamp(40px, 6vw, 100px);
  --space-section-x: clamp(24px, 6vw, 120px);
  --space-gap-lg: clamp(24px, 4vw, 56px);
  --space-gap-md: clamp(16px, 2.4vw, 32px);

  /* ---- レイアウト ---------------------------------------------- */
  --content-max-width: 1320px;
  --radius-card: 20px;
  --radius-sm: 10px;
  /* ヒーロー：キャッチコピー画像とメインビジュアルの重なり量 */
  --hero-overlap: 80px;
  /* ヒーローコンテンツ（.hero__inner）の最大幅：
     超ワイド画面で左右の画像が間延びしないための上限 */
  --hero-inner-max-width: 1200px;
  /* 見出し画像の最大幅 */
  --heading-image-max-width: 1200px;

  /* ---- アニメーション（初期値。実行時に js/config.js の値で上書き）---- */
  --anim-duration: 0.45s;
  --anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-stagger: 0.08s;
  /* スライドイン（移動＋フェードイン）のフォールバック初期値 */
  --slide-duration: 0.9s;
  --slide-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- シャドウ --------------------------------------------------
   * 方針：画像には影をつけない。LINE-UPカードのみ影を残す。
   * ------------------------------------------------------------ */
  --shadow-card: 0 18px 40px -18px rgba(0, 20, 35, 0.35);
}

/* reduced-motion環境では過剰な演出を抑える */
@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-duration: 0.01s;
    --anim-stagger: 0s;
  }
}