/**
 * CSS変数定義
 * design-principles.mdに基づく
 */

:root {
  /* ========================================
     カラーパレット
     ======================================== */

  /* メインカラー - ロイヤルブルー */
  --color-primary: #0051BD;
  --color-primary-light: #0066E6;
  --color-primary-dark: #003D94;

  /* アクセントカラー - エナジーオレンジ */
  --color-accent: #FF6B35;
  --color-accent-secondary: #FF8C42;

  /* セカンダリーカラー */
  --color-secondary: #0891b2;
  --color-secondary-light: #06b6d4;
  --color-secondary-dark: #0e7490;

  /* ニュートラルカラー */
  --color-white: #FFFFFF;
  --color-light-gray: #F5F7FA;
  --color-medium-gray: #8B95A5;
  --color-dark-gray: #2C3E50;
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-background: #F5F7FA;

  /* グレースケール拡張 */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #8B95A5;
  --color-gray-600: #6B7280;
  --color-gray-700: #4B5563;
  --color-gray-800: #374151;
  --color-gray-900: #2C3E50;

  /* セマンティックカラー */
  --color-success: #28A745;
  --color-warning: #FFC107;
  --color-error: #DC3545;
  --color-info: #3b82f6;

  /* グラデーション */
  --gradient-primary: linear-gradient(135deg, #0051BD 0%, #003D94 100%);
  --gradient-accent: linear-gradient(135deg, #00C9A7 0%, #00B8D4 100%);
  --gradient-warm: linear-gradient(135deg, #FFC107 0%, #DC3545 100%);
  --gradient-hero: linear-gradient(180deg, rgba(0, 81, 189, 0.05) 0%, rgba(0, 81, 189, 0.02) 100%);

  /* ========================================
     タイポグラフィ
     ======================================== */

  /* フォントファミリー */
  --font-family-ja: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', 'Meiryo', sans-serif;
  --font-family-en: 'Inter', 'Poppins', sans-serif;

  /* フォントサイズ - デザイン原則準拠 */
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 28px;
  --font-size-h4: 24px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-button: 18px;

  /* フォントウェイト */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 行間 - デザイン原則準拠 */
  --line-height-heading: 1.2;
  --line-height-body: 1.7;

  /* レタースペーシング */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* ========================================
     スペーシング - 8pt Grid
     ======================================== */

  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 48px;
  --spacing-xl: 64px;
  --spacing-xxl: 96px;

  /* ========================================
     レイアウト
     ======================================== */

  --max-width: 1200px;
  --padding-horizontal-mobile: 24px;
  --padding-horizontal-tablet: 48px;
  --padding-horizontal-desktop: 48px;

  /* ========================================
     ブレークポイント
     ======================================== */

  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* ========================================
     UIコンポーネント
     ======================================== */

  /* ボーダーラジアス - デザイン原則準拠 */
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-input: 6px;

  /* シャドウ - NRI風の極めて薄い影 */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* トランジション */
  --transition-fast: 200ms ease-in-out;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 600ms ease-out;

  /* Z-index */
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

/* ========================================
   レスポンシブ用カスタムプロパティ
   ======================================== */

@media (max-width: 767px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body: 14px;
    --font-size-caption: 12px;
    --font-size-button: 16px;
  }
}