:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    --safe-area-inset-left: env(safe-area-inset-left, 0);
    --safe-area-inset-right: env(safe-area-inset-right, 0);

    --blur-radius-l: 12.5px;

    /* Text & Icons */
    --color-primary: rgba(0, 0, 0, 1);
    --color-secondary: rgba(0, 0, 0, 0.45);
    --color-invert: rgba(255, 255, 255, 1);
    --color-link: rgba(0, 119, 255, 1);
    
    /* Background */
    --background-primary: rgba(255, 255, 255, 1);
    --background-primary-rgb: 255, 255, 255;
    --background-secondary: rgba(243, 243, 242, 1);
    --background-invert: rgba(47, 47, 50, 1);
    /* todo: заменить --color-invert-blur на --background-primary-blur после влития INSPIRE-5010 */
    --color-invert-blur: rgba(255, 255, 255, 0.65); 
    --background-primary-blur: rgba(255, 255, 255, 0.65);

    /* Control */
    --control-primary-background: rgba(0, 0, 0, 1);
    --control-primary-background-hover: rgba(0, 0, 0, 0.8);
    --control-primary-color: var(--color-invert);

    --control-secondary-background: rgba(0, 0, 0, 0.06);
    --control-secondary-background-hover: rgba(0, 0, 0, 0.12);
    --control-secondary-color: rgba(0, 0, 0, 1);

    --control-primary-blur-background: rgba(0, 0, 0, 0.18);
    --control-primary-blur-background-hover: rgba(0, 0, 0, 0.24);
    --control-primary-blur-color: var(--always-black); 

    --control-secondary-blur-background: rgba(37, 37, 37, 0.55);
    --control-secondary-blur-background-hover: rgba(37, 37, 37, 0.7);
    --control-secondary-blur-color: var(--always-white);

    --control-outline-background: rgba(0, 0, 0, 0.12);
    --control-outline-background-hover: rgba(0, 0, 0, 0.3);
    --control-outline-color: var(--color-primary);

    --control-invert-background: rgba(255, 255, 255, 1);
    --control-invert-background-hover: rgba(255, 255, 255, 0.8);
    --control-invert-color: var(--color-primary);

    --control-floating-background: rgba(255, 255, 255, 1);
    --control-floating-background-hover: rgba(255, 255, 255, 0.8);
    --control-floating-color: var(--color-primary);

    --control-disabled-background: var(--control-secondary-background);
    --control-disabled-background-hover: var(--control-secondary-background);
    --control-disabled-color: var(--color-secondary);

    /* Badges */
    --badge-black-blur: rgba(0, 0, 0, 0.24);
    --badge-white-blur: rgba(255, 255, 255, 0.24);
    --badge-verificated: rgba(0, 119, 255, 1);
    --badge-draft: rgba(0, 0, 0, 0.5);
    --badge-on-moderation: rgba(0, 119, 255, 1);
    --badge-limited: rgba(255, 83, 23, 1);
    --badge-public: rgba(0, 179, 65, 1);
    --badge-rejected: rgba(255, 51, 51, 1);

    /* Other */
    --overlay: rgba(0, 0, 0, 0.65);
    --divider: rgba(0, 0, 0, 0.12);
    --skeleton: rgba(0, 0, 0, 0.12);
    --error: rgba(255, 51, 51, 1);
    --always-white: rgba(255, 255, 255, 1);
    --always-black: rgba(0, 0, 0, 1);
    --warning: rgba(255, 51, 51, 1);
    --content-overlay-hard: rgba(0, 0, 0, 0.85);
    --content-overlay-medium: rgba(0, 0, 0, 0.45);
    --image-fill: rgba(0, 0, 0, 0.03);
    --like: var(--always-white);
    --accent: rgba(125, 50, 255, 1);
    --accent-purple: rgba(166, 91, 255, 1);
    
    --card-max-height: 100vh;

    /* deprecated */
    --color-danger: #FF3333;
    --color-warning: #FF5317;
    --color-success: #00B341;
    --placeholder: rgba(0, 0, 0, 0.12);
    --badge-danger-bg-color: rgba(255, 51, 51, 0.2);

    --control-tertiary-color: rgba(0, 0, 0, 1);
    --control-tertiary-background: rgba(0, 0, 0, 0.06);
    --control-tertiary-background-hover: rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark){
    :root {
        /* Text & Icons */
        --color-primary: rgba(255, 255, 255, 1);
        --color-secondary: rgba(255, 255, 255, 0.65);
        --color-invert: rgba(0, 0, 0, 1);
        --color-link: rgba(98, 170, 253, 1);

        /* Background */
        --background-primary: rgba(22, 22, 23, 1);
        --background-primary-rgb: 22, 22, 23;
        --background-secondary: rgba(0, 0, 0, 1);
        --background-invert: rgba(243, 243, 242, 1);
        /* todo: заменить --color-invert-blur на --background-primary-blur после влития INSPIRE-5010 */
        --color-invert-blur: rgba(0, 0, 0, 0.65);
        --background-primary-blur: rgba(22, 22, 23, 0.65);
        
        /* Control */
        --control-primary-background: rgba(255, 255, 255, 1);
        --control-primary-background-hover: rgba(255, 255, 255, 0.8);
        --control-primary-color: var(--color-invert);

        --control-secondary-background: rgba(255, 255, 255, 0.12);
        --control-secondary-background-hover: rgba(255, 255, 255, 0.24);
        --control-secondary-color: rgba(255, 255, 255, 1);

        --control-primary-blur-background: rgba(255, 255, 255, 0.8);
        --control-primary-blur-background-hover: rgba(255, 255, 255, 0.9);
        --control-primary-blur-color: var(--always-black); 
        
        --control-secondary-blur-background: rgba(37, 37, 37, 0.55);
        --control-secondary-blur-background-hover: rgba(37, 37, 37, 0.7);
        --control-secondary-blur-color: var(--always-white);

        --control-outline-background: rgba(255, 255, 255, 0.12);
        --control-outline-background-hover: rgba(255, 255, 255, 0.3);
        --control-outline-color: var(--color-primary);

        --control-invert-background: rgba(0, 0, 0, 1);
        --control-invert-background-hover: rgba(0, 0, 0, 0.5);
        --control-invert-color: var(--color-primary);

        --control-floating-background: rgba(50, 50, 52, 1);
        --control-floating-background-hover: rgba(125, 130, 130, 1);
        --control-floating-color: var(--color-primary);

        --control-disabled-background: var(--control-secondary-background);
        --control-disabled-background-hover: var(--control-secondary-background);
        --control-disabled-color: var(--color-secondary);

        /* Badges */
        --badge-black-blur: rgba(0, 0, 0, 0.24);
        --badge-white-blur: rgba(255, 255, 255, 0.24);
        --badge-verificated: rgba(98, 170, 253, 1);
        --badge-draft: rgba(255, 255, 255, 0.18);
        --badge-on-moderation: rgba(98, 170, 253, 1);
        --badge-limited: rgba(255, 123, 77, 1);
        --badge-public: rgba(39, 197, 90, 1);
        --badge-rejected: rgba(255, 91, 91, 1);

        /* Other */
        --overlay: rgba(0, 0, 0, 0.8);
        --divider: rgba(255, 255, 255, 0.12);
        --skeleton: rgba(255, 255, 255, 0.12);
        --error: rgba(255, 91, 91, 1);
        --always-white: rgba(255, 255, 255, 1);
        --always-black: rgba(0, 0, 0, 1);
        --warning: rgba(255, 91, 91, 1);
        --content-overlay-hard: rgba(0, 0, 0, 0.85);
        --content-overlay-medium: rgba(0, 0, 0, 0.45);
        --image-fill: rgba(0, 0, 0, 0.03);
        --like: var(--always-white);
        --accent: rgba(125, 50, 255, 1);
        --accent-purple: rgba(166, 91, 255, 1);

        --card-max-height: 100vh;

        /* deprecated */
        --placeholder: rgba(255, 255, 255, 0.12);
        --color-danger: #FF3333;
        --color-warning: #FF5317;
        --color-info: #0077FF;
        --color-success: #00B341;
        --badge-danger-bg-color: rgba(255, 51, 51, 0.2);

        --control-tertiary-color: rgba(255, 255, 255, 1);
        --control-tertiary-background: rgba(255, 255, 255, 0.12);
        --control-tertiary-background-hover: rgba(255, 255, 255, 0.24);
    }  
}

