/* ============================================
   CSS変数 - モダンインディゴ系カラーパレット
   ============================================ */

:root {
  /* ライトモード（デフォルト） */
  --bg-main: #FFFFFF;
  --bg-card: #F8F9FA;
  --bg-card-elevated: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;

  --text-main: #111827;
  --text-sub: #6B7280;
  --text-mute: #9CA3AF;

  --accent: #4F46E5;
  --accent-light: #EEF2FF;
  --accent-hover: #4338CA;

  /* 意味色 */
  --profit: #059669;
  --loss: #DC2626;
  --warning: #F59E0B;
  --error: #EF4444;
  --success: #10B981;
  --info: #3B82F6;

  /* ランクバッジ */
  --rank-a-bg: #4F46E5;
  --rank-a-text: #FFFFFF;
  --rank-b-bg: #9333EA;
  --rank-b-text: #FFFFFF;
  --rank-c-bg: #6B7280;
  --rank-c-text: #FFFFFF;

  /* シャドウ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* スペーシング */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* 半径 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* タイポグラフィ */
  --font-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-base: 17px; /* iOS標準 */
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  /* レイアウト */
  --tab-nav-height: 64px;
  --header-height: 56px;
  --tap-min: 44px; /* iOS最小タップ領域 */

  /* セーフエリア（iPhoneノッチ・ホームバー対応） */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
}

/* ダークモード（iPhone設定に自動追従） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #0F172A;
    --bg-card: #1E293B;
    --bg-card-elevated: #273449;
    --border: #334155;
    --border-strong: #475569;

    --text-main: #F1F5F9;
    --text-sub: #94A3B8;
    --text-mute: #64748B;

    --accent: #818CF8;
    --accent-light: #1E1B4B;
    --accent-hover: #A5B4FC;

    --profit: #34D399;
    --loss: #F87171;
    --warning: #FBBF24;
    --error: #F87171;
    --success: #34D399;
    --info: #60A5FA;

    --rank-a-bg: #818CF8;
    --rank-a-text: #0F172A;
    --rank-b-bg: #C084FC;
    --rank-b-text: #0F172A;
    --rank-c-bg: #94A3B8;
    --rank-c-text: #0F172A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

/* 手動でテーマ強制（Phase D で設定画面から切り替え可能にする） */
:root[data-theme="light"] {
  --bg-main: #FFFFFF;
  --bg-card: #F8F9FA;
  --bg-card-elevated: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text-main: #111827;
  --text-sub: #6B7280;
  --text-mute: #9CA3AF;
  --accent: #4F46E5;
  --accent-light: #EEF2FF;
  --accent-hover: #4338CA;
  --profit: #059669;
  --loss: #DC2626;
  --warning: #F59E0B;
  --error: #EF4444;
  --success: #10B981;
  --info: #3B82F6;
  --rank-a-bg: #4F46E5;
  --rank-a-text: #FFFFFF;
  --rank-b-bg: #9333EA;
  --rank-b-text: #FFFFFF;
  --rank-c-bg: #6B7280;
  --rank-c-text: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] {
  --bg-main: #0F172A;
  --bg-card: #1E293B;
  --bg-card-elevated: #273449;
  --border: #334155;
  --border-strong: #475569;
  --text-main: #F1F5F9;
  --text-sub: #94A3B8;
  --text-mute: #64748B;
  --accent: #818CF8;
  --accent-light: #1E1B4B;
  --accent-hover: #A5B4FC;
  --profit: #34D399;
  --loss: #F87171;
  --warning: #FBBF24;
  --error: #F87171;
  --success: #34D399;
  --info: #60A5FA;
  --rank-a-bg: #818CF8;
  --rank-a-text: #0F172A;
  --rank-b-bg: #C084FC;
  --rank-b-text: #0F172A;
  --rank-c-bg: #94A3B8;
  --rank-c-text: #0F172A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
}