@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;

@layer odd.components {
  .odd-type-display {
    font-family: var(--odd-type-display-family);
    font-size: var(--odd-type-display-size);
    font-weight: var(--odd-type-display-weight);
    line-height: var(--odd-type-display-line-height);
    letter-spacing: var(--odd-type-display-letter-spacing);
    margin-block: 0;
  }
  .odd-type-title {
    font-family: var(--odd-type-title-family);
    font-size: var(--odd-type-title-size);
    font-weight: var(--odd-type-title-weight);
    line-height: var(--odd-type-title-line-height);
    letter-spacing: var(--odd-type-title-letter-spacing);
    margin-block: 0;
  }
  .odd-type-section {
    font-family: var(--odd-type-section-family);
    font-size: var(--odd-type-section-size);
    font-weight: var(--odd-type-section-weight);
    line-height: var(--odd-type-section-line-height);
    letter-spacing: var(--odd-type-section-letter-spacing);
    margin-block: 0;
  }
  .odd-type-body {
    font-family: var(--odd-type-body-family);
    font-size: var(--odd-type-body-size);
    font-weight: var(--odd-type-body-weight);
    line-height: var(--odd-type-body-line-height);
    letter-spacing: var(--odd-type-body-letter-spacing);
  }
  .odd-type-ui {
    font-family: var(--odd-type-ui-family);
    font-size: var(--odd-type-ui-size);
    font-weight: var(--odd-type-ui-weight);
    line-height: var(--odd-type-ui-line-height);
    letter-spacing: var(--odd-type-ui-letter-spacing);
  }
  .odd-type-small {
    font-family: var(--odd-type-small-family);
    font-size: var(--odd-type-small-size);
    font-weight: var(--odd-type-small-weight);
    line-height: var(--odd-type-small-line-height);
    letter-spacing: var(--odd-type-small-letter-spacing);
    color: var(--odd-color-text-secondary);
  }
  .odd-type-eyebrow {
    font-family: var(--odd-type-eyebrow-family);
    font-size: var(--odd-type-eyebrow-size);
    font-weight: var(--odd-type-eyebrow-weight);
    line-height: var(--odd-type-eyebrow-line-height);
    letter-spacing: var(--odd-type-eyebrow-letter-spacing);
    color: var(--odd-color-text-secondary);
  }
  .odd-type-code {
    font-family: var(--odd-type-code-family);
    font-size: var(--odd-type-code-size);
    font-weight: var(--odd-type-code-weight);
    line-height: var(--odd-type-code-line-height);
    letter-spacing: var(--odd-type-code-letter-spacing);
    color: var(--odd-color-text-secondary);
  }
  .odd-type-display, .odd-type-title, .odd-type-section {
    text-wrap: balance;
  }
}