:root {
  --primary: #4F46E5; /* Indigo 600 */
  --primary-hover: #4338CA;
  --secondary: #EC4899; /* Pink 500 */
  --secondary-hover: #DB2777;
  --accent: #F59E0B; /* Amber 500 */

  --bg-color: #F8FAFC;
  --bg-muted: #F1F5F9; /* 追加: 補足・免責事項用背景 */
  --bg-dark: #1E293B; /* 追加: 抽選画面などの暗色エリア用 */
  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-placeholder: #94A3B8; /* 追加: プレースホルダー用 */
  --card-bg: #FFFFFF;
  --border-color: #E2E8F0;

  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --warning-bg: #FFFBEB; /* 追加: 警告・通知用背景 */
  --warning-border: #FEF3C7;
  --warning-text: #92400E;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --font-sans: 'Inter', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0F172A;
    --bg-muted: #1E293B; /* 追加: ダークモード用補足背景 */
    --bg-dark: #0F172A; /* 追加: ダークモード用暗色エリア */
    --text-main: #F8FAFC;
    --text-muted: #BFCAD9; /* 修正: 視認性向上のため少し明るく */
    --text-placeholder: #64748B; /* 修正: ダーク背景用 */
    --card-bg: #1E293B;
    --border-color: #475569; /* 修正: 枠線を少し明るく */
    
    --warning-bg: #422006; /* 追加: ダークモード用警告背景 */
    --warning-border: #713f12;
    --warning-text: #fef3c7;
  }
}