html {
  /* Font Size */
  --font-size-xxs: 0.6153rem;
  --font-size-xs: 0.7692rem;
  --font-size-sm: 0.9230rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.1538rem;
  --font-size-xl: 1.4615rem;
  --font-size-xxl: 1.6153rem;
  --font-size-xxxl: 1.8461rem;
  --font-size: var(--font-size-md);

  /* Padding */
  --padding-md: calc(var(--font-size) * 1.2);
  --padding-sm: calc(var(--font-size) * 0.6);
  --padding-xs: calc(var(--font-size) * 0.4);
  --padding-xxs: calc(var(--font-size) * 0.2);
  --padding-lg: calc(var(--font-size) * 2.5);
  --padding-xl: calc(var(--font-size) * 5);

  /* Wrapper */
  --line-height-lg: calc(var(--font-size) * 4.5);
  --line-height-md: calc(var(--font-size) * 3.6);
  --line-height-sm: calc(var(--font-size) * 2.88);
  --line-height-xs: calc(var(--font-size) * 2.448);
  --line-height-xxs: calc(var(--font-size) * 2.08);

  /* Radius */
  --radius-sm: calc(var(--font-size) * 0.2);
  --radius-md: calc(var(--font-size) * 0.3);

  /* Scrollbars */
  --scrollbar-width: calc(var(--font-size) * 0.6);

  /* Modals */
  --modal-width: calc(var(--font-size) * 60);
  --modal-width-wide: calc(var(--font-size) * 70);
  --modal-width-skinny: calc(var(--font-size) * 30);

  /* Other */
  --drag-width: calc(var(--font-size) * 0.5);
  --height-nav: var(--line-height-sm);
}

.txt-xxs {
  font-size: var(--font-size-xxs) !important;
}

.txt-xs {
  font-size: var(--font-size-xs) !important;
}

.txt-sm {
  font-size: var(--font-size-sm) !important;
}

.txt-md {
  font-size: var(--font-size-md) !important;
}

.txt-lg {
  font-size: var(--font-size-lg) !important;
}

.txt-xl {
  font-size: var(--font-size-xl) !important;
}

.txt-xxl {
  font-size: var(--font-size-xxl) !important;
}
