/* variables.css */
:root {
  /* メインカラー（統一カラーパレット） */
  --color-primary: #093d6f;        /* メインブルー */
  --color-primary-light: #315a8f;   /* ライトブルー */
  --color-primary-dark: #062a4a;    /* ダークブルー */
  
  /* アクセントカラー */
  --color-accent: #45c08d;          /* グリーン */
  --color-accent-light: #6dd4a8;    /* ライトグリーン */
  --color-accent-dark: #2e8c5e;     /* ダークグリーン */
  
  /* グラデーション用カラー（ヒーローセクション専用） */
  --color-gradient-light-green: #d4f4e8;
  --color-gradient-sky-blue: #68b5fb;
  --color-gradient-lavender: #d59cfc;
  --color-gradient-light-purple: #eacdfc;
  
  /* 基本カラー */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-muted: #999999;
  --color-bg: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-gray: #f5f5f5;
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  
  /* レイアウト */
  --container-max-width: 1200px;
  --section-padding: 100px;
  --section-padding-mobile: 60px;
  --header-height: 70px;
  
  /* フォント */
  --font-family: 'Noto Sans JP', sans-serif;
  --font-family-heading: 'Shippori Mincho', serif;
  --font-family-english: 'Playfair Display', serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* フォントサイズ - レスポンシブ対応 */
  --font-size-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 2vw, 1rem);
  --font-size-base: clamp(1rem, 2.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 3.5vw, 1.75rem);
  --font-size-2xl: clamp(1.5rem, 4vw, 2.25rem);
  --font-size-3xl: clamp(1.875rem, 5vw, 2.75rem);
  --font-size-4xl: clamp(2.25rem, 6vw, 3.25rem);
  --font-size-5xl: clamp(2.5rem, 7vw, 4rem);
  
  /* 行間 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;
  
  /* レターススペーシング */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  
  /* スペーシング - レスポンシブ対応 */
  --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1.5vw, 1rem);
  --spacing-md: clamp(1rem, 2vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 3vw, 2rem);
  --spacing-xl: clamp(2rem, 4vw, 3rem);
  --spacing-2xl: clamp(3rem, 6vw, 5rem);
  --spacing-3xl: clamp(4rem, 8vw, 7rem);
  --spacing-4xl: clamp(6rem, 10vw, 10rem);
  
  /* ボーダーラジアス */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* シャドウ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* トランジション */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ブレイクポイント (JS用) */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 1023px;
  --breakpoint-desktop: 1024px;
  
  /* z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}