/* ============================================================
   PVMarket Design Tokens v1（P0-6）
   ------------------------------------------------------------
   唯一の真実：色・余白・角丸・影・文字階層はここからのみ参照する。
   命名空間は --pv-*（既存 style.css 変数との衝突回避）。
   規約（CLAUDE.md にも記載）:
     1. 新規テンプレートで <style> ブロック禁止 — tokens + 共通クラスを使う
     2. 新しい色 hex を直接書かない — 必ず var(--pv-*)
     3. ページ固有 CSS が必要な場合は static/pages/<page>.css に置く
   出典: dashboard v9 の視覚言語（薄荷グリーン系）を全站標準に昇格。
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --pv-green-700: #00734f;  /* ink 級の濃緑（見出し強調・active 文字） */
  --pv-green-600: #00956f;  /* ブランド主色（ボタン・リンク・強調） */
  --pv-green-500: #00a37a;  /* hover / グラデ中間 */
  --pv-green-400: #00c896;  /* アクセント（グラフ・バッジ） */
  --pv-green-100: #a7f3d0;  /* ボーダー・淡い塗り */
  --pv-green-50:  #ecfdf5;  /* 淡背景（active 背景・成功背景） */

  /* ---- Neutrals ---- */
  --pv-ink:      #0f172a;   /* 本文見出し */
  --pv-ink-2:    #374151;   /* 本文 */
  --pv-muted:    #5b6675;   /* 補足・ラベル */
  --pv-border:   #e6ebf0;   /* 標準ボーダー */
  --pv-bg:       #f6f9f8;   /* アプリ背景 */
  --pv-surface:  #ffffff;   /* カード面 */

  /* ---- Semantic ---- */
  --pv-warn:     #d97706;
  --pv-warn-bg:  #fffbeb;
  --pv-danger:   #ef4444;
  --pv-danger-bg:#fef2f2;
  --pv-info:     #475569;
  --pv-info-bg:  #f1f5f9;

  /* ---- Typography ---- */
  --pv-font: 'Noto Sans JP', -apple-system, 'Segoe UI', sans-serif;
  --pv-font-num: 'DM Sans', 'Inter', system-ui, sans-serif; /* 数値・金額 */
  --pv-fs-xs: 11px;
  --pv-fs-sm: 12.5px;
  --pv-fs-md: 14px;
  --pv-fs-lg: 16px;
  --pv-fs-xl: 20px;
  --pv-fs-2xl: 26px;

  /* ---- Spacing（4px 基）---- */
  --pv-sp-1: 4px;
  --pv-sp-2: 8px;
  --pv-sp-3: 12px;
  --pv-sp-4: 16px;
  --pv-sp-5: 20px;
  --pv-sp-6: 24px;
  --pv-sp-8: 32px;

  /* ---- Radius / Shadow ---- */
  --pv-radius-sm: 8px;
  --pv-radius: 12px;
  --pv-radius-lg: 16px;
  --pv-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --pv-shadow: 0 4px 14px rgba(15, 23, 42, .07);
}

/* ============================================================
   共通コンポーネント（唯一実装）
   ============================================================ */

/* ---- ボタン ---- */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .55rem 1.05rem; border-radius: 10px;
  font-family: var(--pv-font); font-size: var(--pv-fs-sm); font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.pv-btn-primary { background: var(--pv-green-600); color: #fff; }
/* !important: app-light-theme の全リンク着色規則（特異性 ~0,5,3）対策。P1 で当該規則を退役予定 */
a.pv-btn-primary { color: #fff !important; }
.pv-btn-primary:hover { background: var(--pv-green-500); }
.pv-btn-outline { background: var(--pv-surface); color: var(--pv-ink-2); border-color: var(--pv-border); }
.pv-btn-outline:hover { border-color: var(--pv-green-100); color: var(--pv-green-700); }
.pv-btn-danger { background: var(--pv-danger); color: #fff; }
.pv-btn-sm { padding: .35rem .7rem; font-size: var(--pv-fs-xs); }

/* ---- カード ---- */
.pv-card {
  background: var(--pv-surface); border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius); padding: var(--pv-sp-5) var(--pv-sp-6);
}
.pv-card-title { font-size: var(--pv-fs-md); font-weight: 800; color: var(--pv-ink); margin: 0 0 var(--pv-sp-3); }

/* ---- バッジ ---- */
.pv-badge {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: var(--pv-fs-xs); font-weight: 800; white-space: nowrap;
}
.pv-badge-success { background: var(--pv-green-50); color: var(--pv-green-700); }
.pv-badge-warn { background: var(--pv-warn-bg); color: var(--pv-warn); }
.pv-badge-danger { background: var(--pv-danger-bg); color: var(--pv-danger); }
.pv-badge-info { background: var(--pv-info-bg); color: var(--pv-info); }

/* ---- テーブル ---- */
.pv-table { width: 100%; border-collapse: collapse; font-size: var(--pv-fs-sm); }
.pv-table th {
  text-align: left; padding: .55rem .75rem; color: var(--pv-muted);
  font-size: var(--pv-fs-xs); font-weight: 700; border-bottom: 1px solid var(--pv-border);
}
.pv-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--pv-border); color: var(--pv-ink-2); }
.pv-table tr:hover td { background: var(--pv-bg); }

/* ---- 空状態 ---- */
.pv-empty {
  text-align: center; padding: var(--pv-sp-8) var(--pv-sp-6);
  border: 1px dashed var(--pv-border); border-radius: var(--pv-radius-lg);
  color: var(--pv-muted); background: var(--pv-surface);
}
.pv-empty-title { font-size: var(--pv-fs-lg); font-weight: 800; color: var(--pv-ink); margin-bottom: var(--pv-sp-2); }

/* ---- 通知バナー ---- */
.pv-notice {
  border: 1px solid var(--pv-border); border-radius: var(--pv-radius);
  padding: var(--pv-sp-3) var(--pv-sp-4); font-size: var(--pv-fs-sm);
}
.pv-notice-warn { border-color: #f0d38b; background: #fff8e6; color: var(--pv-ink-2); }
.pv-notice-success { border-color: var(--pv-green-100); background: var(--pv-green-50); color: var(--pv-green-700); }
.pv-notice-danger { border-color: #f6c8c8; background: var(--pv-danger-bg); color: var(--pv-danger); }