:root {
    --h-h1-font-family: "Muller", Helvetica;
    --h-h1-font-weight: 700;
    --h-h1-font-size: 39px;
    --h-h1-letter-spacing: 0px;
    --h-h1-line-height: normal;
    --h-h1-font-style: normal;
    --h-h2-font-family: "Muller", Helvetica;
    --h-h2-font-weight: 700;
    --h-h2-font-size: 31px;
    --h-h2-letter-spacing: 0px;
    --h-h2-line-height: normal;
    --h-h2-font-style: normal;
    --h-h3-font-family: "Muller", Helvetica;
    --h-h3-font-weight: 700;
    --h-h3-font-size: 25px;
    --h-h3-letter-spacing: 0px;
    --h-h3-line-height: normal;
    --h-h3-font-style: normal;
    --h-h4-font-family: "Muller", Helvetica;
    --h-h4-font-weight: 700;
    --h-h4-font-size: 20px;
    --h-h4-letter-spacing: 0px;
    --h-h4-line-height: 130%;
    --h-h4-font-style: normal;
    --p-regular-font-family: "Muller", Helvetica;
    --p-regular-font-weight: 400;
    --p-regular-font-size: 16px;
    --p-regular-letter-spacing: 0px;
    --p-regular-line-height: normal;
    --p-regular-font-style: normal;
    --p-bold-font-family: "Muller", Helvetica;
    --p-bold-font-weight: 700;
    --p-bold-font-size: 16px;
    --p-bold-letter-spacing: 0px;
    --p-bold-line-height: normal;
    --p-bold-font-style: normal;
    --p-comments-font-family: "Muller", Helvetica;
    --p-comments-font-weight: 400;
    --p-comments-font-size: 9px;
    --p-comments-letter-spacing: 0px;
    --p-comments-line-height: 130%;
    --p-comments-font-style: normal;
    --p-secondary-regular-font-family: "Muller", Helvetica;
    --p-secondary-regular-font-weight: 400;
    --p-secondary-regular-font-size: 13px;
    --p-secondary-regular-letter-spacing: 0px;
    --p-secondary-regular-line-height: 130%;
    --p-secondary-regular-font-style: normal;
    --p-secondary-bold-font-family: "Muller", Helvetica;
    --p-secondary-bold-font-weight: 700;
    --p-secondary-bold-font-size: 13px;
    --p-secondary-bold-letter-spacing: 0px;
    --p-secondary-bold-line-height: 130%;
    --p-secondary-bold-font-style: normal;
    --p-tretiery-regular-font-family: "Muller", Helvetica;
    --p-tretiery-regular-font-weight: 400;
    --p-tretiery-regular-font-size: 20px;
    --p-tretiery-regular-letter-spacing: 0px;
    --p-tretiery-regular-line-height: 130%;
    --p-tretiery-regular-font-style: normal;
    --p-tretiery-bold-font-family: "Muller", Helvetica;
    --p-tretiery-bold-font-weight: 700;
    --p-tretiery-bold-font-size: 20px;
    --p-tretiery-bold-letter-spacing: 0px;
    --p-tretiery-bold-line-height: 130%;
    --p-tretiery-bold-font-style: normal;
    --p-primary-primary-font-family: "Muller", Helvetica;
    --p-primary-primary-font-weight: 400;
    --p-primary-primary-font-size: 16px;
    --p-primary-primary-letter-spacing: 0px;
    --p-primary-primary-line-height: 140%;
    --p-primary-primary-font-style: normal;
    --pallette-base-0: rgba(255, 255, 255, 1);
    --pallette-base-50: rgba(242, 242, 242, 1);
    --pallette-base-100: rgba(230, 230, 230, 1);
    --pallette-base-150: rgba(217, 217, 217, 1);
    --pallette-base-300: rgba(179, 179, 179, 1);
    --pallette-base-500: rgba(128, 128, 128, 1);
    --pallette-base-600: rgba(102, 102, 102, 1);
    --pallette-base-700: rgba(77, 77, 77, 1);
    --pallette-base-800: rgba(51, 51, 51, 1);
    --pallette-base-850: rgba(38, 38, 38, 1);
    --pallette-base-900: rgba(26, 26, 26, 1);
    --pallette-accent-primary-50: rgba(230, 241, 254, 1);
    --pallette-accent-primary-300: rgba(102, 168, 246, 1);
    --pallette-accent-primary-500: rgba(0, 110, 240, 1);
    --pallette-accent-primary-700: rgba(0, 66, 144, 1);
    --pallette-accent-primary-850: rgba(0, 33, 72, 1);
    --pallette-accent-secondary-50: rgba(216, 233, 253, 1);
    --pallette-accent-secondary-150: rgba(196, 213, 225, 1);
    --pallette-accent-secondary-300: rgba(192, 219, 252, 1);
    --pallette-accent-secondary-700: rgba(20, 100, 230, 1);
    --pallette-accent-secondary-850: rgba(10, 90, 220, 1);
    --colors-bg-primary: var(--pallette-base-0);
    --colors-bg-secondary: var(--pallette-base-100);
    --colors-bg-tretiery: var(--pallette-base-50);
    --colors-bg-accent-primary: var(--pallette-accent-primary-500);
    --colors-bg-accent-secondary: var(--pallette-accent-primary-300);
    --colors-bg-accent-subdedube-primary: var(--pallette-accent-primary-50);
    --colors-text-primary: var(--pallette-base-900);
    --colors-text-secondary: var(--pallette-base-500);
    --colors-text-on-color: var(--pallette-base-0);
    --colors-text-disabled: var(--pallette-base-300);
    --colors-text-accent-accent: var(--pallette-accent-primary-500);
    --colors-text-accent-seconday: var(--pallette-accent-primary-300);
    --colors-button-secondary: var(--pallette-base-100);
    --colors-button-menu: var(--pallette-base-150);
    --colors-button-subdedube-secondary: var(--pallette-accent-secondary-50);
    --colors-button-additional-1: var(--pallette-base-50);
    --colors-icon-primary: var(--pallette-base-900);
    --colors-bg-accent-subdedube-additional-1: var(--pallette-accent-secondary-700);
    --colors-icon-secondary: var(--pallette-base-500);
    --colors-icon-on-color: var(--pallette-base-0);
    --colors-icon-disabled: var(--pallette-base-300);
    --colors-icon-accent-accent: var(--pallette-accent-primary-500);
    --colors-icon-accent-secondary: var(--pallette-accent-primary-300);
    --colors-bg-accent-subdedube-additional-2: var(--pallette-accent-secondary-850);
    --colors-button-subdedube-additional-3: var(--pallette-accent-secondary-300);
    --numbers-roundness-XXS: var(--ztechical-values-XXS);
    --numbers-roundness-s: var(--ztechical-values-XS);
    --numbers-roundness-m: var(--ztechical-values-m);
    --numbers-gaps-XXS: var(--ztechical-values-XXS);
    --numbers-gaps-XS: var(--ztechical-values-XS);
    --numbers-gaps-s: var(--ztechical-values-s);
    --numbers-gaps-l: var(--ztechical-values-l);
    --numbers-gaps-XL: var(--ztechical-values-XL);
    --ztechical-values-XXS: 4px;
    --ztechical-values-XS: 8px;
    --ztechical-values-s: 10px;
    --ztechical-values-m: 12px;
    --ztechical-values-l: 16px;
    --ztechical-values-XL: 20px;
    --pallete-black-primary: rgba(30, 30, 30, 1);
    --general-roundness-XS: 8px;
    --general-gaps-m: 12px;
    --general-gaps-XL-duplicate: 32px;
    /* Text colors */
    --text-primary-primary: #1F2023;
    --text-primary-primary-on-color: #FFF;
    --text-primary-disabled: rgba(31, 32, 35, 0.40);
    --text-accent-primary: #006EF0;
    --text-accent-secondary: rgba(0, 110, 240, 0.60);
    --text-status-critical-primary: #CA3939;
    --text-status-critical-tertiary: #ca3939;
    /* Text Sizes */
    --text-size-accent: 16px; /* ~16 px FullHD */
    --text-size-primary: 14px; /* ~14 px FullHD */
    --text-size-subtext: 12px; /* ~12 px FullHD */
    --text-line-height-accent: 120%;
    --text-line-height-primary: 140%;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-colors-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-colors-mode="light"] {
    --colors-bg-primary: var(--pallette-base-0);
    --colors-bg-secondary: var(--pallette-base-100);
    --colors-bg-tretiery: var(--pallette-base-50);
    --colors-bg-accent-secondary: var(--pallette-accent-primary-300);
    --colors-bg-accent-subdedube-primary: var(--pallette-accent-primary-50);
    --colors-text-primary: var(--pallette-base-900);
    --colors-text-secondary: var(--pallette-base-500);
    --colors-text-disabled: var(--pallette-base-300);
    --colors-text-accent-seconday: var(--pallette-accent-primary-300);
    --colors-button-secondary: var(--pallette-base-100);
    --colors-button-menu: var(--pallette-base-150);
    --colors-button-additional-1: var(--pallette-base-50);
    --colors-icon-primary: var(--pallette-base-900);
    --colors-icon-secondary: var(--pallette-base-500);
    --colors-icon-disabled: var(--pallette-base-300);
    --colors-icon-accent-secondary: var(--pallette-accent-primary-300);
    --colors-bg-accent-subdedube-additional-2: var(--pallette-accent-secondary-850);
    --colors-button-subdedube-additional-3: var(--pallette-accent-secondary-300);
}

