.type-display {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 120%;
  letter-spacing: -2%;
}

.type-heading-l {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 120%;
  letter-spacing: -0.96px;
}

.type-heading-m {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(28px, 2.3vw, 32px);
  line-height: 130%;
 letter-spacing: -0.64px;
}

.text-heading-m-static {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-xl);
  line-height: 130%;
 letter-spacing: -0.64px;
}

.type-heading-s {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 1.2vw + 12px, 24px);
  line-height: 140%;
  letter-spacing: -0.48px;
}

.type-heading-s2 {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 140%;
  letter-spacing: -0.48px;
}

.type-subheading-l {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 140%;
  letter-spacing: -0.16px;
}

.type-subheading-l-bold {
  font-family: 'Trigonix';
  font-weight: 600;
  font-style: normal;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 140%;
  letter-spacing: -0.18px;
}
.type-subheading-l-bold-staticfont {
  font-family: 'Trigonix';
  font-weight: 600;
  font-style: normal;
  font-size: var(--font-md-lg);
  line-height: 140%;
  letter-spacing: -0.18px;
}

.type-subheading-m {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 0.7vw + 9px, 16px);
  line-height: 140%;
  letter-spacing: -0.16px;
}

.type-subheading-m-bold {
  font-family: 'Trigonix';
  font-weight: 600;
  font-style: normal;
  font-size: clamp(16px, 0.7vw + 9px, 16px);
  line-height: 140%;
  letter-spacing: -0.16px;
}

.type-subheading-s {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(12px, 0.6vw + 8px, 14px);
  line-height: 140%;
  letter-spacing: -0.5%;
}

.type-body-l {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 140%;
  letter-spacing: 0.09px;
}

.type-body-m {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.1vw, 16px);
  line-height: 140%;
  letter-spacing: -0.08px;
}
.type-body-m-static {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-md);
  line-height: 140%;
  letter-spacing: -0.08px;
}
.type-body-m-16-medium {
  font-family: 'Trigonix';
  font-weight: 500;
  font-style: normal;
  font-size: var(--font-md);
  line-height: 140%;
  letter-spacing: -0.08px;
}


.type-body-s {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 1vw, 14px);
  line-height: 140%;
  letter-spacing: -0.5%;
}

.type-caption {
  font-family: 'Trigonix';
  font-weight: 400;
  font-style: normal;
  font-size: clamp(11px, 0.5vw + 8px, 12px);
  line-height: 140%;
  letter-spacing: -0.12%;
}

.text-strong
{
  color: var(--text-strong);
}
.text-medium
{
  color: var(--text-medium);
}
.text-neutral {
  color: var(--text-neutral);
}
.text-subtle {
  color:  var(--text-subtle);
}
.text-faint {
  color: var(--text-faint);
}

.text-black, 
.text-color-black
{
  color: var(--text-black);
}

.text-white,
.text-color-white
{
  color: var(--text-white);
}

.border-neutral-top
{
 border-top: 1px solid var(--border-neutral);
}

/****** dark css start *******/
.text-strong-dark
{
  color: var(--text-strong-dark);
}
.text-medium-dark
{
  color: var(--text-medium-dark);
}
.text-neutral-dark {
  color: var(--text-neutral-dark);
}
.text-subtle-dark {
  color:  var(--text-subtle-dark);
}
.text-faint-dark {
  color: var(--text-faint-dark);
}
.text-periwinkle-shade-dark
{
 color: var(--text-periwinkle-shades-dark);
}

/****** dark css end *******/