/* ==================== */
/* БЛОК 1: БАЗОВЫЕ НАСТРОЙКИ */
/* ==================== */
:root {
    /* Шкала отступов (по умолчанию 1rem = 16px) */
    --spacer-0: 0;
    --spacer-1: 0.10rem;  /* 2px */
    --spacer-2: 0.5rem;   /* 8px */
    --spacer-3: 1rem;     /* 16px */
    --spacer-4: 1.5rem;   /* 24px */
    --spacer-5: 3rem;     /* 48px */
    --spacer-6: 4rem;     /* 64px */
    --spacer-7: 6rem;     /* 96px */
    
    /* Дополнительные переменные */
    --spacer-auto: auto;
}

/* ==================== */
/* БЛОК 2: ВНЕШНИЕ ОТСТУПЫ (MARGIN) */
/* ==================== */

/* Все стороны */
.m-0 { margin: var(--spacer-0); }
.m-1 { margin: var(--spacer-1); }
.m-2 { margin: var(--spacer-2); }
.m-3 { margin: var(--spacer-3); }
.m-4 { margin: var(--spacer-4); }
.m-5 { margin: var(--spacer-5); }
.m-6 { margin: var(--spacer-6); }
.m-7 { margin: var(--spacer-7); }
.m-auto { margin: var(--spacer-auto); }

/* Горизонтальные отступы (слева и справа) */
.mx-0 { margin-left: var(--spacer-0); margin-right: var(--spacer-0); }
.mx-1 { margin-left: var(--spacer-1); margin-right: var(--spacer-1); }
.mx-2 { margin-left: var(--spacer-2); margin-right: var(--spacer-2); }
.mx-3 { margin-left: var(--spacer-3); margin-right: var(--spacer-3); }
.mx-4 { margin-left: var(--spacer-4); margin-right: var(--spacer-4); }
.mx-5 { margin-left: var(--spacer-5); margin-right: var(--spacer-5); }
.mx-6 { margin-left: var(--spacer-6); margin-right: var(--spacer-6); }
.mx-7 { margin-left: var(--spacer-7); margin-right: var(--spacer-7); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Вертикальные отступы (сверху и снизу) */
.my-0 { margin-top: var(--spacer-0); margin-bottom: var(--spacer-0); }
.my-1 { margin-top: var(--spacer-1); margin-bottom: var(--spacer-1); }
.my-2 { margin-top: var(--spacer-2); margin-bottom: var(--spacer-2); }
.my-3 { margin-top: var(--spacer-3); margin-bottom: var(--spacer-3); }
.my-4 { margin-top: var(--spacer-4); margin-bottom: var(--spacer-4); }
.my-5 { margin-top: var(--spacer-5); margin-bottom: var(--spacer-5); }
.my-6 { margin-top: var(--spacer-6); margin-bottom: var(--spacer-6); }
.my-7 { margin-top: var(--spacer-7); margin-bottom: var(--spacer-7); }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Отдельные стороны */
.mt-0 { margin-top: var(--spacer-0); }
.mt-1 { margin-top: var(--spacer-1); }
.mt-2 { margin-top: var(--spacer-2); }
.mt-3 { margin-top: var(--spacer-3); }
.mt-4 { margin-top: var(--spacer-4); }
.mt-5 { margin-top: var(--spacer-5); }
.mt-6 { margin-top: var(--spacer-6); }
.mt-7 { margin-top: var(--spacer-7); }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: var(--spacer-0); }
.mb-1 { margin-bottom: var(--spacer-1); }
.mb-2 { margin-bottom: var(--spacer-2); }
.mb-3 { margin-bottom: var(--spacer-3); }
.mb-4 { margin-bottom: var(--spacer-4); }
.mb-5 { margin-bottom: var(--spacer-5); }
.mb-6 { margin-bottom: var(--spacer-6); }
.mb-7 { margin-bottom: var(--spacer-7); }
.mb-auto { margin-bottom: auto; }

.ms-0 { margin-left: var(--spacer-0); }  /* start - для LTR это слева */
.ms-1 { margin-left: var(--spacer-1); }
.ms-2 { margin-left: var(--spacer-2); }
.ms-3 { margin-left: var(--spacer-3); }
.ms-4 { margin-left: var(--spacer-4); }
.ms-5 { margin-left: var(--spacer-5); }
.ms-6 { margin-left: var(--spacer-6); }
.ms-7 { margin-left: var(--spacer-7); }
.ms-auto { margin-left: auto; }

