/* 
 * 警備タップ - CSS変数定義
 * 既存サイトと100%同一の色・サイズ定義
 */

:root {
  /* LINE ブランドカラー（正確な値） */
  --line-green: #06C755;
  --line-green-dark: #05a447;
  --line-green-light: #7fe0ab;
  
  /* Tailwind CSS互換のカラーパレット */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  --white: #ffffff;
  --black: #000000;
  --red-500: #ef4444;
  
  /* グラデーション */
  --hero-gradient: linear-gradient(135deg, #0c2231 0%, #1b3a4e 60%, #1e4c3a 100%);
  
  /* 影とぼかし */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
  
  /* フォント */
  --font-family: 'Noto Sans JP', sans-serif;
  
  /* レスポンシブブレークポイント */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  
  /* アニメーション */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  
  /* モバイル用アニメーション */
  --mobile-duration: 350ms;
  --mobile-delay: 30ms;
  
  /* デスクトップ用アニメーション */
  --desktop-duration: 500ms;
  --desktop-delay: 50ms;
  
  /* Intersection Observer */
  --scroll-threshold: 0.3;
  --header-scroll-trigger: 50px;
  
  /* 固定値 */
  --header-height: 70px;
  --mobile-viewport-offset: 30px;
}