/* variables.css - CSS変数定義（デザインシステム セクション4準拠） */

:root {
  /* === プライマリカラー（Blue Gray） === */
  --color-primary-700: #455A64;
  --color-primary-500: #607D8B;
  --color-primary-300: #90A4AE;
  --color-primary-100: #CFD8DC;
  --color-primary-50: #ECEFF1;

  /* === アクセントカラー（Warm Accent） === */
  --color-accent: #A85740;
  --color-accent-hover: #8F4A35;
  --color-accent-light: #FFF0EC;

  /* === ベースカラー === */
  --color-bg: #FAFAF5;
  --color-white: #FFFFFF;
  --color-text: #37474F;
  --color-text-secondary: #78909C;
  --color-border: #E0E0E0;

  /* === セマンティックカラー === */
  --color-success: #66BB6A;
  --color-error: #EF5350;
  --color-warning: #FFA726;
  --color-info: #42A5F5;

  /* === ブランドカラー（LINE 公式） === */
  --color-line: #06C755;
  --color-line-hover: #05B048;
  --color-line-bg: #F0FBF3;

  /* === タイポグラフィ === */
  --font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  --font-size-h1: 32px;
  --font-size-h2: 26px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption: 12px;

  /* === スペーシング（4px基準） === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* === レイアウト === */
  --content-max-width: 1200px;
  --content-max-width-pc: 1024px;
  --header-height: 72px;
  --header-height-sp: 60px;

  /* === 角丸 === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 30px;

  /* === シャドウ === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* === トランジション === */
  --transition: all 0.3s ease;
}