/** Typography */

@mixin hero {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-3xl);
  line-height: var(--nano-line-height-denser);
  text-wrap: balance;
}

@mixin h1 {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-2xl);
  line-height: var(--nano-line-height-denser);
  text-wrap: balance;
}

@mixin h2 {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-xl);
  line-height: var(--nano-line-height-denser);
  text-wrap: balance;
}

@mixin h3 {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-lg);
  line-height: var(--nano-line-height-dense);
  text-wrap: balance;
}

@mixin h4 {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-md);
  line-height: var(--nano-line-height-dense);
  text-wrap: balance;
}

@mixin h5 {
  font-size: var(--nano-font-size-sm);
  line-height: var(--nano-line-height-normal);
  font-weight: var(--nano-font-weight-bold);
}

@mixin p {
  font-size: var(--nano-font-size-sm);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
}

@mixin quote {
  font-size: var(--nano-font-size-lg);
  line-height: var(--nano-line-height-dense);
  letter-spacing: var(--nano-letter-spacing-looser);
  margin-block-end: var(--nano-spacing-md);
  font-weight: var(--nano-font-weight-light);
}

@mixin text-small {
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
}

@mixin text-xs {
  font-size: var(--nano-font-size-2xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
}

@mixin surface-sunken {
  background-color: var(--nano-color-surface-50);
  box-shadow: var(--nano-shadow-ls);
}

@mixin surface-raised {
  background-color: var(--nano-color-surface-100);
  box-shadow: var(--nano-shadow-l1);
}

@mixin surface-overlay {
  background-color: var(--nano-color-surface-200);
  box-shadow: var(--nano-shadow-l2);
}

@mixin surface-lightbox {
  background-color: var(--nano-color-surface-300);
  box-shadow: var(--nano-shadow-l3);
}