@use 'variables' as *;

#{$css-scope} {
  .headline, .title1 {
    font-size: calc(2.2 * var(--w-base-font-size));
    font-weight: 100;
  }

  .title2 {
    font-size: calc(1.7 * var(--w-base-font-size));
    font-weight: 400;
  }

  .title3 {
    font-size: calc(1.4 * var(--w-base-font-size));
    font-weight: 400;
  }

  .title4 {
    font-size: calc(1.25 * var(--w-base-font-size));
    font-weight: 400;
  }

  .title5 {
    font-size: calc(1.1 * var(--w-base-font-size));
    font-weight: 600;
  }

  .body {
    font-size: var(--w-base-font-size);
    font-weight: normal;
  }

  .caption {
    font-size: calc(0.85 * var(--w-base-font-size));
    font-style: italic;
    color: var(--w-caption-color);
  }

  .text-upper {text-transform: uppercase;}
  .text-lower {text-transform: lowercase;}
  .text-capitalize {text-transform: capitalize;}
  .text-light {font-weight: normal;}
  .text-bold {font-weight: bold;}
  .text-italic {font-style: italic;}
  .text-nowrap {white-space: nowrap;}
}