.mr-0 { margin-right: var(--spacer-0); }  /* end - для LTR это справа */
.mr-1 { margin-right: var(--spacer-1); }
.mr-2 { margin-right: var(--spacer-2); }
.mr-3 { margin-right: var(--spacer-3); }
.mr-4 { margin-right: var(--spacer-4); }
.mr-5 { margin-right: var(--spacer-5); }
.mr-6 { margin-right: var(--spacer-6); }
.mr-7 { margin-right: var(--spacer-7); }
.mr-auto { margin-right: auto; }

/* ==================== */
/* БЛОК 3: ВНУТРЕННИЕ ОТСТУПЫ (PADDING) */
/* ==================== */

/* Все стороны */
.p-0 { padding: var(--spacer-0); }
.p-1 { padding: var(--spacer-1); }
.p-2 { padding: var(--spacer-2); }
.p-3 { padding: var(--spacer-3); }
.p-4 { padding: var(--spacer-4); }
.p-5 { padding: var(--spacer-5); }
.p-6 { padding: var(--spacer-6); }
.p-7 { padding: var(--spacer-7); }

/* Горизонтальные отступы */
.px-0 { padding-left: var(--spacer-0); padding-right: var(--spacer-0); }
.px-1 { padding-left: var(--spacer-1); padding-right: var(--spacer-1); }
.px-2 { padding-left: var(--spacer-2); padding-right: var(--spacer-2); }
.px-3 { padding-left: var(--spacer-3); padding-right: var(--spacer-3); }
.px-4 { padding-left: var(--spacer-4); padding-right: var(--spacer-4); }
.px-5 { padding-left: var(--spacer-5); padding-right: var(--spacer-5); }
.px-6 { padding-left: var(--spacer-6); padding-right: var(--spacer-6); }
.px-7 { padding-left: var(--spacer-7); padding-right: var(--spacer-7); }

/* Вертикальные отступы */
.py-0 { padding-top: var(--spacer-0); padding-bottom: var(--spacer-0); }
.py-1 { padding-top: var(--spacer-1); padding-bottom: var(--spacer-1); }
.py-2 { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); }
.py-3 { padding-top: var(--spacer-3); padding-bottom: var(--spacer-3); }
.py-4 { padding-top: var(--spacer-4); padding-bottom: var(--spacer-4); }
.py-5 { padding-top: var(--spacer-5); padding-bottom: var(--spacer-5); }
.py-6 { padding-top: var(--spacer-6); padding-bottom: var(--spacer-6); }
.py-7 { padding-top: var(--spacer-7); padding-bottom: var(--spacer-7); }

/* Отдельные стороны */
.pt-0 { padding-top: var(--spacer-0); }
.pt-1 { padding-top: var(--spacer-1); }
.pt-2 { padding-top: var(--spacer-2); }
.pt-3 { padding-top: var(--spacer-3); }
.pt-4 { padding-top: var(--spacer-4); }
.pt-5 { padding-top: var(--spacer-5); }
.pt-6 { padding-top: var(--spacer-6); }
.pt-7 { padding-top: var(--spacer-7); }

.pb-0 { padding-bottom: var(--spacer-0); }
.pb-1 { padding-bottom: var(--spacer-1); }
.pb-2 { padding-bottom: var(--spacer-2); }
.pb-3 { padding-bottom: var(--spacer-3); }
.pb-4 { padding-bottom: var(--spacer-4); }
.pb-5 { padding-bottom: var(--spacer-5); }
.pb-6 { padding-bottom: var(--spacer-6); }
.pb-7 { padding-bottom: var(--spacer-7); }

.ps-0 { padding-left: var(--spacer-0); }  /* start - слева */
.ps-1 { padding-left: var(--spacer-1); }
.ps-2 { padding-left: var(--spacer-2); }
.ps-3 { padding-left: var(--spacer-3); }
.ps-4 { padding-left: var(--spacer-4); }
.ps-5 { padding-left: var(--spacer-5); }
.ps-6 { padding-left: var(--spacer-6); }
.ps-7 { padding-left: var(--spacer-7); }

.pe-0 { padding-right: var(--spacer-0); }  /* end - справа */
.pe-1 { padding-right: var(--spacer-1); }
.pe-2 { padding-right: var(--spacer-2); }
.pe-3 { padding-right: var(--spacer-3); }
.pe-4 { padding-right: var(--spacer-4); }
.pe-5 { padding-right: var(--spacer-5); }
.pe-6 { padding-right: var(--spacer-6); }
.pe-7 { padding-right: var(--spacer-7); }

