/* ==========================================
   variables.css — CSS変数定義
   色・フォント・余白はすべてここで管理する
   ========================================== */

:root {
  /* ------------------------------------------
     イメージカラー（全担当共通・変更禁止）
     ------------------------------------------ */
  --color-primary: #F3903F;               /* オレンジ：躍動感・革新・ブランドカラー */
  --color-primary-dark: #D4730A;          /* ホバー・アクティブ時 */
  --color-primary-light: #FFB069;         /* 淡いオレンジ・背景差し色 */
  --color-primary-glow: rgba(243, 144, 63, 0.25); /* グロー・シャドウ用 */

  /* ------------------------------------------
     テキスト
     ------------------------------------------ */
  --color-text-base: #1A1A2E;
  --color-text-muted: #555566;
  --color-text-light: #AAAABC;
  --color-text-on-dark: #F0F0F0;          /* ダーク背景上のテキスト */

  /* ------------------------------------------
     背景
     ------------------------------------------ */
  --color-bg-base: #FFFFFF;
  --color-bg-soft: #F9F9FB;
  --color-bg-dark: #0A2540;              /* ヒーロー・CTAセクション等（深いネイビー） */
  --color-bg-dark-2: #0D3461;            /* カード・セカンダリダーク */

  /* ------------------------------------------
     ボーダー
     ------------------------------------------ */
  --color-border: #E5E5EB;
  --color-border-dark: #1A4A7A;

  /* ------------------------------------------
     フォント
     ------------------------------------------ */
  --font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-size-xs: 14px;   /* 極小：ラベル・バッジ・注釈（アクセシビリティ最小値） */
  --font-size-sm: 16px;   /* 小：補足テキスト・キャッチコピー（base と同値・意図的に小さく使う場面向け） */
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-display: 40px; /* セクション大見出し（2xlと3xlの中間） */
  --font-size-4xl: 64px;  /* 大見出し（PC） */
  --font-size-5xl: 80px;  /* 大見出し（Wide） */
  --line-height-base: 1.8;
  --line-height-tight: 1.4;

  /* ------------------------------------------
     余白
     ------------------------------------------ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ------------------------------------------
     角丸
     ------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ------------------------------------------
     トランジション
     ------------------------------------------ */
  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;

  /* ------------------------------------------
     シャドウ
     ------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);

  /* ------------------------------------------
     レイアウト
     ------------------------------------------ */
  --container-max: 1200px;
  --header-height: 72px;
}