@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeLight.woff2) format('woff2'),
  url(/assets/fonts/YRThreeLight.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeBold.woff2) format('woff2'),
  url(/assets/fonts/YRThreeBold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeBoldItalic.woff2) format('woff2'),
  url(/assets/fonts/YRThreeBoldItalic.woff) format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeBlackItalic.woff2) format('woff2'),
  url(/assets/fonts/YRThreeBlackItalic.woff) format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeBlack.woff2) format('woff2'),
  url(/assets/fonts/YRThreeBlack.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeMediumItalic.woff2) format('woff2'),
  url(/assets/fonts/YRThreeMediumItalic.woff) format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeMedium.woff2) format('woff2'),
  url(/assets/fonts/YRThreeMedium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YRThree';
  src: url(/assets/fonts/YRThreeLightItalic.woff2) format('woff2'),
  url(/assets/fonts/YRThreeLightItalic.woff) format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA Book';
  src: url(/assets/fonts/SnowflakeSansBETA-Bold.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Inline BETA';
  src: url(/assets/fonts/SnowflakeInlineBETA-Black.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeInlineBETA-Black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Black.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA Book';
  src: url(/assets/fonts/SnowflakeSansBETA-Bold.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA Book';
  src: url(/assets/fonts/SnowflakeSansBETA-Bold.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA Book';
  src: url(/assets/fonts/SnowflakeSansBETA-Book.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Book.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Inline BETA';
  src: url(/assets/fonts/SnowflakeInlineBETA-Black.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeInlineBETA-Black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Inline BETA';
  src: url(/assets/fonts/SnowflakeInlineBETA-Black.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeInlineBETA-Black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA Book';
  src: url(/assets/fonts/SnowflakeSansBETA-Book.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Book.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA Book';
  src: url(/assets/fonts/SnowflakeSansBETA-Book.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Book.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Light.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Black.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Black.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Black.woff) format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Medium.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Light.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Medium.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Light.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Snowflake Sans BETA';
  src: url(/assets/fonts/SnowflakeSansBETA-Medium.woff2) format('woff2'),
  url(/assets/fonts/SnowflakeSansBETA-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6{
  margin: 0.2em 0 0.3em;
}

h1{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-h1);
  font-size: var(--font-size-h1);
  letter-spacing: var(--letter-spacing-default);
}
h2{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-h2);
  font-size: var(--font-size-h2);
  letter-spacing: var(--letter-spacing-default);
}
h3{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-h3);
  font-size: var(--font-size-h3);
  letter-spacing: var(--letter-spacing-default);
}
h4{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-h4);
  font-size: var(--font-size-h4);
  letter-spacing: var(--letter-spacing-default);
}
h5{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-h5);
  font-size: var(--font-size-h5);
  letter-spacing: var(--letter-spacing-default);
}
h6{
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-h6);
  font-size: var(--font-size-h6);
  letter-spacing: var(--letter-spacing-default);
}
.text-large-bold{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-l);
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing-default);
}
.text-large-regular{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-l);
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing-default);
}
.text-medium-bold{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-m);
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing-default);
}
.text-medium-regular{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-m);
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing-default);
}
.text-small-bold{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-s);
  font-size: var(--font-size-s);
  letter-spacing: var(--letter-spacing-default);
}
.text-small-regular{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-s);
  font-size: var(--font-size-s);
  letter-spacing: var(--letter-spacing-default);
}
.caption-bold{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-caption);
  font-size: var(--font-size-caption);
  letter-spacing: var(--letter-spacing-default);
}
.caption-regular{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-caption);
  font-size: var(--font-size-caption);
  letter-spacing: var(--letter-spacing-default);
}

b, strong{
  font-weight: var(--font-weight-700)
}

.font-family-heading{
  font-family: var(--font-family-heading);
}
.font-family-body{
  font-family: var(--font-family-body);
}

p{
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-m);
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing-default);
}

label{
  font-size: var(--font-size-m);
}
.font-size-h1{
  font-size: var(--font-size-h1);
}
.font-size-h2{
  font-size: var(--font-size-h2);
}
.font-size-h3{
  font-size: var(--font-size-h3);
}
.font-size-h4{
  font-size: var(--font-size-h4);
}
.font-size-h5{
  font-size: var(--font-size-h5);
}
.font-size-h6{
  font-size: var(--font-size-h6);
}
.font-size-large{
  font-size: var(--font-size-l);
}
.font-size-medium{
  font-size: var(--font-size-m);
}
.font-size-small{
  font-size: var(--font-size-s);
}
.font-size-caption{
  font-size: var(--font-size-caption);
}
.font-size-button{
  font-size: var(--font-size-button);
}

.letter-spacing{
  letter-spacing: var(--letter-spacing-default);
}

.mono{
  font-family: monospace
}

.fw-100{
  font-weight:  var(--font-weight-100);
}
.fw-200{
  font-weight:  var(--font-weight-200);
}
.fw-300{
  font-weight:  var(--font-weight-300);
}
.fw-400,
.regular{
  font-weight:  var(--font-weight-400);
}
.fw-500{
  font-weight:  var(--font-weight-500);
}
.fw-600{
  font-weight:  var(--font-weight-600);
}
.fw-700,
.bold{
  font-weight: var(--font-weight-700);
}
.fw-800{
  font-weight:  var(--font-weight-800);
}
.fw-900{
  font-weight:  var(--font-weight-900);
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.uppercase{
  text-transform: uppercase;
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ol.number-list,
ul.number-list{
  list-style: decimal;
  margin: 1em 0 1em 2em;
  li{
    padding: var(--spacing-xxxs) 0;
  }
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.underline {
  text-decoration: underline;
}

a{
  text-decoration: underline;
  transition: color 200ms ease-in-out;
}
a:hover{
  color: var(--color-surface-brand-hover);
}
a:active{
  color: var(--color-surface-brand-press)
}

.hover-text-primary:hover {
  color: var(--color-surface-brand-hover);
}

.hover-bg-primary:hover {
  background-color: var(--color-surface-brand-hover);
}

.word-break-break-all {
  word-break: break-all;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize-first-letter::first-letter {
  text-transform: uppercase !important;
}

.single-line-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.max-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.max-1-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}