:root {
    --brand: #88A94D;
    --brand-light: #C4D649;
    --brand-dark: #1F6F3D;

    --colorBrandBackground: var(--brand);
    --colorBrandBackgroundHover: color-mix(in srgb, var(--brand) 85%, var(--brand-light));
    --colorBrandBackgroundPressed: var(--brand-dark);
    --colorBrandBackgroundSelected: color-mix(in srgb, var(--brand) 70%, var(--brand-dark));
    --colorBrandBackgroundStatic: var(--brand);

    --colorBrandBackground2: color-mix(in srgb, var(--brand-light) 20%, white);
    --colorBrandBackground2Hover: color-mix(in srgb, var(--brand-light) 30%, white);
    --colorBrandBackground2Pressed: color-mix(in srgb, var(--brand-light) 45%, white);
    --colorBrandBackgroundInverted: color-mix(in srgb, var(--brand-light) 15%, white);
    --colorBrandBackgroundInvertedHover: color-mix(in srgb, var(--brand-light) 25%, white);
    --colorBrandBackgroundInvertedPressed: color-mix(in srgb, var(--brand-light) 40%, white);
    --colorBrandBackgroundInvertedSelected: color-mix(in srgb, var(--brand-light) 30%, white);

    --colorBrandForeground1: var(--brand);
    --colorBrandForegroundLink: var(--brand);
    --colorBrandForegroundLinkSelected: var(--brand);
    --colorBrandForegroundOnLight: var(--brand);

    --colorBrandForeground2: var(--brand-dark);
    --colorBrandForeground2Hover: color-mix(in srgb, var(--brand-dark) 85%, black);
    --colorBrandForeground2Pressed: color-mix(in srgb, var(--brand-dark) 70%, black);
    --colorBrandForegroundLinkHover: var(--brand-dark);
    --colorBrandForegroundLinkPressed: color-mix(in srgb, var(--brand-dark) 80%, black);
    --colorBrandForegroundOnLightHover: var(--brand-dark);
    --colorBrandForegroundOnLightPressed: color-mix(in srgb, var(--brand-dark) 80%, black);
    --colorBrandForegroundOnLightSelected: color-mix(in srgb, var(--brand-dark) 90%, var(--brand));

    --colorBrandForegroundInverted: var(--brand-light);
    --colorBrandForegroundInvertedHover: color-mix(in srgb, var(--brand-light) 85%, white);
    --colorBrandForegroundInvertedPressed: color-mix(in srgb, var(--brand-light) 70%, white);

    --colorBrandStroke1: var(--brand);
    --colorBrandStroke2: color-mix(in srgb, var(--brand-light) 60%, white);
    --colorBrandStroke2Hover: color-mix(in srgb, var(--brand-light) 75%, white);
    --colorBrandStroke2Pressed: var(--brand-light);
    --colorBrandStroke2Contrast: color-mix(in srgb, var(--brand-light) 60%, white);

    --colorCompoundBrandBackground: var(--brand);
    --colorCompoundBrandBackgroundHover: color-mix(in srgb, var(--brand) 85%, var(--brand-light));
    --colorCompoundBrandBackgroundPressed: var(--brand-dark);
    --colorCompoundBrandForeground1: var(--brand);
    --colorCompoundBrandForeground1Hover: var(--brand-dark);
    --colorCompoundBrandForeground1Pressed: color-mix(in srgb, var(--brand-dark) 80%, black);
    --colorCompoundBrandStroke: var(--brand);
    --colorCompoundBrandStrokeHover: var(--brand-dark);
    --colorCompoundBrandStrokePressed: color-mix(in srgb, var(--brand-dark) 80%, black);

    --colorBrandShadowAmbient: color-mix(in srgb, var(--brand-dark) 30%, transparent);
    --colorBrandShadowKey: color-mix(in srgb, var(--brand-dark) 25%, transparent);

    --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralForegroundStaticInverted: #ffffff;
    --colorNeutralForegroundInvertedLink: #ffffff;
    --colorNeutralForegroundInvertedLinkHover: #ffffff;
    --colorNeutralForegroundInvertedLinkPressed: #ffffff;
    --colorNeutralForegroundInvertedLinkSelected: #ffffff;
}