@font-face {
  font-family: 'TT Commons';
  src: local('TT Commons Regular'), local('TT-Commons--Regular'),
    url('/assets/fonts/TTCommons-Regular/TTCommons-Regular.woff2') format('woff2'),
    url('/assets/fonts/TTCommons-Regular/TTCommons-Regular.woff') format('woff'),
    url('/assets/fonts/TTCommons-Regular/TTCommons-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TT Commons';
  src: local('TT Commons Demi Bold'), local('TT-Commons--Demi-Bold'),
    url('/assets/fonts/TTCommons-DemiBold/TTCommons-DemiBold.woff2') format('woff2'),
    url('/assets/fonts/TTCommons-DemiBold/TTCommons-DemiBold.woff') format('woff'),
    url('/assets/fonts/TTCommons-DemiBold/TTCommons-DemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Typography */
  --font-family-base: 'TT Commons', sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 600;

  --font-size-sm: 16px;
  --line-height-sm: 20px;
  --letter-spacing-sm: -0.01em;

  --font-size-md: 18px;
  --line-height-md: 24px;
  --letter-spacing-md: -0.01em;

  /* Colors */
  --color-text: #ffffff;
  --color-bg: #000000;
  --color-accent: #F51B1B;
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}