@use 'typography';

@mixin theme() {
  h1 {
    @include typography.typography-level(headline-1);
    margin: 0 0 16px;
  }

  h2 {
    @include typography.typography-level(headline-2);
    margin: 0 0 16px;
  }

  h3 {
    @include typography.typography-level(headline-3);
    margin: 0 0 16px;
  }

  h4 {
    @include typography.typography-level(headline-4);
    margin: 0 0 16px;
  }

  h5 {
    @include typography.typography-level(headline-5);
    margin: 0 0 12px;
  }

  h6 {
    @include typography.typography-level(headline-6);
    margin: 0 0 12px;
  }

  body,
  pre,
  .x-body {
    @include typography.typography-level(body-1);

    p {
      //margin: 0 0 12px;
    }
  }

  label {
    @include typography.typography-level(overline);
    text-transform: uppercase;
  }

  body strong {
    @include typography.typography-level(body-2);
  }

  .x-caption {
    @include typography.typography-level(caption);
  }

  .x-subtitle-1 {
    @include typography.typography-level(subtitle-1);
  }

  .x-subtitle-2 {
    @include typography.typography-level(subtitle-2);
  }
}