:root {
    /* ============================================
       プライマリカラー（カワセミの翼と背中）
       ============================================ */
    --primary-50: #E8F6F9;
    --primary-100: #C7EAF1;
    --primary-200: #A3DDE8;
    --primary-300: #7FD0DF;
    --primary-400: #4BB8D1;
    --primary-500: #0788A3;    /* メインの青色 */
    --primary-600: #056B80;    /* ホバー用 */
    --primary-700: #045361;
    --primary-800: #033B45;
    --primary-900: #022329;
    
    /* ============================================
       セカンダリカラー（カワセミの喉元）
       ============================================ */
    --secondary-50: #E5F9F9;
    --secondary-100: #C2F1F0;
    --secondary-200: #9FE9E7;
    --secondary-300: #7CE1DE;
    --secondary-400: #44D4CE;
    --secondary-500: #16C0BB;    /* メインのターコイズ */
    --secondary-600: #0EA8A3;    /* ホバー用 */
    --secondary-700: #0B7E7A;
    --secondary-800: #085654;
    --secondary-900: #052E2D;
    
    /* ============================================
       アクセントカラー（カワセミのくちばしと胸元）
       ============================================ */
    --accent-50: #FFF4E8;
    --accent-100: #FFE5C7;
    --accent-200: #FFD5A3;
    --accent-300: #FFC580;
    --accent-400: #FFA53A;
    --accent-500: #FF6B00;    /* メインのオレンジ */
    --accent-600: #E05F00;    /* ホバー用 */
    --accent-700: #B84E00;
    --accent-800: #8A3A00;
    --accent-900: #5C2700;
    
    /* ============================================
       セマンティックカラー（状態表示）
       ============================================ */
    /* 成功 - 緑系 */
    --success-50: #E8F8F0;
    --success-100: #C7EDD9;
    --success-200: #A0E1C3;
    --success-300: #79D5AD;
    --success-400: #4DC48B;
    --success-500: #10B26C;    /* メインの成功色 */
    --success-600: #0D9858;
    --success-700: #0A7D48;
    --success-800: #076338;
    --success-900: #044828;
    
    /* 警告 - 黄色系 */
    --warning-50: #FFFBEB;
    --warning-100: #FFF3C7;
    --warning-200: #FFEBA3;
    --warning-300: #FFE280;
    --warning-400: #FFD03A;
    --warning-500: #FFC107;    /* メインの警告色 */
    --warning-600: #E0A800;
    --warning-700: #B88A00;
    --warning-800: #8A6700;
    --warning-900: #5C4500;
    
    /* エラー - 赤系 */
    --error-50: #FFEBEE;
    --error-100: #FFCCD2;
    --error-200: #FF9FA8;
    --error-300: #FF7A87;
    --error-400: #FF5566;
    --error-500: #E63946;    /* メインのエラー色 */
    --error-600: #C92A35;
    --error-700: #A82029;
    --error-800: #87171D;
    --error-900: #660E14;
    
    /* 情報 - 青系（プライマリとは異なる明るめ） */
    --info-50: #E3F2FD;
    --info-100: #BBDEFB;
    --info-200: #90CAF9;
    --info-300: #64B5F6;
    --info-400: #42A5F5;
    --info-500: #2196F3;    /* メインの情報色 */
    --info-600: #1E88E5;
    --info-700: #1976D2;
    --info-800: #1565C0;
    --info-900: #0D47A1;
    
    /* ============================================
       グレースケール（テキストとUI要素用）
       ============================================ */
    --gray-50: #F8FAFB;
    --gray-100: #F0F3F5;
    --gray-200: #E1E8ED;
    --gray-300: #C8D5E0;
    --gray-400: #9BAAB8;
    --gray-500: #6B7F92;
    --gray-600: #4E5F70;
    --gray-700: #384552;
    --gray-800: #252F38;
    --gray-900: #141B21;
    
    /* ============================================
       よく使うカラーのエイリアス（ライトモード）
       ============================================ */
    --color-primary: var(--primary-500);
    --color-primary-hover: var(--primary-600);
    --color-primary-light: var(--primary-100);
    --color-primary-dark: var(--primary-700);
    
    --color-secondary: var(--secondary-500);
    --color-secondary-hover: var(--secondary-600);
    --color-secondary-light: var(--secondary-100);
    --color-secondary-dark: var(--secondary-700);
    
    --color-accent: var(--accent-500);
    --color-accent-hover: var(--accent-600);
    --color-accent-light: var(--accent-100);
    --color-accent-dark: var(--accent-700);
    
    --color-success: var(--success-500);
    --color-success-light: var(--success-100);
    --color-success-dark: var(--success-700);
    
    --color-warning: var(--warning-500);
    --color-warning-light: var(--warning-100);
    --color-warning-dark: var(--warning-700);
    
    --color-error: var(--error-500);
    --color-error-light: var(--error-100);
    --color-error-dark: var(--error-700);
    
    --color-info: var(--info-500);
    --color-info-light: var(--info-100);
    --color-info-dark: var(--info-700);
    
    /* ============================================
       背景色
       ============================================ */
    --bg-primary: #FFFFFF;
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* ============================================
       テキスト色
       ============================================ */
    --text-primary: var(--gray-900);      /* 最も濃い、メインのテキスト */
    --text-secondary: var(--gray-700);    /* 副次的なテキスト */
    --text-tertiary: var(--gray-500);     /* さらに薄い、補足テキスト */
   --text-disabled: var(--gray-400);     /* 無効状態のテキスト */
   --text-on-primary: #FFFFFF;           /* プライマリカラー上のテキスト */
   --text-on-dark: #FFFFFF;              /* 暗い背景上のテキスト */
   
    /* ============================================
       既存スタイル向けの互換エイリアス
       ============================================ */
    --background-color: var(--bg-primary);
    --bg-color: var(--bg-secondary);
    --surface-color: var(--bg-tertiary);
    --card-background: var(--card-bg);
    --border-color: var(--border-light);
    --light-border-color: var(--border-light);
    --hover-color: var(--hover-bg);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --transition-duration: 0.25s;
    
    --primary-color: var(--color-primary);
    --primary-hover-color: var(--color-primary-hover);
    --primary-light-color: var(--color-primary-light);
    
    --secondary-color: var(--color-secondary);
    --secondary-hover-color: var(--color-secondary-hover);
    
    --accent-color: var(--color-accent);
    --accent-light-color: var(--color-accent-light);
    --link-color: var(--color-primary);
    
    --text-color: var(--text-primary);
    --text-dark-color: var(--text-primary);
    --text-light-color: var(--text-secondary);
    --text-secondary-color: var(--text-secondary);
    --text-muted-color: var(--text-tertiary);
    
    /* ============================================
       ボーダーと区切り線
       ============================================ */
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-dark: var(--gray-400);
    --border-focus: var(--primary-500);
    
    /* ============================================
       その他のUI要素
       ============================================ */
    --card-bg: var(--bg-primary);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    
    --hover-bg: var(--gray-100);
    --active-bg: var(--gray-200);
    --focus-ring: 0 0 0 3px rgba(7, 136, 163, 0.2);
    
    --header-bg: var(--bg-primary);
    --sidebar-bg: var(--gray-50);
    --footer-bg: var(--gray-100);
    
    /* ============================================
       アニメーション設定
       ============================================ */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
    
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}



