/**
 * CSS Custom Properties (Variables)
 * 
 * テーマ全体で使用する変数を定義
 */

:root {
    /* ==========================================================================
       カラーパレット
       ========================================================================== */
    
    /* プライマリーカラー */
    --color-primary: #0073aa;
    --color-primary-dark: #005177;
    --color-primary-light: #4f94cd;
    
    /* グレースケール */
    --color-white: #ffffff;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    /* テキストカラー */
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #555555;
    --color-text-light: #999999;
    --color-text-lighter: #cccccc;
    --color-text-dark: #222222;
    
    /* 背景色 */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-dark: var(--color-gray-900);
    --color-bg-light: #fafafa;
    --color-bg-lighter: #fafbfc;
    
    /* ボーダー色 */
    --color-border-light: #e2e8f0;
    --color-border-base: #ddd;
    --color-border-dark: #ccc;
    
    /* ステータスカラー */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;
    
    /* アクセントカラー（紫系 - CTA・重要アクション用） */
    --color-accent: #667eea;
    --color-accent-dark: #5a67d8;
    --color-accent-light: #764ba2;
    
    /* 旧アクセントカラー（互換性のため一時的に残す） */
    --color-accent-blue: #3b82f6;
    --color-accent-purple: #9333ea;
    
    /* ボタン専用カラーバリエーション */
    --btn-primary-bg: var(--color-accent);
    --btn-primary-bg-hover: var(--color-accent-light);
    --btn-secondary-bg: var(--color-primary);
    --btn-secondary-bg-hover: var(--color-primary-dark);
    --btn-outline-border: var(--color-primary);
    --btn-outline-bg-hover: var(--color-primary);
    
    /* セクション背景色パターン */
    --section-bg-white: #ffffff;
    --section-bg-light: #f8fafc;
    --section-bg-neutral: #f8f9fa;
    --section-bg-dark: #2d3748;
    --section-bg-darker: #1e293b;
    --section-bg-darkest: #1a202c;
    
    /* グラデーション背景パターン */
    --gradient-bg-blue-light: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    --gradient-bg-blue-feature: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --gradient-bg-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    
    /* 特別なセクション背景色 */
    --section-bg-blue-lighter: #f0f4f8;
    --section-bg-blue-lightest: #f7fafc;
    
    /* ==========================================================================
       タイポグラフィ
       ========================================================================== */
    
    /* フォントファミリー */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                        "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
                        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
                        "Noto Color Emoji";
    
    /* フォントサイズ階層 */
    --font-size-xs: 1.2rem;     /* 12px - 補助テキスト */
    --font-size-sm: 1.4rem;     /* 14px - キャプション */
    --font-size-base: 1.6rem;   /* 16px - 基本テキスト */
    --font-size-lg: 1.8rem;     /* 18px - サブタイトル */
    --font-size-xl: 2.0rem;     /* 20px - カードタイトル */
    --font-size-2xl: 2.4rem;    /* 24px - サブセクションタイトル */
    --font-size-3xl: 3.0rem;    /* 30px - セクションタイトル */
    --font-size-4xl: 3.6rem;    /* 36px - 大セクションタイトル */
    --font-size-5xl: 4.8rem;    /* 48px - 特大タイトル */
    --font-size-hero: clamp(4rem, 8vw, 8rem); /* ヒーロータイトル専用 */
    
    /* フォントウェイト階層 */
    --font-weight-normal: 400;   /* 通常テキスト */
    --font-weight-medium: 500;   /* 中強調 */
    --font-weight-semibold: 600; /* セミボールド */
    --font-weight-bold: 700;     /* 標準ボールド */
    --font-weight-black: 900;    /* ヒーロータイトル専用 */
    
    /* ラインハイト */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 1.8;
    
    /* ==========================================================================
       スペーシング
       ========================================================================== */
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 5rem;
    --spacing-4xl: 6rem;
    --spacing-5xl: 8rem;
    
    /* ==========================================================================
       ボーダー・シャドウ
       ========================================================================== */
    
    /* ボーダー半径 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 100px;
    
    /* シャドウ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-button: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    
    /* ==========================================================================
       トランジション
       ========================================================================== */
    
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ==========================================================================
       ブレークポイント（メディアクエリ用参考値）
       ========================================================================== */
    
    /* 
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    */
    
    /* ==========================================================================
       コンテナ・レイアウト
       ========================================================================== */
    
    --container-max-width: 1200px;
    --container-padding-x: var(--spacing-lg);
    
    /* セクション余白 */
    --section-padding-y: var(--spacing-5xl);
    --section-padding-y-mobile: var(--spacing-4xl);
}

/* ==========================================================================
   ダークモード対応（無効化済み）
   ========================================================================== */

/* 
ダークモード機能は無効化されています。
理由: ダークモード時の文字色変更により、一部のページで文字が読めなくなる問題が発生するため。

将来的にダークモードを有効にする場合は、以下の対応が必要です：
1. 全CSSファイルでのハードコードされた色の見直し
2. 統一的なカラーシステムの実装
3. 全ページでのダークモード表示テスト

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-primary: var(--color-gray-900);
        --color-bg-secondary: var(--color-gray-800);
        --color-text-primary: var(--color-white);
        --color-text-secondary: var(--color-gray-300);
        --color-text-muted: var(--color-gray-400);
    }
}
*/