/* 
 * Variables CSS
 * カスタムプロパティ（CSS変数）の定義
 */

:root {
    /* カラーパレット - 統合後 */
    --primary-color: #336699;
    --primary-color-rgb: 51, 102, 153;
    --primary-color-dark: #1e2a4a;
    --primary-color-light: #6699cc;
    --secondary-color: #87ceeb;
    --info-blue: #4da6ff;
    --accent-color: #ff6b35;
    --accent-color-light: #ff8c42;
    --text-color: #333333;
    --text-secondary: var(--primary-color);
    --text-light: #666666;
    --background-color: #ffffff;
    --background-light: #f8f9fa;
    --background-hero: #e9ecef;
    --bg-light: #f8f9fa;
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --text-white: var(--background-color);
    --black: #000000;
    
    /* 特殊カラー */
    --contact-red: #c61a1a;
    --contact-red-dark: #a91b1b;
    --white: #ffffff;
    
    /* 装飾カラー */
    --success-green: #10b981;
    --success-green-light: #6ee7b7;  /* グリーンの明るい版 - 同色相 */
    --warning-yellow: #f59e0b;
    --warning-yellow-light: #fbbf24; /* イエローの明るい版 - 同色相 */
    --accent-color-light-secondary: #ffb366; /* オレンジの明るい版 - 同色相 */
    --decorative-violet: #7c3aed;
    
    /* 旧変数名削除済み - v1.4で完全統一 */
    
    /* 旧secondary-colorは#6699ccでした */
    
    /* スペーシング */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* フォント */
    --font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --font-family-heading: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    
    /* サイズ変数 - 基本システム */
    --size-xs: 0.625rem;      /* 10px */
    --size-sm: 0.875rem;      /* 14px */
    --size-base: 1rem;        /* 16px */
    --size-lg: 1.125rem;      /* 18px */
    --size-xl: 1.25rem;       /* 20px */
    --size-2xl: 1.5rem;       /* 24px */
    --size-3xl: 1.875rem;     /* 30px */
    --size-4xl: 2.25rem;      /* 36px */
    --size-5xl: 3rem;         /* 48px */
    --size-6xl: 3.75rem;      /* 60px */
    --size-7xl: 4.5rem;       /* 72px */
    --size-8xl: 6rem;         /* 96px */
    --size-9xl: 8rem;         /* 128px */
    
    /* レスポンシブサイズ変数 */
    --size-responsive-sm: clamp(var(--size-xs), 2.5vw, var(--size-sm));     /* 12px - 14px */
    --size-responsive-base: clamp(var(--size-sm), 3vw, var(--size-base));   /* 14px - 16px */
    --size-responsive-lg: clamp(var(--size-base), 3.5vw, var(--size-lg));   /* 16px - 18px */
    --size-responsive-xl: clamp(var(--size-lg), 4vw, var(--size-xl));       /* 18px - 20px */
    --size-responsive-2xl: clamp(var(--size-xl), 4.5vw, var(--size-2xl));   /* 20px - 24px */
    --size-responsive-3xl: clamp(var(--size-2xl), 5vw, var(--size-3xl));    /* 24px - 30px */
    --size-responsive-4xl: clamp(var(--size-3xl), 6vw, var(--size-4xl));    /* 30px - 36px */
    --size-responsive-5xl: clamp(var(--size-4xl), 7vw, var(--size-5xl));    /* 36px - 48px */
    --size-responsive-6xl: clamp(var(--size-5xl), 8vw, var(--size-6xl));    /* 48px - 60px */
    --size-responsive-7xl: clamp(var(--size-6xl), 9vw, var(--size-7xl));    /* 60px - 72px */
    
    /* 行間変数 */
    --line-tight: 1.25;
    --line-base: 1.5;
    --line-relaxed: 1.75;
    --line-readable: 1.7;
    
    /* 文字間隔変数 */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.03em;
    
    /* ウェイト変数 */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;
    
    /* ウェイト変数（互換性のため） */
    --font-weight-normal: var(--weight-normal);
    --font-weight-medium: var(--weight-medium);
    --font-weight-semibold: var(--weight-semibold);
    --font-weight-bold: var(--weight-bold);
    --font-weight-black: var(--weight-black);
    
    /* 境界線の半径 */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-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);
    
    /* アイコンサイズ */
    --icon-size-sm: 24px;
    --icon-size-md: 32px;
    --icon-size-lg: 48px;
    --icon-size-xl: 64px;
    
    /* ネガティブスペーシング */
    --spacing-xs-negative: -0.5rem;  /* -8px */
    --spacing-sm-negative: -0.75rem; /* -12px */
    --spacing-md-negative: -1rem;    /* -16px */
    
    /* レスポンシブブレークポイント */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
    --breakpoint-wide: 1200px;
    
    /* アニメーション */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* コンテナ幅設定 */
    --container-narrow: 800px;      /* 狭いコンテナ（記事やフォームなど） */
    --container-base: 1200px;       /* 基本のコンテナ幅（.containerで使用） */
    --container-wide: 1400px;       /* 広いコンテナ（ギャラリーなど） */
    --container-padding: 1rem;      /* コンテナの左右パディング */
    
    /* ブレークポイント（メディアクエリ用） */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* タイポグラフィの行間別名 */
    --line-height-tight: var(--line-tight);
    --line-height-base: var(--line-base);
    --line-height-relaxed: var(--line-relaxed);
}