:root {
    --color-black: #000;
    --color-white: #fff;

    --color-text-for-alert: #2e2e2e;

    --color-black-fill: #3c3c3c;
    --color-grey-fill: rgb(201, 201, 201);
    
    --color-black-for-svg: brightness(0);
    --color-white-for-svg: brightness(1) saturate(0);
    --color-white-for-svg-product: brightness(0) saturate(100%) invert(90%) sepia(99%) saturate(1%) hue-rotate(349deg) brightness(99%) contrast(93%);
    --color-dark-grey-for-svg: brightness(0) saturate(100%) invert(18%) sepia(11%) saturate(3%) hue-rotate(318deg) brightness(99%) contrast(83%);

    --color-black-shadow: #0000000d;
    --color-black-shadow-for-alert: rgba(0, 0, 0, 0.1);
    --color-black-shadow-for-basket: rgba(0, 0, 0, 0.2);

    --color-animation-basket-img: #3f575f;

    --color-animation-footer-link: #0000009f;
    --color-animation-background-footer-link: #00000012;
    --color-animation-background-product: #cfcfcf4e;
    --color-black-shadow-for-theme: rgba(0, 0, 0, 0.5);

    --color-background-for-product: #00000069;
    --color-background-for-alert: #bbbbbb;

    --color-white-gradient-for-animation: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.5) 50%,
        rgba(255,255,255,0) 100%
    );

    --opacity-for-product: 0.4;

    --animation-time: 0.6s;
    --animation--mode: ease;
}

[data-theme="dark"] {
    --color-black: #e7e6e6;
    --color-white: #1b1b1d;

    --color-text-for-alert: #d1d1d1;

    --color-black-fill: #c3c3c3;
    --color-grey-fill: rgb(54, 54, 54);

    --color-black-for-svg: brightness(0) invert(91%) saturate(1);
    --color-white-for-svg: brightness(0);
    --color-white-for-svg-product: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(791%) hue-rotate(334deg) brightness(100%) contrast(89%);
    --color-dark-grey-for-svg: brightness(0) saturate(100%) invert(65%) sepia(98%) saturate(5%) hue-rotate(37deg) brightness(98%) contrast(99%);;

    --color-animation-basket-img: #99d3ee;

    --color-black-shadow: rgba(231, 230, 230, 0.051);
    --color-black-shadow-for-alert: rgba(255, 255, 255, 0.1);
    --color-black-shadow-for-basket: rgba(255, 255, 255, 0.2);
    --color-black-shadow-for-theme: rgba(255, 255, 255, 0.5);

    --color-animation-footer-link: #bbbbbb9f;
    --color-animation-background-footer-link: #8a8a8a12;
    --color-animation-background-product: rgb(187, 187, 187);

    --color-background-for-product: rgba(0, 0, 0, 0.815);
    --color-background-for-alert: rgb(68, 68, 68);

    --color-white-gradient-for-animation: linear-gradient(
        120deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0) 100%
    );

    --opacity-for-product: 0.6;
}

*,
*::before,
*::after {
    transition: 
        background-color var(--animation-time) var(--animation--mode),
        color var(--animation-time) var(--animation--mode),
        border-color var(--animation-time) var(--animation--mode),
        fill var(--animation-time) var(--animation--mode),
        stroke var(--animation-time) var(--animation--mode),
        filter var(--animation-time) var(--animation--mode);
}

html {
    background: var(--color-white);
}