:root {
    /** Texts */
    --grayText: #555968;
    --lightGrayText: #8a92a5;
    --grayOnDark: #a1a6b3;
    --redText: #df2f2f;
    --greenText: #00b693;
    --pinkColor: #bc1453;
    --errorMessage: #cd4949;
    --yardGrayText: #8a97ab;

    /** Font families */
    --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    /** Error types modifiers */
    --fatalColor: #ff5151;
    --warningsColor: #af3232;
    --noticeColor: #717171;
    --javascriptColor: #9786da;
    --javascriptColorOnWhite: #5D49AE;

    /** Links */
    --linkColor: #4e37b5;
    --linkOnDark: #31ffac;
    --hoverColor: #7026bd;

    /** Backgrounds */
    --darkGrayBg: #292934;
    --buttonBg: #c5dff5;
    --submitButtonBg: #4592da;
    --lightGrayBg: #f7f8f9;
    --unreadBg: #effff7;
    --greenBg: #00bd77;
    --lightGreenBg: #edfff6;
    --yardBg: #1d1d27;

    /** Borders */
    --lightGrayLine: #edebeb;
    --grayLine: #d4d6d8;
    --grayBlueLine: #e6e9f2;

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

    /** Left sidebar width */
    --garage-aside-width: 250px;

    --beautiful-green-button {
        padding: 10px 17px;
        display: inline-block;
        color: #fff;
        background: var(--greenBg);
        font-size: 16.5px;
        font-weight: 700;
        box-shadow: 0 4px 5px -3px rgba(0, 189, 119, 0.85);
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            background: color(var(--greenBg) blackness(+5%));
        }
    }

}

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