/* =========================
   SPACING SCALE
========================= */

$space-0: 0;
$space-1: 5px;
$space-2: 8px;
$space-3: 12px;
$space-4: 15px;
$space-5: 18px;
$space-6: 22px;
$space-7: 26px;
$space-8: 34px;
$space-9: 42px;
$space-10: 48px;
$space-11: 64px;
$space-12: 80px;

/* alias для читаемости */
$space-xs: $space-1;
$space-sm: $space-2;
$space-md: $space-4;
$space-lg: $space-6;
$space-xl: $space-8;
$space-xxl: $space-10;

/* map — для генерации утилит */
$spaces: (
  0: $space-0,
  1: $space-1,
  2: $space-2,
  3: $space-3,
  4: $space-4,
  5: $space-5,
  6: $space-6,
  7: $space-7,
  8: $space-8,
  9: $space-9,
  10: $space-10
);

/* =========================
   BASE LAYOUT
========================= */

.ui_container {
  padding: $space-xl;
}

.ui_section {
  margin-bottom: $space-xxl;
}

.ui_section_title {
  margin-bottom: $space-lg;
}

.ui_block {
  margin-bottom: $space-lg;
}

.ui_block_title {
  margin-bottom: $space-md;
}

/* =========================
   TEXT & CONTENT
========================= */

p,
.ui_text {
  margin-bottom: $space-md;
}

.ui_hint {
  margin-top: $space-sm;
}

/* =========================
   LISTS
========================= */

.ui_list {
  padding-left: $space-lg;
  margin-bottom: $space-md;
}

.ui_list_item {
  margin-bottom: $space-sm;
}

.ui_list_nested {
  margin-top: $space-sm;
}

/* =========================
   TABLES
========================= */

.ui_table {
  margin-bottom: $space-lg;
}

.ui_table_caption {
  margin-bottom: $space-sm;
}

/* =========================
   FORMS
========================= */

.ui_form_group {
  margin-bottom: $space-md;
}

.ui_label {
  margin-bottom: $space-xs;
  display: block;
}

.ui_input,
.ui_textarea,
.ui_select {
  margin-top: $space-xs;
}

/* =========================
   MODALS
========================= */

.ui_modal_header,
.ui_modal_footer {
  padding: $space-md $space-lg;
}

.ui_modal_body {
  padding: $space-lg;
}

/* =========================
   TOASTS
========================= */

.ui_toast {
  padding: $space-md;
}

.ui_toast_stack {
  gap: $space-sm;
}