[data-colors-mode="dark"] {
    --colors-bg-primary: var(--pallette-base-900);
    --colors-bg-secondary: var(--pallette-base-800);
    --colors-bg-tretiery: var(--pallette-base-850);
    --colors-bg-accent-secondary: var(--pallette-accent-primary-700);
    --colors-bg-accent-subdedube-primary: var(--pallette-accent-primary-850);
    --colors-text-primary: var(--pallette-base-50);
    --colors-text-secondary: var(--pallette-base-600);
    --colors-text-disabled: var(--pallette-base-700);
    --colors-text-accent-seconday: var(--pallette-accent-primary-700);
    --colors-button-secondary: var(--pallette-base-800);
    --colors-button-menu: var(--pallette-base-850);
    --colors-button-additional-1: var(--pallette-base-900);
    --colors-icon-primary: var(--pallette-base-50);
    --colors-bg-accent-subdedube-additional-1: var(--pallette-accent-secondary-150);
    --colors-icon-secondary: var(--pallette-base-600);
    --colors-icon-disabled: var(--pallette-base-700);
    --colors-icon-accent-secondary: var(--pallette-accent-primary-700);
    --colors-bg-accent-subdedube-additional-2: var(--pallette-accent-secondary-50);
    --colors-button-subdedube-additional-3: var(--pallette-accent-secondary-50);
}

[data-pallete-mode="light"] {
    --pallete-black-primary: rgba(30, 30, 30, 1);
}

[data-pallete-mode="dark"] {
    --pallete-black-primary: rgba(255, 255, 255, 1);
}