:root {
    /** Links, underlines, other brand-colored elements */
    --color-actions: #d32b26;

    /** Buttons **/
    --colorButtonSecondary: #4bc78e;

    /** Payment buttons */
    --color-payment: #408FDA;

    /** Texts */
    --color-gray: #6e758a;
    --color-hover: color-mod(var(--color-actions) blackness(+10%));
    --mediumText: #373f52;

    /** Colors */
    --redColor: #d03931;

    /** Links */
    --linkColor: #235ccf;

    /** Borders */
    --lightGrayLine: #eceff3;

    /** Backgrounds */
    --grayBackground: #f7f7f9;
    --lightGrayBackground: #fbfbfc;

    /** Bounce timing function for transition */
    --bounceTiming: cubic-bezier(0.6, -0.28, 0.735, 0.045);

    /** General margin size between islands */
    --islandMargin: 15px;

    /** Island inner padding */
    --islandPadding: 25px;

    /** Site content will pulled up for this margin */
    --branding-negative-margin: -112px;

    /** Social networks colors */
    --vkColor: #547ba5;
    --twitterColor: #5ca4f6;
    --facebookColor: #30588f;

    /** Editor block inner width */
    --article-max-width: 650px;
    --editor-max-width: 590px;

    /** Additional fonts families */
    --serif-font: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans";

    /** z-index of article link */
    --article-link-z-index: 0;

    /** Default button styles */
    --button: {
        display: inline-block;
        font-size: 13.4px;
        line-height: 1em;
        letter-spacing: 0.2px;
        color: #fff;
        background: var(--color-payment);
        border-radius: 14.5px;
        padding: 8px 15px;

        &:hover {
            color: #fff;
            background: color-mod(var(--color-payment) blackness(+15%));
        }
    }

}

/**
* Custom media queries
*/
@custom-media --tablet all and (max-width: 1050px);
@custom-media --mobile all and (max-width: 767px);
@custom-media --not-mobile all and (min-width: 768px);
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
