/*
 * Шкалы смысловых цветов: 100–900 — это доля самого цвета.
 *
 * `bg-danger-700` — тот же danger, взятый на 70 %; `bg-danger` без
 * ступени — он же на все 100. Ступень нигде не уводит цвет в тёмное:
 * 900 светлее базового, а не темнее его.
 *
 * Сделано прозрачностью от `--bs-<цвет>-rgb`, а не подмешиванием белого,
 * по двум причинам. Фон кабинета кремовый (`#F8F1ED`), и оттенок,
 * разбавленный белым, лежит на нём холодным пятном чужого тона, тогда как
 * прозрачный сохраняет отношение к подложке — на карточке, на серой
 * шапке и на цветной плашке одинаково. И значения берутся прямо из темы:
 * поменяется `--bs-danger` — вся шкала поедет за ним, пересобирать
 * нечего.
 *
 * Плата за это одна и названа честно: на тёмной подложке светлые ступени
 * будут темнее, чем на белой, — они её просвечивают. Там, где нужен
 * непрозрачный тон, берётся `-light`/`-active` темы.
 *
 * Белый в шкале — для того же, для чего он нужен поверх фотографии,
 * тёмной полосы меню или цветной плашки: `bg-white-200` осветляет
 * подложку, не закрывая её. На белом фоне он, разумеется, не виден.
 *
 * Значения продублированы переменными `--bs-<цвет>-<ступень>`: в своём
 * CSS оттенок берётся переменной, в разметке — классом.
 */

:root {
    /* primary */
    --bs-primary-100: rgba(var(--bs-primary-rgb), .1);
    --bs-primary-200: rgba(var(--bs-primary-rgb), .2);
    --bs-primary-300: rgba(var(--bs-primary-rgb), .3);
    --bs-primary-400: rgba(var(--bs-primary-rgb), .4);
    --bs-primary-500: rgba(var(--bs-primary-rgb), .5);
    --bs-primary-600: rgba(var(--bs-primary-rgb), .6);
    --bs-primary-700: rgba(var(--bs-primary-rgb), .7);
    --bs-primary-800: rgba(var(--bs-primary-rgb), .8);
    --bs-primary-900: rgba(var(--bs-primary-rgb), .9);

    /* success */
    --bs-success-100: rgba(var(--bs-success-rgb), .1);
    --bs-success-200: rgba(var(--bs-success-rgb), .2);
    --bs-success-300: rgba(var(--bs-success-rgb), .3);
    --bs-success-400: rgba(var(--bs-success-rgb), .4);
    --bs-success-500: rgba(var(--bs-success-rgb), .5);
    --bs-success-600: rgba(var(--bs-success-rgb), .6);
    --bs-success-700: rgba(var(--bs-success-rgb), .7);
    --bs-success-800: rgba(var(--bs-success-rgb), .8);
    --bs-success-900: rgba(var(--bs-success-rgb), .9);

    /* info */
    --bs-info-100: rgba(var(--bs-info-rgb), .1);
    --bs-info-200: rgba(var(--bs-info-rgb), .2);
    --bs-info-300: rgba(var(--bs-info-rgb), .3);
    --bs-info-400: rgba(var(--bs-info-rgb), .4);
    --bs-info-500: rgba(var(--bs-info-rgb), .5);
    --bs-info-600: rgba(var(--bs-info-rgb), .6);
    --bs-info-700: rgba(var(--bs-info-rgb), .7);
    --bs-info-800: rgba(var(--bs-info-rgb), .8);
    --bs-info-900: rgba(var(--bs-info-rgb), .9);

    /* warning */
    --bs-warning-100: rgba(var(--bs-warning-rgb), .1);
    --bs-warning-200: rgba(var(--bs-warning-rgb), .2);
    --bs-warning-300: rgba(var(--bs-warning-rgb), .3);
    --bs-warning-400: rgba(var(--bs-warning-rgb), .4);
    --bs-warning-500: rgba(var(--bs-warning-rgb), .5);
    --bs-warning-600: rgba(var(--bs-warning-rgb), .6);
    --bs-warning-700: rgba(var(--bs-warning-rgb), .7);
    --bs-warning-800: rgba(var(--bs-warning-rgb), .8);
    --bs-warning-900: rgba(var(--bs-warning-rgb), .9);

    /* danger */
    --bs-danger-100: rgba(var(--bs-danger-rgb), .1);
    --bs-danger-200: rgba(var(--bs-danger-rgb), .2);
    --bs-danger-300: rgba(var(--bs-danger-rgb), .3);
    --bs-danger-400: rgba(var(--bs-danger-rgb), .4);
    --bs-danger-500: rgba(var(--bs-danger-rgb), .5);
    --bs-danger-600: rgba(var(--bs-danger-rgb), .6);
    --bs-danger-700: rgba(var(--bs-danger-rgb), .7);
    --bs-danger-800: rgba(var(--bs-danger-rgb), .8);
    --bs-danger-900: rgba(var(--bs-danger-rgb), .9);

    /* dark */
    --bs-dark-100: rgba(var(--bs-dark-rgb), .1);
    --bs-dark-200: rgba(var(--bs-dark-rgb), .2);
    --bs-dark-300: rgba(var(--bs-dark-rgb), .3);
    --bs-dark-400: rgba(var(--bs-dark-rgb), .4);
    --bs-dark-500: rgba(var(--bs-dark-rgb), .5);
    --bs-dark-600: rgba(var(--bs-dark-rgb), .6);
    --bs-dark-700: rgba(var(--bs-dark-rgb), .7);
    --bs-dark-800: rgba(var(--bs-dark-rgb), .8);
    --bs-dark-900: rgba(var(--bs-dark-rgb), .9);

    /* white */
    --bs-white-100: rgba(var(--bs-white-rgb), .1);
    --bs-white-200: rgba(var(--bs-white-rgb), .2);
    --bs-white-300: rgba(var(--bs-white-rgb), .3);
    --bs-white-400: rgba(var(--bs-white-rgb), .4);
    --bs-white-500: rgba(var(--bs-white-rgb), .5);
    --bs-white-600: rgba(var(--bs-white-rgb), .6);
    --bs-white-700: rgba(var(--bs-white-rgb), .7);
    --bs-white-800: rgba(var(--bs-white-rgb), .8);
    --bs-white-900: rgba(var(--bs-white-rgb), .9);
}

