/**
 * variables.css
 * デザイントークン（CSS カスタムプロパティ）
 * 色・フォント・余白などの設計値をまとめて管理します。
 */

:root {

  /* ─────────────────────────────
     カラーパレット
  ───────────────────────────── */
  --color-primary:       #1B3A6B;  /* カスピアンブルー（メイン） */
  --color-primary-mid:   #2E5FA3;  /* ブルー（グラデ中間） */
  --color-primary-light: #4A80C4;  /* ライトブルー（ホバー） */
  --color-accent:        #C9A84C;  /* ゴールド（60周年・アクセント） */
  --color-accent-light:  #E8C97A;  /* ゴールド（明るめ） */
  --color-text:          #1D1D1F;  /* メインテキスト */
  --color-text-sub:      #6E6E73;  /* サブテキスト */
  --color-bg:            #FFFFFF;  /* 背景（白） */
  --color-bg-light:      #F5F7FA;  /* セクション背景（薄グレー） */
  --color-border:        #D2D2D7;  /* ボーダー */

  /* ─────────────────────────────
     タイポグラフィ
  ───────────────────────────── */
  --font-primary:        'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-size-base:      16px;
  --line-height-base:    1.8;
  --letter-spacing-wide: 0.08em;  /* 見出し用 */

  /* ─────────────────────────────
     スペーシング（8px基準グリッド）
  ───────────────────────────── */
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;

  /* ─────────────────────────────
     レイアウト
  ───────────────────────────── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --gutter:          24px;

  /* ─────────────────────────────
     ボーダー・シャドウ
  ───────────────────────────── */
  --radius-sm:    8px;
  --radius-md:   16px;
  --shadow-card:  0 4px 24px rgba(27, 58, 107, 0.08);
  --shadow-hover: 0 8px 40px rgba(27, 58, 107, 0.16);

  /* ─────────────────────────────
     トランジション
  ───────────────────────────── */
  --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}