/* Use this file for font styling */
:root {
  /* Font sizes */
  --font-size-h1: 6rem;
  --font-size-h2: 3.75rem;
  --font-size-h3: 3rem;
  --font-size-h4: 2.125rem;
  --font-size-h5: 1.5rem;
  --font-size-h6: 1.25rem;
  --font-size-body-1: 1rem;
  --font-size-body-2: 0.875rem;
  --font-size-small: 0.8125rem;
  --font-size-caption: 0.75rem;
  --font-size-overline: 0.625rem;

  --font-xxs: 0.5rem;
  --font-xs: 0.625rem;
  --font-s: 0.75rem;
  --font-md: 0.875rem;
  --font-main: 1rem;
  --font-lg: 1.125rem;
  --font-xlg: 1.25rem;
  --font-xxlg: 1.5rem;
  --font-xxxlg: 1.75rem;

  /* Generic Properties */
  --style-normal: normal;
  --style-italic: italic;
  --theme-font-family: Roboto;
  --theme-font-family-mono: Roboto Mono, monospace;

  /* Font weight */
  --fontWeight-thin: 300;
  --fontWeight-normal: 400;
  --fontWeight-semibold: 500;
  --fontWeight-bold: 600;
  --fontWeight-black: 700;
  --fontWeight-extrablack: 900;

  /* Letter spacing */
  --letter-spacing-light-1: -1.5px;
  --letter-spacing-light-2: -0.5px;
  --letter-spacing-regular: 0;
  --letter-spacing-medium: 0.25px;
  --letter-spacing-subtitle-1: 0.15px;
  --letter-spacing-subtitle-2: 0.1px;
  --letter-spacing-button: 0.75px;
  --letter-spacing-caption: 0.4px;
  --letter-spacing-overline: 1.5px;

  /* Line height */
  --line-height-h1: 9rem;
  --line-height-h2: 5.625rem;
  --line-height-h3: 4.5rem;
  --line-height-h4: 3.1875rem;
  --line-height-h5: 2.25rem;
  --line-height-h6: 1.875rem;
  --line-height-body: 1.5rem;
  --line-height-subtitle: 1.3125rem;
  --line-height-small: 1.125rem;
  --line-height-caption: 1rem;
  --line-height-tag: 3.25rem;
}

body {
  background: var(--color-faintGrey);
  margin: 0;
  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}