:root {
    --BackgroundColor: #f8f9fb;
    
    --PrimaryColor: #3d5a80;
    --SubPrimaryColor: #4e75a6;
    --LightPrimaryColor: #f8f1e9;
    
    --SecondaryColor: #a33544;
    --SubSecondaryColor: #ba616e;
    --TintColor: #cdd0e8;
    --ActiveColor: #287a46;
    --SubActiveColor: #35a35d;

    --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(--SubPrimaryColor);
    --ButtonColor2: var(--PrimaryColor);
    --ButtonBackgroundColor: #f0f0f0;

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

    /* クリック可能要素を表現するための影 */
    --ShadowClickable: 2px 4px 6px rgba(15, 23, 42, 0.07);
    --ShadowPressed:   1px 2px 3px rgba(15,23,42,.05);
}