@layer global {
  :root {
    --blog-font-weight-regular: 400;
    --blog-font-weight-medium: 500;
    --blog-font-weight-semibold: 600;
    --blog-font-weight-bold: 700;
    --blog-font-weight-extrabold: 800;
    --blog-font-weight-black: 900;

    --blog-font-size-xs: 12px;
    --blog-font-size-sm: 14px;
    --blog-font-size-md: 16px;
    --blog-font-size-lg: 18px;
    --blog-font-size-xl: 20px;
    --blog-font-size-2xl: 24px;
    --blog-font-size-3xl: 28px;
    --blog-font-size-4xl: 32px;
    --blog-font-size-5xl: 46px;
    --blog-font-size-6xl: 64px;

    --blog-line-height-md: 22px;
    --blog-line-height-lg: 24px;
    --blog-line-height-xl: 28px;
    --blog-line-height-2xl: 32px;
    --blog-line-height-3xl: 38px;
    --blog-line-height-4xl: 46px;

    --blog-headline-margin-bottom: 16px;

    --blog-headline-h1-font-size: var(--blog-font-size-5xl);
    --blog-headline-h1-font-weight: var(--blog-font-weight-black);
    --blog-headline-h1-line-height: var(--blog-line-height-4xl);

    --blog-headline-h2-font-size: var(--blog-font-size-4xl);
    --blog-headline-h2-font-weight: var(--blog-font-weight-extrabold);
    --blog-headline-h2-line-height: var(--blog-line-height-3xl);

    --blog-headline-h3-font-size: var(--blog-font-size-3xl);
    --blog-headline-h3-font-weight: var(--blog-font-weight-extrabold);
    --blog-headline-h3-line-height: var(--blog-line-height-lg);

    --blog-headline-h4-font-size: var(--blog-font-size-2xl);
    --blog-headline-h4-font-weight: var(--blog-font-weight-extrabold);
    --blog-headline-h4-line-height: var(--blog-line-height-2xl);

    --blog-headline-h5-font-size: var(--blog-font-size-lg);
    --blog-headline-h5-font-weight: var(--blog-font-weight-extrabold);
    --blog-headline-h5-line-height: var(--blog-line-height-lg);

    --blog-headline-h6-font-size: var(--blog-font-size-md);
    --blog-headline-h6-font-weight: var(--blog-font-weight-bold);
    --blog-headline-h6-line-height: var(--blog-line-height-md);
  }
}