/* =========================
	 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;

/* aliases for readability */
$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 — for utilities generation */
$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
========================= */

.container {
	padding: $space-5;
}

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

.section-title {
	margin-bottom: $space-xl;
}

.block {
	margin-bottom: $space-xl;
}

.block-title {
	margin-bottom: $space-lg;
}

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

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

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

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

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

.list-item {
	margin-bottom: $space-sm;
}

.list-nested {
	margin-top: $space-sm;
}

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

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

.table-caption {
	margin-bottom: $space-sm;
}

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

.form-group {
	margin-bottom: $space-md;
}

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

.input,
.textarea,
.select {
	margin-top: $space-xs;
}

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

.toast {
	padding: $space-md;
}

.toast-stack {
	gap: $space-sm;
}