@media (max-width: 767px) {
    :root {
        /* 56px высота foot-ера */
        /* 52px высота head-ера */
        --card-max-height: calc(100dvh - 56px - 52px);
    }
}

#widget[data-theme="light"] {
    --safe-area-inset-top: env(safe-area-inset-top, 0);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    --safe-area-inset-left: env(safe-area-inset-left, 0);
    --safe-area-inset-right: env(safe-area-inset-right, 0);

    --blur-radius-l: 12.5px;

    --color-primary: #000000;
    --color-invert: #FFFFFF;
    --color-invert-blur: rgba(255, 255, 255, 0.65);
    --color-secondary: rgba(0, 0, 0, 0.45);
    --color-link: #0077FF;
    --color-danger: #FF3333;
    --color-warning: #FF5317;
    --color-success: #00B341;

    --background-primary: rgba(255, 255, 255, 1);
    --background-secondary: rgba(243, 243, 242, 1);
    --background-invert: rgba(47, 47, 50, 1);

    --placeholder: rgba(0, 0, 0, 0.12);

    --divider: rgba(0, 0, 0, 0.12);

    --overlay: rgba(0, 0, 0, 0.65);

    --control-primary-color: var(--color-invert);
    --control-primary-background: rgba(0, 0, 0, 1);
    --control-primary-background-hover: rgba(0, 0, 0, 0.8);

    --control-invert-color: var(--color-primary);
    --control-invert-background: rgba(255, 255, 255, 1);
    --control-invert-background-hover: rgba(255, 255, 255, 0.8);

    --control-secondary-color: rgba(0, 0, 0, 1);
    --control-secondary-background: rgba(0, 0, 0, 0.06);
    --control-secondary-background-hover: rgba(0, 0, 0, 0.12);

    --control-secondary-blur-color: var(--color-invert);
    --control-secondary-blur-background: rgba(37, 37, 37, 0.55);
    --control-secondary-blur-background-hover: rgba(37, 37, 37, 0.7);

    --control-disabled-color: rgba(0, 0, 0, 0.45);
    --control-disabled-background: rgba(0, 0, 0, 0.06);
    --control-disabled-background-hover: rgba(0, 0, 0, 0.06);

    --badge-danger-bg-color: rgba(255, 51, 51, 0.2);
    --card-max-height: 100vh;

    /* deprecated */
    --control-tertiary-color: rgba(0, 0, 0, 1);
    --control-tertiary-background: rgba(0, 0, 0, 0.06);
    --control-tertiary-background-hover: rgba(0, 0, 0, 0.12);
}

