/* ================================================================
   variables.css — デザイントークン（色・サイズ・シャドウ）
   ================================================================ */

:root {
  /* --- 背景色 --- */
  --bg:       #050a14;
  --bg2:      #080f1e;
  --bg-card:  #0d1829;   /* カード・モーダル内背景 */
  --bg-elevated: #111f35; /* 浮き上がり要素 */

  /* --- サーフェス（surface = bg-cardの旧名。後方互換のため残す） --- */
  --surface:  #0d1829;
  --surface2: #111f35;

  /* --- アクセントカラー --- */
  --accent:  #00d4ff;   /* シアン：メイン */
  --accent2: #0066ff;   /* ブルー：グラデ終端 */
  --accent3: #7b2fff;   /* パープル：装飾 */

  /* --- 文字色 --- */
  --text:       #e8f4ff;  /* 主テキスト */
  --text-dim:   #7a9abc;  /* サブテキスト */
  --text-muted: #3a5a7a;  /* 補足・ラベル */

  /* --- 境界線 --- */
  --border:        rgba(0, 212, 255, 0.15);
  --border-subtle: rgba(0, 212, 255, 0.08);

  /* --- グロー（発光シャドウ） --- */
  --glow:  0 0 20px rgba(0, 212, 255, 0.4);
  --glow2: 0 0 40px rgba(0, 212, 255, 0.15);

  /* --- レイアウトサイズ --- */
  --nav-h:    64px;
  --player-h: 72px;
  --header-h: 56px;
}