:root {
    /* --PrimaryColor: #4d9b61;
    --SubPrimaryColor: #7ab489;
    --LightPrimaryColor: #a6cdb0;
    --SecondaryColor: #9b4d87;
    --SubSecondaryColor: #b47aa5;
    --TintColor: #d3e6d8;
    --ActiveColor: #4d609b;
    --SubActiveColor: #7a88b4; */

    /* ベースカラー（柔らかいグレー系・ニュートラル系） */
    --BaseColor: #f8f9f6;           /* 背景色・画面全体のベース */
    --SubBaseColor: #eceee8;        /* カードや要素の背景・境界の柔らかな区分 */

    /* プライマリーカラー（落ち着きのあるグリーン） */
    --PrimaryColor: #78a085;        /* 見出し・重要要素 */
    --SubPrimaryColor: #9dbba6;     /* サブ見出し・選択状態 */
    --LightPrimaryColor: #c7d9ce;   /* 強調の背景や装飾的な要素 */

    /* セカンダリーカラー（ナチュラルなラベンダー系） */
    --SecondaryColor: #a186af;      /* サブアクションや補助アイテム */
    --SubSecondaryColor: #bdaec3;   /* アイコンやアクセント要素に使用 */

    /* アクセントカラー（穏やかなブルー系：操作アクティブ要素） */
    --AccentColor: #a09978;         /* クリック可能要素、リンクなど */
    --SubAccentColor: #b8b39a;      /* アクセント補助やホバー効果用 */

    /* ニュートラルカラー（灰色系の中間色） */
    --NeutralTextColor: #4a4a4a;    /* 本文テキスト、読みやすく目に優しい */
    --NeutralSubTextColor: #8e968f; /* 補助的な説明テキスト、非アクティブ要素の文字 */

    /* アクティブカラー（控えめなブルー系） */
    --ActiveColor: #6b90bb;         /* 操作中の要素、強調用 */
    --SubActiveColor: #9cb4d0;      /* より穏やかなアクティブ要素の背景 */

    /* ティントカラー（画面のアクセント背景、目立たせたい要素） */
    --TintColor: #e4ece9;           /* 軽く注意を引く背景や通知エリア用 */

    --PrimaryColor_Tint1: color-mix(in srgb, var(--PrimaryColor) 50%, white);

    --Gray_Main1: #333;
    --Gray_Main2: #555;
    --Gray_Main3: #777;
    --Gray_Main4: #999;
    --Gray_Light5: #aaa;
    --Gray_Light6: #ccc;
    --Gray_Light7: #eee;

    /* テキスト色のエイリアス */
    --MainText1:  var(--Gray_Main1);
    --MainText2:  var(--Gray_Main2);
    --SubText1:   var(--Gray_Main3);
    --SubText2:   var(--Gray_Main4);
    --LightText1: var(--Gray_Light5);
    --LightText2: var(--Gray_Light6);

    --ButtonColor1: var(--PrimaryColor);
    --ButtonColor2: var(--SubPrimaryColor);
    --ButtonBackgroundColor: #f0f0f0;

    --LineColor: #ddd;
    --DarkLineColor: #aaa;
}