#widget[data-theme="dark"] {
    --color-primary: #FFFFFF;
    --color-invert: #000000;
    --color-secondary: rgba(255, 255, 255, 0.45);
    --color-link: #0077FF;
    --color-danger: #FF3333;
    --color-warning: #FF5317;
    --color-success: #00B341;

    --background-primary: rgba(22, 22, 23, 1);
    --background-invert: rgba(243, 243, 242, 1);
    --background-secondary: rgba(0, 0, 0, 1);
    --placeholder: rgba(255, 255, 255, 0.12);

    --divider: rgba(255, 255, 255, 0.12);

    --overlay: rgba(0, 0, 0, 0.3);

    --control-primary-color: var(--color-invert);
    --control-primary-background: rgba(255, 255, 255, 1);
    --control-primary-background-hover: rgba(255, 255, 255, 0.8);

    --control-invert-color: var(--color-primary);
    --control-invert-background: rgba(0, 0, 0, 1);
    --control-invert-background-hover: rgba(0, 0, 0, 0.5);

    --control-secondary-color: rgba(255, 255, 255, 1);
    --control-secondary-background: rgba(255, 255, 255, 0.12);
    --control-secondary-background-hover: rgba(255, 255, 255, 0.24);

    --control-secondary-blur-color: var(--color-primary);
    --control-secondary-blur-background: rgba(37, 37, 37, 0.55);
    --control-secondary-blur-background-hover: rgba(37, 37, 37, 0.7);

    --control-disabled-color: rgba(255, 255, 255, 0.65);
    --control-disabled-background: rgba(255, 255, 255, 0.12);
    --control-disabled-background-hover: rgba(255, 255, 255, 0.12);

    --badge-danger-bg-color: rgba(255, 51, 51, 0.2);
    --card-max-height: 100vh;

    /* deprecated */
    --control-tertiary-color: rgba(255, 255, 255, 1);
    --control-tertiary-background: rgba(255, 255, 255, 0.12);
    --control-tertiary-background-hover: rgba(255, 255, 255, 0.24);
}

