/*
 * CSS Variables
 * くるま買取ケイヴィレッジ
 * カラー、フォント、スペーシングなどの変数定義
 */

:root {
  /* ========================================
     カラー（信頼感重視・ブルー系）
     ======================================== */

  /* プライマリカラー（メイン） - オレンジ */
  --primary-color: #FF6B35;
  --primary-dark: #E85A2B;
  --primary-light: #FFE5DD;
  --primary-gradient: linear-gradient(135deg, #FF6B35 0%, #E85A2B 100%);
  --primary-gradient-rich: linear-gradient(135deg, #FF8C5E 0%, #FF6B35 50%, #E85A2B 100%);
  --primary-gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);

  /* セカンダリカラー（アクセント） - ネイビー */
  --secondary-color: #004E89;
  --secondary-dark: #003D6B;
  --secondary-light: #D4E6F1;
  --secondary-gradient: linear-gradient(135deg, #1A5F8F 0%, #004E89 50%, #003D6B 100%);

  /* テキストカラー */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-light: #9ca3af;
  --text-white: #ffffff;

  /* 背景カラー */
  --bg-white: #ffffff;
  --bg-gray: #f3f4f6;
  --bg-gray-dark: #e5e7eb;
  --bg-dark: #111827;

  /* ステータスカラー */
  --success-color: #10b981;
  --error-color: #ef4444;
  --warning-color: #f59e0b;
  --info-color: #3b82f6;

  /* サービスカラー */
  --service-kaitori: #2563eb;
  --service-shinsha: #10b981;
  --service-chuko: #f59e0b;
  --service-shaken: #6366f1;
  --service-bankin: #ef4444;
  --service-lease: #8b5cf6;

  /* ========================================
     フォント
     ======================================== */

  /* フォントファミリー */
  --font-base: 'LINE Seed JP_OTF', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;

  /* フォントサイズ */
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-base: 17px;
  --font-size-lg: 19px;
  --font-size-xl: 22px;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 56px;

  /* フォントウェイト */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* 行間 */
  --line-height-tight: 1.4;
  --line-height-base: 1.75;
  --line-height-relaxed: 1.85;
  --line-height-loose: 2.0;

  /* 文字間 */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-base: 0;
  --letter-spacing-wide: 0.05em;

  /* ========================================
     スペーシング
     ======================================== */

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

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

  --container-max-width: 1200px;
  --container-padding: 20px;

  /* ========================================
     ボーダー・角丸
     ======================================== */

  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  --border-width: 1px;
  --border-color: #e5e7eb;

  /* ========================================
     シャドウ（リッチな影）
     ======================================== */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* カラーシャドウ（ブルー系） */
  --shadow-primary: 0 10px 25px -5px rgba(37, 99, 235, 0.2);
  --shadow-primary-lg: 0 20px 40px -10px rgba(37, 99, 235, 0.3);

  /* 内側の影（立体感） */
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-inner-lg: inset 0 4px 8px 0 rgb(0 0 0 / 0.1);

  /* ========================================
     トランジション
     ======================================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* ========================================
     z-index
     ======================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   レスポンシブ調整（SP）
   ======================================== */

@media (max-width: 768px) {
  :root {
    /* フォントサイズを少し小さく */
    --font-size-base: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    --font-size-5xl: 32px;

    /* スペーシングを少し狭く */
    --spacing-md: 20px;
    --spacing-lg: 28px;
    --spacing-xl: 40px;
    --spacing-2xl: 56px;
    --spacing-3xl: 80px;

    /* コンテナパディングを小さく */
    --container-padding: 16px;
  }
}