/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ハピネッツ クラブ指標ダッシュボード — デザインシステム変数
   happinets-dashboard v0.1.0
   SPEC: docs/happinets-dashboard-v0.1.0-spec.md §4
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

  /* ━━━ ハピネッツ ブランド色 ━━━ */
  --happi-navy:      #152E58;   /* プライマリ（ヘッダー・強調） */
  --happi-gold:      #C8A04C;   /* アクセント（バッジ・DP表示） */
  --happi-navy-dark: #0A1628;   /* ナビゲーション背景 */
  --happi-navy-mid:  #1E3F6F;   /* カードボーダー・セクション区切り */

  /* ━━━ デジタル庁 7色パレット（データビジュアライゼーション用） ━━━ */
  --chart-blue:       #2E75B6;   /* 主系列・メインデータ */
  --chart-lightblue:  #6AADE4;   /* 副系列 */
  --chart-cyan:       #00B0F0;   /* 比較データ */
  --chart-green:      #70AD47;   /* 増加・ポジティブ・達成 */
  --chart-orange:     #ED7D31;   /* 中間・注意 */
  --chart-red:        #C00000;   /* 減少・ネガティブ・警告 */
  --chart-gray:       #767171;   /* 補助・背景データ */

  /* ━━━ 需要ティア専用色 ━━━ */
  --tier-dp:     #C8A04C;   /* DP = ゴールド */
  --tier-3star:  #D97706;   /* ★★★ = アンバー */
  --tier-2star:  #6B7280;   /* ★★ = グレー */
  --tier-1star:  #D1D5DB;   /* ★ = ライトグレー */

  /* ━━━ 背景・サーフェス ━━━ */
  --bg-page:         #F8F9FA;
  --bg-card:         #FFFFFF;
  --bg-nav:          #152E58;
  --bg-header:       #0A1628;
  --bg-table-stripe: #F1F5F9;

  /* ━━━ テキスト ━━━ */
  --text-primary:       #111827;
  --text-secondary:     #6B7280;
  --text-on-dark:       #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.65); /* コントラスト比 ≥ 4.5:1 */
  --text-kpi:           #111827;

  /* ━━━ ボーダー・シャドウ ━━━ */
  --border-default: #E5E7EB;
  --border-card:    #D1D5DB;
  --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ━━━ ステータス色 ━━━ */
  --status-ok:    #70AD47;   /* 達成・正常 */
  --status-warn:  #ED7D31;   /* 注意 */
  --status-alert: #C00000;   /* 警告・未達 */
  --status-null:  #9CA3AF;   /* データなし「—」 */

  /* ━━━ タイポグラフィ ━━━ */
  --font-family:    'Noto Sans JP', 'BIZ UDGothic', sans-serif;
  --font-kpi-value: 700;   /* KPI数値 */
  --font-heading:   700;   /* 見出し */
  --font-body:      400;   /* 本文 */
  --font-label:     500;   /* ラベル・軸 */
  /* font-weight 300以下禁止 */

  /* ━━━ スペーシング（8pxグリッド） ━━━ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ━━━ ブレイクポイント ━━━ */
  --bp-tablet:  768px;
  --bp-desktop: 1280px;

  /* ━━━ KPIカード ━━━ */
  --kpi-accent-border: 4px solid var(--happi-navy);
  --kpi-value-size: 40px;
  --kpi-label-size: 11px;

  /* ━━━ ナビゲーション ━━━ */
  --nav-width:        220px;
  --nav-active-gold:  rgba(200, 160, 76, 0.15);
  --nav-active-border: 3px solid var(--happi-gold);

  /* ━━━ フォーカス ━━━ */
  --focus-outline: 2px solid var(--happi-gold);
}

/* ━━━ デザイン禁止事項（コメントアウトで明示） ━━━ */
/* グラデーション禁止                            */
/* 円グラフ禁止 → スタック横棒で代替             */
/* font-weight 300以下禁止                       */
/* 色のみで情報を伝えない（テキスト/アイコン必須）*/
/* カードに border 禁止 → shadow-card 使用       */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   チャート設計標準（visualization-expert 指針を組込み）
   実装は js/chart-theme.js が Chart.defaults に一括適用。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ■ チャート種選定（目的ドリブン）
     - 比較        → 縦棒/横棒（bar）
     - 時系列推移  → 折れ線（line）
     - 関係性      → 散布図（scatter）
     - 構成比      → スタック横棒（円グラフ禁止）
   ■ 明確さ: 重要な値は直接データラベル（datalabels）で示す。詰め込み過ぎない。
   ■ 正直さ: 棒グラフのy軸は必ず0始まり。基準値はしきい値線（ChartTheme.thresholds）で明示。
   ■ 簡潔さ: グリッドは極薄(6%)・x軸グリッドなし・枠線なし＝チャートジャンク除去。
   ■ アクセシビリティ: 色＋数値ラベルの二重符号化。canvasにaria-label+role=img、sr-onlyデータ表を併記。
   ■ 一貫性: 同一メトリクスは全ページ同色（有料=青/無料=赤/着券=緑/シーパス=金）。
              シーズン色は固定（ChartTheme.SEASON_COLOR）。
   ■ ツールチップ: ブランドネイビー背景・点スタイル・太字タイトル。
*/