/* ==================== */
/* БЛОК 4: ОТРИЦАТЕЛЬНЫЕ ОТСТУПЫ */
/* ==================== */
.m-n1 { margin: calc(-1 * var(--spacer-1)); }
.m-n2 { margin: calc(-1 * var(--spacer-2)); }
.m-n3 { margin: calc(-1 * var(--spacer-3)); }
.m-n4 { margin: calc(-1 * var(--spacer-4)); }
.m-n5 { margin: calc(-1 * var(--spacer-5)); }

.mt-n1 { margin-top: calc(-1 * var(--spacer-1)); }
.mt-n2 { margin-top: calc(-1 * var(--spacer-2)); }
.mt-n3 { margin-top: calc(-1 * var(--spacer-3)); }
.mt-n4 { margin-top: calc(-1 * var(--spacer-4)); }
.mt-n5 { margin-top: calc(-1 * var(--spacer-5)); }

.mb-n1 { margin-bottom: calc(-1 * var(--spacer-1)); }
/* ... аналогично для других сторон */

/* ==================== */
/* БЛОК 5: ГАПЫ (GAP) ДЛЯ FLEX/GRID */
/* ==================== */
.gap-0 { gap: var(--spacer-0); }
.gap-1 { gap: var(--spacer-1); }
.gap-2 { gap: var(--spacer-2); }
.gap-3 { gap: var(--spacer-3); }
.gap-4 { gap: var(--spacer-4); }
.gap-5 { gap: var(--spacer-5); }

/* ==================== */
/* БЛОК 6: ШИРИНА И ВЫСОТА */
/* ==================== */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.mw-100 { max-width: 100%; }

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }
.mh-100 { max-height: 100%; }

/* Viewport единицы */
.vw-100 { width: 100vw; }
.vh-100 { height: 100vh; }
.min-vw-100 { min-width: 100vw; }
.min-vh-100 { min-height: 100vh; }

/* ==================== */
/* БЛОК 7: ПОЗИЦИОНИРОВАНИЕ */
/* ==================== */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

.top-0 { top: 0; }
.top-50 { top: 50%; }
.top-100 { top: 100%; }
.bottom-0 { bottom: 0; }
.bottom-50 { bottom: 50%; }
.bottom-100 { bottom: 100%; }
.start-0 { left: 0; }
.start-50 { left: 50%; }
.start-100 { left: 100%; }
.end-0 { right: 0; }
.end-50 { right: 50%; }
.end-100 { right: 100%; }

/* Трансформации для центрирования */
.translate-middle { transform: translate(-50%, -50%); }
.translate-middle-x { transform: translateX(-50%); }
.translate-middle-y { transform: translateY(-50%); }

/* ==================== */
/* БЛОК 8: ОТОБРАЖЕНИЕ (DISPLAY) */
/* ==================== */
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-grid { display: grid; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

/* ==================== */
/* БЛОК 9: FLEXBOX УТИЛИТЫ */
/* ==================== */

/* ==================== */
/* БЛОК 9a: СЕТКА (ROW / COL) */
/* ==================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}
.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    min-width: 0;
}
.col   { flex: 1 0 0%; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }

.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }

.flex-fill { flex: 1 1 auto; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* ==================== */
/* БЛОК 10: ТЕКСТ */
/* ==================== */
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }

.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 700; }
.fw-light { font-weight: 300; }
.fst-italic { font-style: italic; }
.fst-normal { font-style: normal; }

.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

/* ==================== */
/* БЛОК 11: ГРАНИЦЫ */
/* ==================== */
.border { border: 1px solid #dee2e6; }
.border-0 { border: 0; }
.border-top { border-top: 1px solid #dee2e6; }
.border-bottom { border-bottom: 1px solid #dee2e6; }
.rounded { border-radius: 0.375rem; }
.rounded-0 { border-radius: 0; }
.rounded-circle { border-radius: 50%; }
.rounded-pill { border-radius: 50rem; }

/* ==================== */
/* БЛОК 12: ОФОРМЛЕНИЕ ТЕКСТА */
/* ==================== */
.text-primary { color: #0d6efd; }
.text-secondary { color: #6c757d; }
.text-success { color: #198754; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #0dcaf0; }
.text-light { color: #f8f9fa; }
.text-dark { color: #212529; }
.text-white { color: #fff; }
.text-muted { color: #6c757d; }

.bg-primary { background-color: #0d6efd; }
.bg-secondary { background-color: #6c757d; }
.bg-success { background-color: #198754; }
.bg-danger { background-color: #dc3545; }
.bg-warning { background-color: #ffc107; }
.bg-info { background-color: #0dcaf0; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: #212529; }
.bg-white { background-color: #fff; }