@use 'variables';

@import '~@fontsource/ibm-plex-sans/300.css';
@import '~@fontsource/ibm-plex-sans/400.css';
@import '~@fontsource/ibm-plex-sans/400-italic.css';
@import '~@fontsource/ibm-plex-sans/500.css';
@import '~@fontsource/ibm-plex-sans/600.css';

@import '~@fontsource/ibm-plex-mono/500.css';

/**
 * Sans Serif
 */

// Default text styling for the app. No need to use it on component level as it's set globally.
%text-body {
  font-weight: normal;
  font-size: 16px;
  line-height: 1em;
}

// Heading 1
%face-sans-22-semi-bold {
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
}

// Heading 2
%face-sans-20-regular {
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}

// Heading 3
%face-sans-19-regular {
  font-weight: 400;
  font-size: 19px;
  line-height: 24px;
}

// Heading 4
%face-sans-18-medium {
  font-weight: 500;
  font-size: 18px;
  line-height: 1em;
}
%face-sans-18-regular {
  font-weight: 400;
  font-size: 18px;
  line-height: 1em;
}

%face-sans-16-semi-bold {
  font-weight: 600;
  font-size: 16px;
  line-height: 1em;
}
%face-sans-16-medium {
  font-weight: 500;
  font-size: 16px;
  line-height: 1em;
}

// Heading 5
%face-sans-15-semi-bold {
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}

// Labels
%face-sans-15-medium {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
}

// Descriptions
%face-sans-15-regular {
  font-weight: normal;
  font-size: 15px;
  line-height: 22px;
}

%face-sans-14-medium {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}
%face-sans-14-regular {
  font-weight: normal;
  font-size: 14px;
  line-height: 24px;
}
%face-sans-14-light {
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
}

%face-sans-13-medium {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}
%face-sans-13-regular {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
}

%face-sans-12-medium {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}
%face-sans-12-regular {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
}

/**
 * Monotype
 */

%face-mono-16-medium {
  font-family: variables.$font-mono;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

%face-mono-15-medium {
  font-family: variables.$font-mono;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
}

%face-mono-14-medium {
  font-family: variables.$font-mono;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
}

%face-mono-12-medium {
  font-family: variables.$font-mono;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

%face-mono-11-medium {
  font-family: variables.$font-mono;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
}

%face-mono-10-medium {
  font-family: variables.$font-mono;
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
}
