:root {
  /* ============================================= */
  /* 【CSS 第1階層】パレット定義 (ライトモード)
  /* ============================================= */
  --palette-white: #FFFFFF;
  --palette-black: #000000;
  
  /* 既存のパレット */
  --palette-page-bg: #F3F6F8;
  --palette-container-bg: #FFFFFF99;
  --palette-blue-900: #3292CF;
  --palette-blue-700: #58A7D9;
  --palette-blue-200: #EEF8FF;
  --palette-black-900: #3F3F3F;
  --palette-black-700: #606060;
  --palette-black-500: #8a8a8a;
  --palette-black-300: #D9D9D9;
  --palette-black-100: #f7f7f7;
  --palette-value-bg: #F3F6F8;  /* 既存の --palette-page-bg と同じ値 */
  --palette-teal-500: #10A6A0;
  --palette-gray-100: #f0f0f0;
  --palette-gray-200: #e8e8e8;
  --palette-error-900: #FF5C00;
  --palette-error-700-old: #FAB400; /* 既存の定義と重複するため名前を変更 */

  /* グラデーションカラー */
  --palette-primary-300: #88EBE7;
  --palette-primary-500: #10A6A0;
  --palette-primary-700: #006858;

  --palette-second-500: #BFF0FF;
  --palette-second-500: #248EAE;
  --palette-second-700: #006685;

  --palette-third-500: #A0B1DB;
  --palette-third-500: #3375A1;
  --palette-third-700: #195278;

  --palette-fourth-500: #46A794;
  --palette-fourth-500: #3E5A9B;
  --palette-fourth-700: #32487C;

  /* グラフ・グラデーションカラー */
  --palette-graph-light-1: #006858;
  --palette-graph-light-2: #00A18E;
  --palette-graph-light-3: #4CDFC6;
  --palette-graph-light-4: #81F1DE;
  --palette-graph-light-5: #B1F2E7;
  --palette-graph-light-6: #002D68;
  --palette-graph-light-7: #3E5A9B;
  --palette-graph-light-8: #5A79C3;
  --palette-graph-light-9: #819FE6;
  --palette-graph-light-10: #ABC4FF;

  /* その他共通カラー */
  --palette-error-900: #FF5C00; /* 強いエラー (既存の-900と同じ値) */
  --palette-error-700: #FAB400; /* 弱いエラー */

  /* ============================================= */
  /* 【CSS 第2階層】役割定義 (ライトモード)
  /* ============================================= */
  /* 背景色 */
  --background-page: var(--palette-page-bg);
  --background-container: var(--palette-container-bg);
  --background-container-sub: var(--palette-black-100);
  --background-header: #FFFFFF19;
  
  /* 文字色 */
  --text-main: var(--palette-black-900);
  --text-sub: var(--palette-black-700);
  --text-muted: var(--palette-black-500);
  --text-link: var(--palette-blue-700);
  --text-on-primary: var(--palette-white);
  
  /* ボーダー色 */
  --border-primary: var(--palette-blue-900);
  --border-muted: var(--palette-black-200);

  /* プライマリーカラー (主要なアクション) */
  --color-brand: var(--palette-teal-500);

  /* エラー・警告色 */
  --color-error: var(--palette-error-900);
  --color-warning: var(--palette-error-700-old);

  /* グラデーション */
  --gradient-brand: linear-gradient(95deg, var(--grad-1) -20%, var(--grad-4) 100%);
}







/* ▼▼▼ ダークモード用のスタイル ▼▼▼ */
[data-theme="dark"] {
  /* ============================================= */
  /* 【CSS 第1階層】パレット定義 (ダークモード)
  /* ============================================= */
  /* 既存のパレット */
  --palette-dark-900: #121212;
  --palette-dark-800: #1f1f1f;
  --palette-dark-700: #212121;
  --palette-dark-600: #2e2e2e;
  --palette-dark-500: #3a3a3a;
  --palette-dark-400: #555555;
  --palette-dark-300: #606060;
  --palette-dark-blue-700: #87C4ED;
  --palette-dark-teal-500: #46E06A;
  --palette-dark-error-900: #FF8A65;
  --palette-dark-error-700: #FFCA28;

  /* ▼▼▼ 画像から追加したカラーパレット (ダークモード) ▼▼▼ */
  /* モード別カラー */
  --palette-primary-500: #4C8AB3;
  --palette-primary-700: #407497;
  --palette-second-500: #4CAFB5;
  --palette-second-700: #409397;
  --palette-third-500: #4CB57D;
  --palette-third-700: #409769;
  --palette-fourth-500: #4CB5A0;
  --palette-fourth-700: #409786;
  --palette-dark-theme-300: #E6E6E6; /* 画像での名称は Dark_300 */
  --palette-dark-theme-500: #8A8A8A; /* 画像での名称は Dark_500 */
  --palette-dark-theme-700: #3D3D3D; /* 画像での名称は Dark_700 */

  /* グラフ・グラデーションカラー */
  --palette-graph-dark-1: #02A837;
  --palette-graph-dark-2: #06E04A;
  --palette-graph-dark-3: #39E770;
  --palette-graph-dark-4: #7CFF9F;
  --palette-graph-dark-5: #4FFF84;
  --palette-graph-dark-6: #2D9D5D;
  --palette-graph-dark-7: #23AE7C;
  --palette-graph-dark-8: #27A99C;
  --palette-graph-dark-9: #57BFB7;
  --palette-graph-dark-10: #9AADCA;
  
  /* ============================================= */
  /* 【CSS 第2階層】役割定義 (ダークモード)
  /* ============================================= */
  /* 背景色 */
  --background-page: var(--palette-dark-900);
  --background-container: #ffffff0f;
  --background-container-sub: var(--palette-dark-700);
  --background-header: #00000080;

  /* 文字色 */
  --text-main: var(--palette-white);
  --text-sub: var(--palette-white);
  --text-muted: var(--palette-dark-300);
  --text-link: var(--palette-dark-blue-700);
  --text-on-primary: var(--palette-dark-900);

  /* ボーダー色 */
  --border-primary: #58a8d900;
  --border-muted: var(--palette-dark-500);

  /* プライマリーカラー (主要なアクション) */
  --color-brand: var(--palette-dark-teal-500);

  /* エラー・警告色 */
  --color-error: var(--palette-dark-error-900);
  --color-warning: var(--palette-dark-error-700);
}