/* タテレポ モックアップ — デザイントークン（全ページ共通・唯一の定義元）
   モックの方向性: 白〜淡いグレー、青のアクセント、余白、角丸カード、控えめな影（PRD 6.1） */
:root {
  /* 色 */
  --color-bg: #f4f6fa;            /* ページ背景 */
  --color-surface: #ffffff;       /* カード */
  --color-surface-2: #f8fafc;     /* サブ面・入力欄背景 */
  --color-border: #e3e8ef;
  --color-border-strong: #cbd5e1;
  --color-text: #1b2431;
  --color-text-2: #55637a;
  --color-text-3: #8a97ad;
  --color-primary: #2f6fed;
  --color-primary-hover: #245fd6;
  --color-primary-soft: #e8f0ff;
  --color-primary-soft-2: #d5e3ff;
  --color-on-primary: #ffffff;

  /* 等級 A〜D（PRD 8.5）— 高いほど劣化リスクが大きい */
  --grade-a: #1f9d5b; --grade-a-soft: #e6f6ec;
  --grade-b: #2f6fed; --grade-b-soft: #e8f0ff;
  --grade-c: #e8961e; --grade-c-soft: #fff4e3;
  --grade-d: #d93a3a; --grade-d-soft: #fdeaea;

  /* 優先度 P1〜P4（PRD 8.8） */
  --p1: #d93a3a; --p1-soft: #fdeaea;
  --p2: #e8961e; --p2-soft: #fff4e3;
  --p3: #2f6fed; --p3-soft: #e8f0ff;
  --p4: #1f9d5b; --p4-soft: #e6f6ec;

  /* 状態色 */
  --color-success: #1f9d5b; --color-success-soft: #e6f6ec;
  --color-warning: #e8961e; --color-warning-soft: #fff4e3;
  --color-danger: #d93a3a;  --color-danger-soft: #fdeaea;
  --color-info: #2f6fed;    --color-info-soft: #e8f0ff;
  --color-neutral: #6b7a90; --color-neutral-soft: #eef2f7;

  /* 角丸・影 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 36, 49, 0.04), 0 1px 6px rgba(27, 36, 49, 0.04);
  --shadow-md: 0 4px 16px rgba(27, 36, 49, 0.07);
  --shadow-lg: 0 12px 36px rgba(27, 36, 49, 0.12);

  /* 文字 */
  --font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px;
  --leading: 1.6;

  /* 余白 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* レイアウト */
  --sidebar-w: 224px;
  --header-h: 60px;
  --mobile-header-h: 56px;
  --tabbar-h: 64px;
  --content-max: 1180px;
  --phone-w: 390px;
  --phone-h: 844px;
}