/* ===== CSS変数定義 ===== */

:root {
    /* ===== カラーパレット ===== */
    --primary-color: #005299;
    --secondary-color: #00cc00;
    --accent-color: #008080;
    --text-color: #000000;
    --text-light: #666666;
    --text-secondary: #666666;
    --background-color: #ffffff;
    --background-light: #f8f9fa;
    --background-dark: #f0f8ff;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-dark: rgba(0, 0, 0, 0.15);
    --overlay-color: rgba(0, 0, 0, 0.6);
    
    /* ===== グラデーション色 ===== */
    --gradient-start: #269636;
    --gradient-mid1: #1CA26C;
    --gradient-mid2: #277896;
    --gradient-end: #277896;
    
    /* ===== 青色系 ===== */
    --primary-blue: #005299;
    --secondary-blue: #277896;
    --light-blue: #7789C6;
    --cyan: #3c85a0;
    
    /* ===== 緑色系 ===== */
    --primary-green: #269636;
    --secondary-green: #1CA26C;
    
    /* ===== グレー系 ===== */
    --dark-gray: rgba(39, 120, 150, 0.6);
    --medium-gray: #F9F9F9;
    --light-blue-gray: #E8F1F4;
    
    /* ===== その他 ===== */
    --orange: #F59625;
    --green: #269636;
    
    /* ===== 背景色 ===== */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    
    /* ===== ボーダー色 ===== */
    --border-light: #F0F0F0;
    
    /* ===== シャドウ ===== */
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* ===== フォント ===== */
    --font-family: 'Noto Sans JP', sans-serif;
    --font-size-small: 12px;
    --font-size-base: 14px;
    --font-size-large: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 24px;
    
    /* ===== スペーシング ===== */
    
    /* ===== ボーダーラジウス ===== */
    --border-radius: 8px;
    
    /* ===== トランジション ===== */

    /* ===== タイポグラフィ ===== */
    --font-family-primary: 'Noto Sans JP', sans-serif;
    --font-family-secondary: 'Arial', sans-serif;
    --font-family-times: "Times New Roman", serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== スペーシング ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    
    /* ===== コンテナ最大幅 ===== */
    --container-max-width: 1200px;
    --container-medium-width: 1000px;
    --container-small-width: 950px;
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 6rem;     /* 96px */
    /* ===== ボーダー ===== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 4px;

    /* ===== シャドウ ===== */
    --shadow-sm: 0 1px 2px 0 var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color);
    --shadow-2xl: 0 25px 50px -12px var(--shadow-color);

    /* ===== ブレークポイント ===== */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ===== コンテナ ===== */
    --container-padding: 20px;
    /* ===== トランジション ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== Z-INDEX ===== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ===== アニメーション ===== */
    --animation-duration-fast: 0.15s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.5s;
    --animation-timing-function: ease-out;
}

/* ===== モーション軽減対応 ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --animation-duration-fast: 0s;
        --animation-duration-normal: 0s;
        --animation-duration-slow: 0s;
    }
}