:root {
    --site-type-xs: 0.6875rem;
    --site-type-sm: 0.8125rem;
    --site-type-base: 0.875rem;
    --site-type-lg: 1rem;
    --site-type-xl: 1.125rem;
    --site-type-2xl: 1.25rem;
    --site-type-3xl: 1.375rem;
    --site-type-4xl: 1.5rem;
    --site-type-5xl: 1.75rem;
    --site-body-sm: var(--site-type-sm);
    --site-body-md: var(--site-type-base);
    --site-body-lg: var(--site-type-lg);
    --site-label-bold: var(--site-type-xs);
    --site-headline-sm: var(--site-type-lg);
    --site-headline-md: var(--site-type-2xl);
    --site-headline-lg: var(--site-type-4xl);
    --site-headline-lg-mobile: var(--site-type-4xl);
    --site-page-gutter: 0.75rem;
    --site-page-gutter-wide: 1.5rem;
    --site-table-cell-padding-block: 0.5rem;
    --site-table-cell-padding-inline: 0.625rem;
    --site-table-action-height: 2rem;
    --site-table-action-padding-inline: 0.5rem;
    --site-table-action-font-size: 0.75rem;
}

body {
    font-size: var(--site-body-md);
    line-height: 1.45;
}

.p-margin-mobile {
    padding: var(--site-page-gutter) !important;
}

table :is(th, td) {
    padding-block: var(--site-table-cell-padding-block) !important;
    padding-inline: var(--site-table-cell-padding-inline) !important;
}

h1,
.text-headline-lg {
    font-size: var(--site-headline-lg) !important;
    line-height: 1.2;
}

h2,
.text-headline-md {
    font-size: var(--site-headline-md) !important;
    line-height: 1.25;
}

h3,
.text-headline-sm {
    font-size: var(--site-headline-sm) !important;
    line-height: 1.35;
}

.text-headline-lg-mobile {
    font-size: var(--site-headline-lg-mobile) !important;
    line-height: 1.25;
}

.text-body-sm {
    font-size: var(--site-body-sm) !important;
}

.text-body-md {
    font-size: var(--site-body-md) !important;
}

.text-body-lg {
    font-size: var(--site-body-lg) !important;
}

.text-label-bold {
    font-size: var(--site-label-bold) !important;
}

.text-xs:not(.material-symbols-outlined) {
    font-size: var(--site-type-xs) !important;
}

.text-sm:not(.material-symbols-outlined) {
    font-size: var(--site-type-sm) !important;
}

.text-base:not(.material-symbols-outlined) {
    font-size: var(--site-type-base) !important;
}

.text-lg:not(.material-symbols-outlined) {
    font-size: var(--site-type-lg) !important;
}

.text-xl:not(.material-symbols-outlined) {
    font-size: var(--site-type-xl) !important;
}

.text-2xl:not(.material-symbols-outlined) {
    font-size: var(--site-type-2xl) !important;
}

.text-3xl:not(.material-symbols-outlined) {
    font-size: var(--site-type-3xl) !important;
}

.text-4xl:not(.material-symbols-outlined) {
    font-size: var(--site-type-4xl) !important;
}

.text-5xl:not(.material-symbols-outlined) {
    font-size: var(--site-type-5xl) !important;
}

.text-\[10px\]:not(.material-symbols-outlined),
.text-\[11px\]:not(.material-symbols-outlined),
.text-\[12px\]:not(.material-symbols-outlined) {
    font-size: var(--site-type-xs) !important;
}

.text-\[13px\]:not(.material-symbols-outlined) {
    font-size: var(--site-body-sm) !important;
}

.text-\[14px\]:not(.material-symbols-outlined) {
    font-size: var(--site-body-md) !important;
}

.text-\[16px\]:not(.material-symbols-outlined) {
    font-size: var(--site-body-lg) !important;
}

.text-\[18px\]:not(.material-symbols-outlined) {
    font-size: var(--site-type-xl) !important;
}

.text-\[20px\]:not(.material-symbols-outlined) {
    font-size: var(--site-type-2xl) !important;
}

.text-\[24px\]:not(.material-symbols-outlined) {
    font-size: var(--site-type-4xl) !important;
}

label,
button,
a {
    font-size: var(--site-body-sm);
}

.hint,
.notice,
.registration-inline {
    font-size: var(--site-body-sm);
}

@media (min-width: 768px) {
    :root {
        --site-type-2xl: 1.375rem;
        --site-type-3xl: 1.5rem;
        --site-type-4xl: 1.75rem;
        --site-type-5xl: 2rem;
        --site-table-cell-padding-block: 0.625rem;
        --site-table-cell-padding-inline: 0.75rem;
    }

    .md\:p-margin-desktop {
        padding: var(--site-page-gutter-wide) !important;
    }
}

@media (max-width: 767px) {
    table :is(a, button).inline-flex.h-9 {
        height: var(--site-table-action-height) !important;
        padding-inline: var(--site-table-action-padding-inline) !important;
        font-size: var(--site-table-action-font-size) !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}