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

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

.ui_text,
p {
  font-size: $font_size_base;
  line-height: $line_height_relaxed;
}

.ui_text_sm {
  font-size: $font_size_sm;
  line-height: $line_height_normal;
}

.ui_text_lg {
  font-size: $font_size_lg;
  line-height: $line_height_relaxed;
}

.ui_text_muted {
  font-size: $font_size_sm;
}

.ui_text_strong,
strong {
  font-weight: $font_weight_semibold;
}

.ui_text_bold {
  font-weight: $font_weight_bold;
}

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

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

code,
pre,
.ui_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;
}

.ui_link {
  font-size: inherit;
  font-weight: $font_weight_medium;
}

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

.ui_label {
  font-size: $font_size_sm;
  font-weight: $font_weight_medium;
  line-height: $line_height_normal;
}

.ui_hint,
.ui_meta {
  font-size: $font_size_xs;
  line-height: $line_height_normal;
}

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

.ui_table {
  font-size: $font_size_sm;
  line-height: $line_height_normal;
}

.ui_table th {
  font-weight: $font_weight_semibold;
}

.ui_table td {
  font-weight: $font_weight_regular;
}

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

.ui_list {
  font-size: $font_size_base;
  line-height: $line_height_relaxed;
}

.ui_list_item {
  font-size: inherit;
}

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

.ui_modal_title {
  font-size: $font_size_h4;
  font-weight: $font_weight_semibold;
}

.ui_modal_body {
  font-size: $font_size_base;
}

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

.ui_toast_title {
  font-size: $font_size_md;
  font-weight: $font_weight_semibold;
}

.ui_toast_text {
  font-size: $font_size_sm;
  line-height: $line_height_normal;
}

.text_muted {
  color: $color-text-dark;
}