/* Цвет текста. */
.text-primary-100 { color: var(--bs-primary-100) !important; }
.text-primary-200 { color: var(--bs-primary-200) !important; }
.text-primary-300 { color: var(--bs-primary-300) !important; }
.text-primary-400 { color: var(--bs-primary-400) !important; }
.text-primary-500 { color: var(--bs-primary-500) !important; }
.text-primary-600 { color: var(--bs-primary-600) !important; }
.text-primary-700 { color: var(--bs-primary-700) !important; }
.text-primary-800 { color: var(--bs-primary-800) !important; }
.text-primary-900 { color: var(--bs-primary-900) !important; }
.text-success-100 { color: var(--bs-success-100) !important; }
.text-success-200 { color: var(--bs-success-200) !important; }
.text-success-300 { color: var(--bs-success-300) !important; }
.text-success-400 { color: var(--bs-success-400) !important; }
.text-success-500 { color: var(--bs-success-500) !important; }
.text-success-600 { color: var(--bs-success-600) !important; }
.text-success-700 { color: var(--bs-success-700) !important; }
.text-success-800 { color: var(--bs-success-800) !important; }
.text-success-900 { color: var(--bs-success-900) !important; }
.text-info-100 { color: var(--bs-info-100) !important; }
.text-info-200 { color: var(--bs-info-200) !important; }
.text-info-300 { color: var(--bs-info-300) !important; }
.text-info-400 { color: var(--bs-info-400) !important; }
.text-info-500 { color: var(--bs-info-500) !important; }
.text-info-600 { color: var(--bs-info-600) !important; }
.text-info-700 { color: var(--bs-info-700) !important; }
.text-info-800 { color: var(--bs-info-800) !important; }
.text-info-900 { color: var(--bs-info-900) !important; }
.text-warning-100 { color: var(--bs-warning-100) !important; }
.text-warning-200 { color: var(--bs-warning-200) !important; }
.text-warning-300 { color: var(--bs-warning-300) !important; }
.text-warning-400 { color: var(--bs-warning-400) !important; }
.text-warning-500 { color: var(--bs-warning-500) !important; }
.text-warning-600 { color: var(--bs-warning-600) !important; }
.text-warning-700 { color: var(--bs-warning-700) !important; }
.text-warning-800 { color: var(--bs-warning-800) !important; }
.text-warning-900 { color: var(--bs-warning-900) !important; }
.text-danger-100 { color: var(--bs-danger-100) !important; }
.text-danger-200 { color: var(--bs-danger-200) !important; }
.text-danger-300 { color: var(--bs-danger-300) !important; }
.text-danger-400 { color: var(--bs-danger-400) !important; }
.text-danger-500 { color: var(--bs-danger-500) !important; }
.text-danger-600 { color: var(--bs-danger-600) !important; }
.text-danger-700 { color: var(--bs-danger-700) !important; }
.text-danger-800 { color: var(--bs-danger-800) !important; }
.text-danger-900 { color: var(--bs-danger-900) !important; }
.text-dark-100 { color: var(--bs-dark-100) !important; }
.text-dark-200 { color: var(--bs-dark-200) !important; }
.text-dark-300 { color: var(--bs-dark-300) !important; }
.text-dark-400 { color: var(--bs-dark-400) !important; }
.text-dark-500 { color: var(--bs-dark-500) !important; }
.text-dark-600 { color: var(--bs-dark-600) !important; }
.text-dark-700 { color: var(--bs-dark-700) !important; }
.text-dark-800 { color: var(--bs-dark-800) !important; }
.text-dark-900 { color: var(--bs-dark-900) !important; }
.text-white-100 { color: var(--bs-white-100) !important; }
.text-white-200 { color: var(--bs-white-200) !important; }
.text-white-300 { color: var(--bs-white-300) !important; }
.text-white-400 { color: var(--bs-white-400) !important; }
.text-white-500 { color: var(--bs-white-500) !important; }
.text-white-600 { color: var(--bs-white-600) !important; }
.text-white-700 { color: var(--bs-white-700) !important; }
.text-white-800 { color: var(--bs-white-800) !important; }
.text-white-900 { color: var(--bs-white-900) !important; }

