/* ═══════════════════════════════════════════════════════════════════════
   ⚠️  Ripple LP デザイントークン定義ファイル — 唯一の真実の源
   ───────────────────────────────────────────────────────────────────────

   【重要】タイポグラフィ・色・スペーシングは すべてここで定義 します。
   他の CSS ファイルでは 直接値を書かず、var(--xxx-xxx) で参照してください。

     letter-spacing → --ls-* (7階層・必須)
     line-height    → --lh-* (7階層・必須)
     font-size      → --fs-* (15階層・必須)
     font-weight    → --fw-* (5階層・必須)

   ❌ font-size: 18px;
   ✅ font-size: var(--fs-xl);

   ────────────────────────────────────────────────────
   詳細ガイド：プロジェクトルートの DESIGN_SYSTEM.md
   違反チェック：check-typography.ps1 を実行
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CTA確定色 ──────────────────── */
  --cta-form:      #E8A598;   /* 旧: #FF8F4A（オレンジ）→ コーラル */
  --cta-form-drk:  #D4887A;   /* 旧: #E07030 → ディープコーラル */
  --cta-line:      #06C755;
  --cta-line-drk:  #05A847;

  /* ── Rippleブランド ─────────────── */
  --primary:       #E8A598;   /* 旧: #00B4D8（ターコイズ）→ ソフトコーラル */
  --primary-drk:   #D4887A;   /* 旧: #0077B6 → ディープコーラル */
  --accent:        #C8A882;   /* 旧: #FF6B9D（ピンク）→ シャンパンゴールド */
  --accent-light:  rgba(232,165,152,0.08);  /* コーラル薄色 */
  --text:          #3D3D3D;       /* チャコールグレー（柔らか黒・見出し・主要テキスト用） */
  --text-sub:      #8F8F8F;       /* ミドルグレー — 補足・キャプション */
  --text-body:     #3D3D3D;       /* 本文段落専用 */
  --white:         #FFFFFF;

  /* ── セクション背景 ─────────────── */
  --bg-white:      #FFFFFF;
  --bg1:           #FAF8F5;   /* 旧: #EBF3FA（薄ブルー）→ オフホワイト */
  --bg2:           #F5F0EB;   /* 旧: #FCEEF4（薄ピンク）→ 薄ベージュ */
  --bg-pale-blue:  #FAF8F5;   /* → bg1 に統一 */
  --bg-pale-pink:  #F5F0EB;   /* → bg2 に統一 */
  --border:        #EBE0D8;   /* 旧: #E4EAF0 → ペールローズ */
  --color-deco:    #EBE0D8;   /* 波紋ライン専用（新規追加） */

  /* ── コーラル派生（強調・hover・section emphasis） ──
     旧名 --accent-* はピンク用だったが、ブランド統一のためコーラル系に置換 */
  --accent-deep:    #D4887A;   /* deep coral（強調・section eyebrow など） */
  --accent-darker:  #B36A5C;   /* deepest coral（最強強調） */
  --accent-mid:     #E8A598;   /* mid coral（中間トーン・--primary と同値） */
  --accent-soft:    #F0B5A8;   /* soft coral（柔らか強調） */
  --accent-pale:    #F5DAD0;   /* pale coral background */

  /* ── コーラル派生（旧名 --primary-* / 旧色ターコイズ） ──
     ブランドカラー変更のためコーラル系に統一 */
  --primary-deep:   #D4887A;   /* darker coral */
  --primary-mid:    #E8A598;   /* mid coral（--primary と同値） */
  --primary-darker: #B36A5C;   /* darkest coral */
  --primary-light:  #F5C5BA;   /* light coral */

  /* ── グレースケール（8階層） ───── */
  --gray-100:       #f5f5f5;
  --gray-200:       #e0e0e0;
  --gray-300:       #ccc;
  --gray-400:       #aaa;
  --gray-500:       #888;
  --gray-600:       #666;
  --gray-700:       #555;
  --gray-900:       #111;

  /* ── ステータス色 ─────────────── */
  --danger:         #c66;       /* light danger red */
  --danger-deep:    #b94040;    /* deep danger red */

  /* ── アクセント色（ゴールド・グリーン）──
     旧オレンジは全廃（仕様書）→ ゴールド系で差別化（報酬数字・王冠アイコン等） */
  --gold:           #C8A882;   /* シャンパンゴールド（--accent と同値） */
  --orange-deep:    #B8966F;   /* 旧: #e86a00 → ディープゴールド */
  --orange-mid:     #C8A882;   /* 旧: #E8722A → champagne gold（--accent と同値） */
  --orange-light:   #D4B996;   /* 旧: #F5A623 → mid gold */
  --orange-pale:    #E8D5B5;   /* 旧: #FFB880 → pale gold */
  --green-fresh:    #3ab54a;
  --green-deep:     #3a9a20;
  --green-darker:   #1e6e2e;
  --green-darkest:  #0B4A2A;
  --green-light:    #80DCA0;

  /* ── 深色テーマ（装飾） ─────────── */
  --theme-navy:     #0D1B4B;
  --theme-blue:     #1a3a7a;
  --theme-navy-light: #1a2540;

  /* ── 強調マーカー色（Pokewaku参考） ── */
  --marker-yellow:  #FFEB00;   /* 重要キーワード強調マーカー（旧） */
  --marker-yellow-soft: #FFF566;
  --marker-pink-pale: #F5DAD0;   /* 旧: #FFE0E8 → pale coral */
  --marker-green:      #A8E682;   /* 強調マーカー（緑・濃いめ） */
  --marker-green-soft: #CDEFB1;   /* 強調マーカー（緑・薄め・本文用） */

  /* ── レイアウト ──────────────────── */
  --col-w:         440px;    /* SP用 .sec__inner max-width（PCは responsive.css の --sidebar-w で制御） */
  --header-h:      56px;
  --floating-h:    60px;

  /* ── タイポグラフィ ──────────────── */
  --font:          'Noto Sans JP', sans-serif;                              /* 日本語本文 */
  --font-heading:  'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;        /* 日本語見出し（新） */
  --font-num:      'DM Sans', 'Noto Sans JP', sans-serif;                  /* 英語・数値（新） */

  /* ── Letter Spacing Tokens（7階層・SE 引き継ぎ用統一トークン） ──
     役割別に1つの値を割り当て、全 CSS からこのトークンを参照する。
     新たな letter-spacing を書く際は必ずこの 7 種類から選ぶこと。 */
  --ls-tight:      -0.02em;   /* 大きな数字・金額・特大タイトル（視認性のため詰める） */
  --ls-snug:       -0.01em;   /* 中サイズ数字・密見出し */
  --ls-default:     0;        /* デフォルト（数字・記号・通常テキスト） */
  --ls-body:        0.02em;   /* 本文段落（pokewaku.com 完全準拠） */
  --ls-heading:     0.05em;   /* 見出し（H2/H3）・ボタン文言 */
  --ls-label:       0.1em;    /* バッジ・カテゴリラベル・補助テキスト */
  --ls-eyebrow:     0.15em;   /* Eyebrow（英字 ALL CAPS 装飾見出し） */

  /* ── Line Height Tokens（7階層・SE 引き継ぎ用統一トークン） ──
     役割別に1つの値を割り当て、全 CSS からこのトークンを参照する。
     新たな line-height を書く際は必ずこの 7 種類から選ぶこと。 */
  --lh-flat:        1;        /* アイコン・絵文字・大数字（余白ゼロ） */
  --lh-tight:       1.2;      /* 数字・バッジ・ラベル（密集） */
  --lh-snug:        1.4;      /* ボタン・タブ文言 */
  --lh-heading:     1.5;      /* 見出し（H1〜H3） */
  --lh-normal:      1.7;      /* 補助テキスト・キャプション・body デフォルト */
  --lh-relaxed:     1.85;     /* 短い本文・カード本文 */
  --lh-loose:       2.2;      /* 長い本文（pokewaku.com 準拠） */

  /* ── Font Size Tokens（15階層・SE 引き継ぎ用統一トークン） ──
     役割別の連続スケール。新たな font-size を書く際は必ずこの中から選ぶこと。
     特殊用途（em/rem/vw）と 5-7px の装飾文字はトークン外（既存維持）。 */
  --fs-3xs:         9px;      /* badges・store labels */
  --fs-2xs:         11px;     /* eyebrow・小ラベル・注記 */
  --fs-xs:          12px;     /* 補助テキスト・キャプション */
  --fs-sm:          13px;     /* 小本文 */
  --fs-base:        14px;     /* メイン本文・デフォルト */
  --fs-md:          15px;     /* 大本文・カード本文 */
  --fs-lg:          16px;     /* 強調補助・小見出し */
  --fs-xl:          18px;     /* 小見出し（H4〜H5） */
  --fs-2xl:         22px;     /* 中見出し（H2/H3 SP） */
  --fs-3xl:         26px;     /* 大見出し（H2 PC） */
  --fs-4xl:         32px;     /* 特大見出し・中数字 */
  --fs-5xl:         46px;     /* FV見出し */
  --fs-num-md:      48px;     /* 中サイズ数字 display */
  --fs-num-lg:      56px;     /* 大サイズ数字 display */
  --fs-num-xl:      68px;     /* 特大数字 display */

  /* ── Font Weight Tokens（5階層・SE 引き継ぎ用統一トークン） ──
     役割別の標準ウェイト。新たな font-weight を書く際は必ずこの中から選ぶこと。 */
  --fw-light:       350;      /* pokewaku.com 化用本文ウェイト（Variable） */
  --fw-regular:     400;      /* デフォルト */
  --fw-medium:      500;      /* (使用最小限) */
  --fw-bold:        700;      /* 強調・見出し */
  --fw-black:       900;      /* 最重要見出し・特大数字 */

  /* ── ボタン形状 ─────────────────── */
  --btn-r:         2.5rem;

  /* ── ユーティリティ ─────────────── */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --section-py:    56px;
  --section-px:    28px;
  --transition:    0.25s ease;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.13);
}