/* ==========================================================================
   tokens.css — 南港魚つり園 デザイントークン
   現行サイトのテイスト（薄い水色 #bbe8ff ＋ 白）を起点に新規設計。
   ※ CLAUDE.md の仮トークン（紺 #0a5e9c / 橙 #f5a623）は不採用。
   ※ 色の最終調整は Phase 2。Phase 1 はこのトークン前提で構造を組む。
   ========================================================================== */

:root {

  /* === カラー：海・空の青を基調 ====================================== */
  --c-primary:    #0a86c9;   /* メインの海ブルー（リンク・見出し・主要UI） */
  --c-primary-d:  #0769a0;   /* hover / 濃い見出し */
  --c-primary-l:  #bbe8ff;   /* 現行主役の薄い水色（淡い背景・帯） */

  --c-accent:     #f7941d;   /* アクセント（CTA・バッジ）※コントラスト確保用に新規追加 */
  --c-accent-d:   #db7c0a;

  --c-text:       #333333;   /* 本文 */
  --c-text-weak:  #666666;   /* 補助テキスト・キャプション */

  --c-bg:         #ffffff;   /* 既定背景 */
  --c-bg-sub:     #eaf6ff;   /* セクション背景（淡い空色） */
  --c-border:     #d9e6ef;   /* 罫線・カード枠 */

  /* === タイポグラフィ ================================================ */
  --font-base:    "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
                  "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-heading: var(--font-base);

  --fz-base:      16px;      /* 本文基準 */
  --lh-base:      1.8;       /* 本文行間 */
  --lh-heading:   1.4;       /* 見出し行間 */

  /* === 余白スケール ================================================== */
  --space-section-pc: 80px;  /* セクション縦余白（PC） */
  --space-section-sp: 48px;  /* セクション縦余白（SP） */
  --space-gutter:     24px;  /* コンテナ左右パディング */

  /* === レイアウト ==================================================== */
  --container-max: 1120px;

  /* === その他 ======================================================== */
  --radius:       10px;
  --radius-lg:    16px;
  --shadow-card:  0 2px 10px rgba(10, 134, 201, 0.08);
  --shadow-hover: 0 10px 28px rgba(10, 134, 201, 0.18);
  --header-h-pc:  88px;      /* 固定ヘッダー高（PC） */
  --header-h-sp:  60px;      /* 固定ヘッダー高（SP） */

  /* === モーション ==================================================== */
  --transition:   .25s ease;

  /* === グラデーション（マリン） ====================================== */
  --gradient-sea:    linear-gradient(135deg, #0a86c9 0%, #0769a0 100%);
  --gradient-sky:    linear-gradient(180deg, #eaf6ff 0%, #ffffff 100%);
  --overlay-kv:      linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,40,70,.55) 100%);
}

/* ==========================================================================
   ブレークポイント（確定：KSA 4段階）
   ※ CSSカスタムプロパティは @media では使えないため、値はここに明記し
     style.css の @media に直接 px を書く。全ページでこの4段階のみ使用。
     - 1240px : 大画面 → コンテナ手前
     - 1024px : タブレット横
     -  896px : タブレット縦
     -  480px : スマホ
   ========================================================================== */