/* =========================================================
   ELVORA Design Tokens — LP用CSS変数
   このファイルの値は確定済み。勝手に変更しないこと。
   ========================================================= */

:root {
  /* ===== ブランドネイビー（ELVORA基調色） ===== */
  --navy:        #141B3C;  /* メインブランドカラー / ダークセクション背景 */
  --navy-deep:   #0D1120;  /* 最暗部 / 章扉・締め */
  --navy-light:  #1E284E;  /* カード・面の段差 */
  --navy-hair:   rgba(157, 168, 255, 0.22); /* 罫線・ボーダー（ダーク地上） */

  /* ===== アクセント（ペリウィンクル） ===== */
  --accent:      #9DA8FF;  /* ダーク地のアクセント・kicker・リンク */
  --accent-deep: #7C8CFF;  /* ライト地のアクセント・ドット・強調 */

  /* ===== テキスト ===== */
  --text-hi:     #F7F8FB;  /* ダーク地の見出し・本文 */
  --text-mid:    #C7CCDD;  /* ダーク地のサブ */
  --text-lo:     #8A92B0;  /* ダーク地のキャプション */
  --ink:         #141B3C;  /* ライト地の見出し（=navy） */
  --ink-sub:     #5A6378;  /* ライト地の本文 */
  --ink-lo:      #A6ADBF;  /* ライト地のキャプション */

  /* ===== ライトセクション背景 ===== */
  --light-bg:    #FAFBFD;  /* コンテンツ（番組）セクションの背景 */
  --light-line:  #E2E6EF;  /* ライト地の罫線 */

  /* ===== 番組カラー（4企画・コンテンツ領域でのみ使用） ===== */
  --prog-renai:      #FF5470;  /* 恋愛解体新書 */
  --prog-renai-dk:   #E63A57;
  --prog-renai-tint: #FFF1F3;
  --prog-epi:        #2BB8E8;  /* エピソードトーク生成AI */
  --prog-epi-dk:     #1497C7;
  --prog-epi-tint:   #EEF9FE;
  --prog-ai1:        #34C77B;  /* AI-1グランプリ */
  --prog-ai1-dk:     #1FA862;
  --prog-ai1-tint:   #EEFBF3;
  --prog-mirai:      #9B6DF5;  /* 未来予想ワイドショー */
  --prog-mirai-dk:   #7E4FE0;
  --prog-mirai-tint: #F4EFFE;

  /* ===== タイポグラフィ ===== */
  /* Google Fontsが企業プロキシで遮断されても崩れないよう、OS標準フォントまで指定する。
     generic sans-serif 単独だと Windows で日本語が MS Pゴシックになり著しく劣化する */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-jp:      'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  --font-body:    'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, sans-serif;

  /* ===== 角丸・影 ===== */
  --radius-card: 16px;
  --radius-sm:   12px;
  --shadow-card: 0 20px 60px rgba(20, 27, 60, 0.18);
  --shadow-soft: 0 6px 24px rgba(20, 27, 60, 0.06);

  /* ===== 余白の基準 ===== */
  --pad-section: 96px;   /* セクション上下パディング（PC） */
  --pad-x:       64px;   /* 左右マージン（PC） */
  --gap-card:    20px;
}

/* =========================================================
   使い方の指針（エージェント向け）
   - ダークセクション（Hero/戦略/価値/プラン等）: background: var(--navy)
     + 背景画像 cover-bg.png / texture-bg.png を opacity 0.4〜0.5 で重ね、
       その上に navy の color blend を opacity 0.45〜0.5 でかけてブランド色に寄せる
   - ライト面は印刷用スタイルと媒体資料PDF・コーポレートHPでのみ使用（LP本体は全編ダーク）
   - kicker は必ず --font-display, 12-13px, letter-spacing 0.18-0.24em, 大文字
   - 日本語の大見出しは --font-jp, font-weight 700
   - アクセント色は「1スクリーンに1〜2箇所」まで。多用しない（ミニマル原則）
   ========================================================= */