@layer components {
    .heading-1 {
        @apply text-3xl font-semibold tracking-tight text-gray-900 dark:text-white;
    }

    .heading-2 {
        @apply text-2xl font-semibold tracking-tight text-gray-900 dark:text-white;
    }

    .heading-3 {
        @apply text-xl font-medium text-gray-800 dark:text-gray-200;
    }

    .heading-4 {
        @apply text-lg font-medium text-gray-800 dark:text-gray-200;
    }

    .heading-page {
        @apply text-3xl font-semibold tracking-tight;
    }

    .heading-section {
        @apply text-2xl font-semibold;
    }

    .heading-card {
        @apply text-lg font-medium;
    }
}
