:root {
    /* Белый */
    --white: #ffffff;

    /* Зелёный */
    --green-light: #dff3e4;
    --green:       #4caf50;
    --green-dark:  #17602d;

    /* Синий */
    --blue-light: #dbeeff;
    --blue:       #0066cc;
    --blue-dark:  #004c99;

    /* Красный */
    --red-light:  #f8dddd;
    --red-medium: #eda5a5;
    --red:        #d83a3a;
    --red-dark:   #8f2020;

    /* Жёлтый */
    --yellow-light: #fff2c2;
    --yellow:       #e5b700;
    --yellow-dark:  #7a6000;

    /* Чёрный */
    --black-light: #666666;
    --black:       #333333;
    --black-dark:  #000000;

    /* Серый */
    --gray-light: #f2f2f2;
    --gray:       #dddddd;
    --gray-dark:  #999999;

    /* Публичная витрина MOTO-116 */
    --store-white:        #ffffff;
    --store-text:         #303030;
    --store-dark:         #212a31;
    --store-red:          #ed1d25;
    --store-red-action:   #d71920;
    --store-red-hover:    #b9151b;
    --store-yellow:       #fdd816;
    --store-yellow-light: #fff8d2;
    --store-surface:      #f5f5f5;
    --store-border:       #e2e2e2;
    --store-muted:        #6c6c6c;
}


/* =========================================================
   Белый
   ========================================================= */

/* Белый текст */
.white {
    color: var(--white);
}

/* Белый фон */
.bg-white {
    background-color: var(--white);
}


/* =========================================================
   Зелёный
   ========================================================= */

/* Зелёный текст */
.green-light {
    color: var(--green-light);
}

.green {
    color: var(--green);
}

.green-dark {
    color: var(--green-dark);
}

/* Зелёный фон */
.bg-green-light {
    background-color: var(--green-light);
}

.bg-green {
    background-color: var(--green);
}

.bg-green-dark {
    background-color: var(--green-dark);
}


/* =========================================================
   Синий
   ========================================================= */

/* Синий текст */
.blue-light {
    color: var(--blue-light);
}

.blue {
    color: var(--blue);
}

.blue-dark {
    color: var(--blue-dark);
}

/* Синий фон */
.bg-blue-light {
    background-color: var(--blue-light);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-blue-dark {
    background-color: var(--blue-dark);
}


/* =========================================================
   Красный
   ========================================================= */

/* Красный текст */
.red-light {
    color: var(--red-light);
}

.red-medium {
    color: var(--red-medium);
}

.red {
    color: var(--red);
}

.red-dark {
    color: var(--red-dark);
}

/* Красный фон */
.bg-red-light {
    background-color: var(--red-light);
}

.bg-red-medium {
    background-color: var(--red-medium) !important;
}

.bg-red {
    background-color: var(--red);
}

.bg-red-dark {
    background-color: var(--red-dark);
}


/* =========================================================
   Жёлтый
   ========================================================= */

/* Жёлтый текст */
.yellow-light {
    color: var(--yellow-light);
}

.yellow {
    color: var(--yellow);
}

.yellow-dark {
    color: var(--yellow-dark);
}

/* Жёлтый фон */
.bg-yellow-light {
    background-color: var(--yellow-light);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-yellow-dark {
    background-color: var(--yellow-dark);
}


/* =========================================================
   Чёрный
   ========================================================= */

/* Чёрный текст */
.black-light {
    color: var(--black-light);
}

.black {
    color: var(--black);
}

.black-dark {
    color: var(--black-dark);
}

/* Чёрный фон */
.bg-black-light {
    background-color: var(--black-light);
}

.bg-black {
    background-color: var(--black);
}

.bg-black-dark {
    background-color: var(--black-dark);
}


/* =========================================================
   Серый
   ========================================================= */

/* Серый текст */
.gray-light {
    color: var(--gray-light);
}

.gray {
    color: var(--gray);
}

.gray-dark {
    color: var(--gray-dark);
}

/* Серый фон */
.bg-gray-light {
    background-color: var(--gray-light);
}

.bg-gray {
    background-color: var(--gray);
}

.bg-gray-dark {
    background-color: var(--gray-dark);
}