@layer starter, reset, base, state, application;

.ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
.ff-label {font-family: 'Nunito Sans', sans-serif}
.ff-paragraph {font-family: 'Nunito Sans', sans-serif}
.fs-heading-default {font-size: 1.25rem}
.fs-heading-large {font-size: 1.5rem}
.fs-heading-small {font-size: 1rem}
.fs-heading-xlarge {font-size: 2rem}
.fs-heading-xsmall {font-size: 0.875rem}
.fs-label-default {font-size: 0.875rem}
.fs-label-large {font-size: 1rem}
.fs-label-small {font-size: 0.75rem}
.fs-label-xlarge {font-size: 1.25rem}
.fs-label-xsmall {font-size: 0.625rem}
.fs-paragraph-default {font-size: 1rem}
.fs-paragraph-large {font-size: 1.25rem}
.fs-paragraph-small {font-size: 0.875rem}
.fs-paragraph-xlarge {font-size: 1.5rem}
.fs-paragraph-xsmall {font-size: 0.75rem}
.fw-heading {font-weight: 700}
.fw-label {font-weight: 600}
.fw-paragraph {font-weight: 400}

    
@layer application {
  .ff-heading {font-family: 'Sofia Pro', SofiaPro, sans-serif}
  .ff-label {font-family: 'Nunito Sans', sans-serif}
  .ff-paragraph {font-family: 'Nunito Sans', sans-serif}
  .fs-heading-default {font-size: 1.25rem}
  .fs-heading-large {font-size: 1.5rem}
  .fs-heading-small {font-size: 1rem}
  .fs-heading-xlarge {font-size: 2rem}
  .fs-heading-xsmall {font-size: 0.875rem}
  .fs-label-default {font-size: 0.875rem}
  .fs-label-large {font-size: 1rem}
  .fs-label-small {font-size: 0.75rem}
  .fs-label-xlarge {font-size: 1.25rem}
  .fs-label-xsmall {font-size: 0.625rem}
  .fs-paragraph-default {font-size: 1rem}
  .fs-paragraph-large {font-size: 1.25rem}
  .fs-paragraph-small {font-size: 0.875rem}
  .fs-paragraph-xlarge {font-size: 1.5rem}
  .fs-paragraph-xsmall {font-size: 0.75rem}
  .fw-heading {font-weight: 700}
  .fw-label {font-weight: 600}
  .fw-paragraph {font-weight: 400}
  
}