/* =========================
	 FONT FAMILIES
========================= */

$font-family-base: "IBM Plex Mono", monospace;
$font-family-code: $font-family-base;

/* =========================
	 FONT WEIGHTS
========================= */

$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

/* =========================
	 FONT SIZES (scale)
========================= */

$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-md: 14px;
$font-size-base: 16px;
$font-size-lg: 17px;
$font-size-xl: 20px;

$font-size-h1: 36px;
$font-size-h2: 28px;
$font-size-h3: 24px;
$font-size-h4: 20px;
$font-size-h5: 18px;
$font-size-h6: 16px;

/* =========================
	 LINE HEIGHTS
========================= */

$line-height-base: 1;
$line-height-tight: 1.15;
$line-height-snug: 1.25;
$line-height-normal: 1.4;
$line-height-relaxed: 1.6;

/* =========================
	 LETTER SPACING
========================= */

$letter-spacing-tight: -0.01em;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.04em;

/* =========================
	 BASE TYPOGRAPHY
========================= */

html {
	font-size: 100%;
}

body {
	font-family: $font-family-base;
	font-size: $font-size-base;
	font-weight: $font-weight-regular;
	line-height: $line-height-relaxed;
	letter-spacing: $letter-spacing-normal;
}

/* =========================
	 HEADINGS
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $font-family-base;
	font-weight: $font-weight-semibold;
	line-height: $line-height-snug;
	margin: 0;

	&.contrast {
		background: $color-text-light;
		color: $color-black;
	}
}

h1 {
	font-size: $font-size-h1;
	letter-spacing: $letter-spacing-tight;
}

h2 {
	font-size: $font-size-h2;
}

h3 {
	font-size: $font-size-h3;
}

h4 {
	font-size: $font-size-h4;
}

h5 {
	font-size: $font-size-h5;
}

h6 {
	font-size: $font-size-h6;
	font-weight: $font-weight-medium;
}

/* =========================
	 TEXT VARIANTS
========================= */

.text,
p {
	font-size: $font-size-base;
	line-height: $line-height-relaxed;
}

.text-sm {
	font-size: $font-size-sm;
	line-height: $line-height-normal;
}

.text-lg {
	font-size: $font-size-lg;
	line-height: $line-height-relaxed;
}

.text-muted {
	font-size: $font-size-sm;
	color: $color-text-dark;
}

.text-strong,
strong {
	font-weight: $font-weight-semibold;
}

.text-bold {
	font-weight: $font-weight-bold;
}

.text-italic,
em {
	font-style: italic;
}

/* =========================
	 CODE / MONO
========================= */

code,
pre,
.code {
	font-family: $font-family-code;
	font-size: $font-size-base;
	line-height: $line-height-normal;
	background-color: $color-dark;
}

pre {
	font-size: $font-size-base;
	line-height: $line-height-relaxed;
	white-space: pre-wrap;
}

/* =========================
	 LINKS
========================= */

a {
	font-weight: $font-weight-medium;
	text-decoration: none;
}

.link {
	font-size: inherit;
	font-weight: $font-weight-medium;
}

/* =========================
	 LABELS / META
========================= */

.label {
	font-size: $font-size-sm;
	font-weight: $font-weight-medium;
	line-height: $line-height-normal;
}

.hint,
.meta {
	font-size: $font-size-xs;
	line-height: $line-height-normal;
}

/* =========================
	 TABLE TEXT
========================= */

.table {
	font-size: $font-size-sm;
	line-height: $line-height-normal;

	th {
		font-weight: $font-weight-semibold;
	}

	td {
		font-weight: $font-weight-regular;
	}
}

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

.list {
	font-size: $font-size-base;
	line-height: $line-height-relaxed;
}

.list-item {
	font-size: inherit;
}

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

.modal-title {
	font-size: $font-size-h4;
	font-weight: $font-weight-semibold;
}

.modal-body {
	font-size: $font-size-base;
}

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

.toast-title {
	font-size: $font-size-md;
	font-weight: $font-weight-semibold;
}

.toast-text {
	font-size: $font-size-sm;
	line-height: $line-height-normal;
}