/* Цвет фона. */
.bg-primary-100 { background-color: var(--bs-primary-100) !important; }
.bg-primary-200 { background-color: var(--bs-primary-200) !important; }
.bg-primary-300 { background-color: var(--bs-primary-300) !important; }
.bg-primary-400 { background-color: var(--bs-primary-400) !important; }
.bg-primary-500 { background-color: var(--bs-primary-500) !important; }
.bg-primary-600 { background-color: var(--bs-primary-600) !important; }
.bg-primary-700 { background-color: var(--bs-primary-700) !important; }
.bg-primary-800 { background-color: var(--bs-primary-800) !important; }
.bg-primary-900 { background-color: var(--bs-primary-900) !important; }
.bg-success-100 { background-color: var(--bs-success-100) !important; }
.bg-success-200 { background-color: var(--bs-success-200) !important; }
.bg-success-300 { background-color: var(--bs-success-300) !important; }
.bg-success-400 { background-color: var(--bs-success-400) !important; }
.bg-success-500 { background-color: var(--bs-success-500) !important; }
.bg-success-600 { background-color: var(--bs-success-600) !important; }
.bg-success-700 { background-color: var(--bs-success-700) !important; }
.bg-success-800 { background-color: var(--bs-success-800) !important; }
.bg-success-900 { background-color: var(--bs-success-900) !important; }
.bg-info-100 { background-color: var(--bs-info-100) !important; }
.bg-info-200 { background-color: var(--bs-info-200) !important; }
.bg-info-300 { background-color: var(--bs-info-300) !important; }
.bg-info-400 { background-color: var(--bs-info-400) !important; }
.bg-info-500 { background-color: var(--bs-info-500) !important; }
.bg-info-600 { background-color: var(--bs-info-600) !important; }
.bg-info-700 { background-color: var(--bs-info-700) !important; }
.bg-info-800 { background-color: var(--bs-info-800) !important; }
.bg-info-900 { background-color: var(--bs-info-900) !important; }
.bg-warning-100 { background-color: var(--bs-warning-100) !important; }
.bg-warning-200 { background-color: var(--bs-warning-200) !important; }
.bg-warning-300 { background-color: var(--bs-warning-300) !important; }
.bg-warning-400 { background-color: var(--bs-warning-400) !important; }
.bg-warning-500 { background-color: var(--bs-warning-500) !important; }
.bg-warning-600 { background-color: var(--bs-warning-600) !important; }
.bg-warning-700 { background-color: var(--bs-warning-700) !important; }
.bg-warning-800 { background-color: var(--bs-warning-800) !important; }
.bg-warning-900 { background-color: var(--bs-warning-900) !important; }
.bg-danger-100 { background-color: var(--bs-danger-100) !important; }
.bg-danger-200 { background-color: var(--bs-danger-200) !important; }
.bg-danger-300 { background-color: var(--bs-danger-300) !important; }
.bg-danger-400 { background-color: var(--bs-danger-400) !important; }
.bg-danger-500 { background-color: var(--bs-danger-500) !important; }
.bg-danger-600 { background-color: var(--bs-danger-600) !important; }
.bg-danger-700 { background-color: var(--bs-danger-700) !important; }
.bg-danger-800 { background-color: var(--bs-danger-800) !important; }
.bg-danger-900 { background-color: var(--bs-danger-900) !important; }
.bg-dark-100 { background-color: var(--bs-dark-100) !important; }
.bg-dark-200 { background-color: var(--bs-dark-200) !important; }
.bg-dark-300 { background-color: var(--bs-dark-300) !important; }
.bg-dark-400 { background-color: var(--bs-dark-400) !important; }
.bg-dark-500 { background-color: var(--bs-dark-500) !important; }
.bg-dark-600 { background-color: var(--bs-dark-600) !important; }
.bg-dark-700 { background-color: var(--bs-dark-700) !important; }
.bg-dark-800 { background-color: var(--bs-dark-800) !important; }
.bg-dark-900 { background-color: var(--bs-dark-900) !important; }
.bg-white-100 { background-color: var(--bs-white-100) !important; }
.bg-white-200 { background-color: var(--bs-white-200) !important; }
.bg-white-300 { background-color: var(--bs-white-300) !important; }
.bg-white-400 { background-color: var(--bs-white-400) !important; }
.bg-white-500 { background-color: var(--bs-white-500) !important; }
.bg-white-600 { background-color: var(--bs-white-600) !important; }
.bg-white-700 { background-color: var(--bs-white-700) !important; }
.bg-white-800 { background-color: var(--bs-white-800) !important; }
.bg-white-900 { background-color: var(--bs-white-900) !important; }