/* SF UI Font Family */
@font-face {
    font-family: 'SF UI Display';
    src: url('SFUIDisplay-Regular.eot');
    src: url('SFUIDisplay-Regular.eot?#iefix') format('embedded-opentype'),
         url('SFUIDisplay-Regular.woff2') format('woff2'),
         url('SFUIDisplay-Regular.woff') format('woff'),
         url('SFUIDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('SFUIDisplay-Medium.eot');
    src: url('SFUIDisplay-Medium.eot?#iefix') format('embedded-opentype'),
         url('SFUIDisplay-Medium.woff2') format('woff2'),
         url('SFUIDisplay-Medium.woff') format('woff'),
         url('SFUIDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('SFUIDisplay-Semibold.eot');
    src: url('SFUIDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
         url('SFUIDisplay-Semibold.woff2') format('woff2'),
         url('SFUIDisplay-Semibold.woff') format('woff'),
         url('SFUIDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('SFUIDisplay-Bold.eot');
    src: url('SFUIDisplay-Bold.eot?#iefix') format('embedded-opentype'),
         url('SFUIDisplay-Bold.woff2') format('woff2'),
         url('SFUIDisplay-Bold.woff') format('woff'),
         url('SFUIDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('SFUIDisplay-Heavy.eot');
    src: url('SFUIDisplay-Heavy.eot?#iefix') format('embedded-opentype'),
         url('SFUIDisplay-Heavy.woff2') format('woff2'),
         url('SFUIDisplay-Heavy.woff') format('woff'),
         url('SFUIDisplay-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Display';
    src: url('SFUIDisplay-Light.eot');
    src: url('SFUIDisplay-Light.eot?#iefix') format('embedded-opentype'),
         url('SFUIDisplay-Light.woff2') format('woff2'),
         url('SFUIDisplay-Light.woff') format('woff'),
         url('SFUIDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Text';
    src: url('SFUIText-Regular.eot');
    src: url('SFUIText-Regular.eot?#iefix') format('embedded-opentype'),
         url('SFUIText-Regular.woff2') format('woff2'),
         url('SFUIText-Regular.woff') format('woff'),
         url('SFUIText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Text';
    src: url('SFUIText-Medium.eot');
    src: url('SFUIText-Medium.eot?#iefix') format('embedded-opentype'),
         url('SFUIText-Medium.woff2') format('woff2'),
         url('SFUIText-Medium.woff') format('woff'),
         url('SFUIText-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Text';
    src: url('SFUIText-Semibold.eot');
    src: url('SFUIText-Semibold.eot?#iefix') format('embedded-opentype'),
         url('SFUIText-Semibold.woff2') format('woff2'),
         url('SFUIText-Semibold.woff') format('woff'),
         url('SFUIText-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF UI Text';
    src: url('SFUIText-Bold.eot');
    src: url('SFUIText-Bold.eot?#iefix') format('embedded-opentype'),
         url('SFUIText-Bold.woff2') format('woff2'),
         url('SFUIText-Bold.woff') format('woff'),
         url('SFUIText-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Apply SF UI fonts globally */
body {
    font-family: 'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'SF UI Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn, button, input[type="button"], input[type="submit"] {
    font-family: 'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}