/* CSS変数定義 */
:root {
  /* 基本カラーパレット */
  --color-black: #1c1b1f; /* メインブラック */
  --color-white: #ffffff; /* メインホワイト */
  --color-dark-gray: #49454f; /* ダークグレー */
  --color-gray: #79747e; /* グレー */
  --color-gray-dark: #4a4a4a; /* 濃いグレー（カテゴリカード用） */
  --color-bg-section: #e9ecef; /* セクション背景 */
  --color-border: #d0d4d3; /* ボーダー */
  --color-pink: #d32774; /* アクセントピンク */
  --color-purple: #38115b; /* アクセント紫 */
  /* PREP法カラーシステム */
  --color-prep-point1: #ffc107; /* Point1（結論1） */
  --color-prep-reason: #28a745; /* Reason（理由） */
  --color-prep-example: #007bff; /* Example（具体例） */
  --color-prep-point2: #dc3545; /* Point2（結論2） */
  --color-prep-toggle: #891c68; /* PREPトグル専用色 */
  /* PREP法背景色（透明度付き） */
  --color-prep-point1-bg: rgba(255, 193, 7, 0.2);
  --color-prep-reason-bg: rgba(40, 167, 69, 0.2);
  --color-prep-example-bg: rgba(0, 123, 255, 0.2);
  --color-prep-point2-bg: rgba(220, 53, 69, 0.2);
  /* 透明度付きカラー */
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-overlay: rgba(0, 0, 0, 0.5);
  /* グラデーション */
  --gradient-primary: linear-gradient(135deg, var(--color-purple) 0%, var(--color-pink) 100%);
  /* セマンティックカラー（基本カラーへの参照） */
  --text-primary: var(--color-black);
  --text-secondary: var(--color-dark-gray);
  --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Noto Sans JP フォントウェイト最適化 */
  --font-weight-regular: 400; /* レギュラー（本文） */
  --font-weight-medium: 500; /* ミディアム（強調） */
  --font-weight-semibold: 600; /* セミボールド（見出し） */
  --font-weight-bold: 700; /* ボールド（大見出し） */
  /* 統一フォントサイズ体系 - 5種類 + 特別用途 */
  --font-size-ss: 0.75rem; /* SS: 極小テキスト（キャプション、フッター等） */
  --font-size-s: 0.875rem; /* S: 小さいテキスト（補足情報、メタ情報等） */
  --font-size-m: 1rem; /* M: 基本テキスト（本文、標準テキスト） */
  --font-size-l: 1.125rem; /* L: 大きいテキスト（小見出し、強調テキスト） */
  --font-size-ll: 1.5rem; /* LL: 見出し（セクション見出し） */
  /* 特別用途（ヒーローイメージ等） */
  --font-size-hero: 3rem; /* ヒーローイメージ専用 */
  --font-size-title: 2rem; /* メインタイトル（h1, h2） */
  /* 統一行間体系 - 4種類 + 特別用途 */
  --line-height-layout: 1; /* レイアウト用（タイトル、ボタン等） */
  --line-height-narrow: 1.5; /* 狭い行間（見出し、キャプション等） */
  --line-height-base: 1.75; /* ベース行間（本文、標準テキスト） */
  --line-height-wide: 2; /* 広い行間（読みやすさ重視の長文等） */
  --line-height-limited: 1.35; /* タイトル専用（--font-size-title使用時） */
  /* 統一余白体系 - 12種類 */
  --spacing-4: 0.25rem; /* 4px */
  --spacing-8: 0.5rem; /* 8px */
  --spacing-12: 0.75rem; /* 12px */
  --spacing-16: 1rem; /* 16px */
  --spacing-20: 1.25rem; /* 20px */
  --spacing-24: 1.5rem; /* 24px */
  --spacing-32: 2rem; /* 32px */
  --spacing-48: 3rem; /* 48px */
  --spacing-64: 4rem; /* 64px */
  --spacing-96: 6rem; /* 96px */
  --spacing-160: 10rem; /* 160px */
  --spacing-192: 12rem; /* 192px */
  /* Border Radius */
  --border-radius: 1rem;
  --border-radius-sm: 0.5rem;
  --border-radius-lg: 1.5rem;
  --border-radius-xl: 2rem;
  --border-radius-full: 9999px;
  /* Elevation - Light Shadows */
  --elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 1px rgba(0, 0, 0, 0.05);
  --elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 2px rgba(0, 0, 0, 0.08);
  --elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
}