/* todo: удалить после влития INSPIRE-6760 */
html[data-mobile-light="true"] {
    /* Text & Icons */
    --color-primary: rgba(0, 0, 0, 1);
    --color-secondary: rgba(0, 0, 0, 0.45);
    --color-invert: rgba(255, 255, 255, 1);
    --color-link: rgba(0, 119, 255, 1);
    
    /* Background */
    --background-primary: rgba(255, 255, 255, 1);
    --background-primary-rgb: 255, 255, 255;
    --background-secondary: rgba(243, 243, 242, 1);
    --background-invert: rgba(47, 47, 50, 1);
    --color-invert-blur: rgba(255, 255, 255, 0.65);
    --background-primary-blur: rgba(255, 255, 255, 0.65);
    
    /* Control */
    --control-primary-background: rgba(0, 0, 0, 1);
    --control-primary-background-hover: rgba(0, 0, 0, 0.8);
    --control-primary-color: var(--color-invert);

    --control-secondary-background: rgba(0, 0, 0, 0.06);
    --control-secondary-background-hover: rgba(0, 0, 0, 0.12);
    --control-secondary-color: rgba(0, 0, 0, 1);

    --control-primary-blur-background: rgba(0, 0, 0, 0.18);
    --control-primary-blur-background-hover: rgba(0, 0, 0, 0.24);
    --control-primary-blur-color: var(--always-black);

    --control-secondary-blur-background: rgba(37, 37, 37, 0.55);
    --control-secondary-blur-background-hover: rgba(37, 37, 37, 0.7);
    --control-secondary-blur-color: var(--always-white);

    --control-outline-background: rgba(0, 0, 0, 0.12);
    --control-outline-background-hover: rgba(0, 0, 0, 0.3);
    --control-outline-color: var(--color-primary);

    --control-invert-background: rgba(255, 255, 255, 1);
    --control-invert-background-hover: rgba(255, 255, 255, 0.8);
    --control-invert-color: var(--color-primary);

    --control-floating-background: rgba(255, 255, 255, 1);
    --control-floating-background-hover: rgba(255, 255, 255, 0.8);
    --control-floating-color: var(--color-primary);

    --control-disabled-background: var(--control-secondary-background);
    --control-disabled-background-hover: var(--control-secondary-background);
    --control-disabled-color: var(--color-secondary);

    /* Badges */
    --badge-black-blur: rgba(0, 0, 0, 0.24);
    --badge-white-blur: rgba(255, 255, 255, 0.24);
    --badge-verificated: rgba(0, 119, 255, 1);
    --badge-draft: rgba(0, 0, 0, 0.5);
    --badge-on-moderation: rgba(0, 119, 255, 1);
    --badge-limited: rgba(255, 83, 23, 1);
    --badge-public: rgba(0, 179, 65, 1);
    --badge-rejected: rgba(255, 51, 51, 1);

    /* Other */
    --overlay: rgba(0, 0, 0, 0.65);
    --divider: rgba(0, 0, 0, 0.12);
    --skeleton: rgba(0, 0, 0, 0.12);
    --error: rgba(255, 51, 51, 1);
    --always-white: rgba(255, 255, 255, 1);
    --always-black: rgba(0, 0, 0, 1);
    --warning: rgba(255, 51, 51, 1);
    --content-overlay-hard: rgba(0, 0, 0, 0.85);
    --content-overlay-medium: rgba(0, 0, 0, 0.45);
    --image-fill: rgba(0, 0, 0, 0.03);
    --like: var(--always-white);
    --accent: rgba(125, 50, 255, 1);
    --accent-purple: rgba(166, 91, 255, 1);
    
    --card-max-height: calc(100dvh - 56px - 52px);

    /* deprecated */
    --color-danger: #FF3333;
    --color-warning: #FF5317;
    --color-success: #00B341;
    --placeholder: rgba(0, 0, 0, 0.12);
    --badge-danger-bg-color: rgba(255, 51, 51, 0.2);

    --control-tertiary-color: rgba(0, 0, 0, 1);
    --control-tertiary-background: rgba(0, 0, 0, 0.06);
    --control-tertiary-background-hover: rgba(0, 0, 0, 0.12);
}