/* ============================================
   使用例のコメント
   ============================================ */
/*
■ 基本的な使い方:

ボタン（プライマリ）:
.btn-primary {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
}
.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

カード:
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--card-shadow);
    transition: var(--transition-normal);
}
.card:hover {
    box-shadow: var(--card-shadow-hover);
}

テキスト:
.heading {
    color: var(--text-primary);
}
.subheading {
    color: var(--text-secondary);
}
.caption {
    color: var(--text-tertiary);
}

ステータス表示:
.status-success {
    color: var(--color-success);
    background-color: var(--color-success-light);
}
.alert-error {
    color: var(--color-error);
    background-color: var(--color-error-light);
    border-left: 4px solid var(--color-error);
}

リンク:
a {
    color: var(--color-primary);
    transition: var(--transition-fast);
}
a:hover {
    color: var(--color-primary-hover);
}

フォーカス状態:
input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}

■ 段階的な色の使い方:
背景のバリエーション:
- 最も薄い: var(--primary-50) ～ var(--primary-100)
- バッジやラベル: var(--primary-200) ～ var(--primary-300)
- 無効状態: var(--primary-400)
- メイン: var(--primary-500)
- ホバー: var(--primary-600)
- アクティブ: var(--primary-700)
- テキスト: var(--primary-800) ～ var(--primary-900)
*/