/* ==========================================
   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: #FFF9F5;              /* 温かいオレンジ調クリーム（案3） */
  --color-bg-dark: #1B3A6B;              /* ロイヤルブルー（スクール感・信頼・明るめ） */
  --color-bg-dark-2: #12275A;            /* ディープブルー（セカンダリダーク） */
  --color-bg-orange: #F3903F;            /* オレンジ背景（CTA等） */
  --color-bg-orange-dark: #D4730A;       /* 濃いオレンジ背景 */

  /* ------------------------------------------
     アクセント（成長感・スクール感）
     ------------------------------------------ */
  --color-accent: #F3903F;               /* オレンジ統一（案3） */
  --color-accent-cyan: #FFB069;          /* 淡いオレンジ */
  --color-accent-glow: rgba(243, 144, 63, 0.2); /* オレンジグロー */

  /* ------------------------------------------
     ボーダー
     ------------------------------------------ */
  --color-border: #FFE4CC;              /* 温かいオレンジ系ボーダー（案3） */
  --color-border-dark: #1F3670;         /* ブルー系ボーダー */

  /* ------------------------------------------
     フォント
     ------------------------------------------ */
  --font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-display: 40px;
  --font-size-4xl: 64px;
  --font-size-5xl: 80px;
  --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;
}