.fi-color-danger {
    --color-50: var(--danger-50);
    --color-100: var(--danger-100);
    --color-200: var(--danger-200);
    --color-300: var(--danger-300);
    --color-400: var(--danger-400);
    --color-500: var(--danger-500);
    --color-600: var(--danger-600);
    --color-700: var(--danger-700);
    --color-800: var(--danger-800);
    --color-900: var(--danger-900);
    --color-950: var(--danger-950);
}

.fi-color-gray {
    --color-50: var(--gray-50);
    --color-100: var(--gray-100);
    --color-200: var(--gray-200);
    --color-300: var(--gray-300);
    --color-400: var(--gray-400);
    --color-500: var(--gray-500);
    --color-600: var(--gray-600);
    --color-700: var(--gray-700);
    --color-800: var(--gray-800);
    --color-900: var(--gray-900);
    --color-950: var(--gray-950);
}

.fi-color-info {
    --color-50: var(--info-50);
    --color-100: var(--info-100);
    --color-200: var(--info-200);
    --color-300: var(--info-300);
    --color-400: var(--info-400);
    --color-500: var(--info-500);
    --color-600: var(--info-600);
    --color-700: var(--info-700);
    --color-800: var(--info-800);
    --color-900: var(--info-900);
    --color-950: var(--info-950);
}

.fi-color-primary {
    --color-50: var(--primary-50);
    --color-100: var(--primary-100);
    --color-200: var(--primary-200);
    --color-300: var(--primary-300);
    --color-400: var(--primary-400);
    --color-500: var(--primary-500);
    --color-600: var(--primary-600);
    --color-700: var(--primary-700);
    --color-800: var(--primary-800);
    --color-900: var(--primary-900);
    --color-950: var(--primary-950);
}

.fi-color-success {
    --color-50: var(--success-50);
    --color-100: var(--success-100);
    --color-200: var(--success-200);
    --color-300: var(--success-300);
    --color-400: var(--success-400);
    --color-500: var(--success-500);
    --color-600: var(--success-600);
    --color-700: var(--success-700);
    --color-800: var(--success-800);
    --color-900: var(--success-900);
    --color-950: var(--success-950);
}

.fi-color-warning {
    --color-50: var(--warning-50);
    --color-100: var(--warning-100);
    --color-200: var(--warning-200);
    --color-300: var(--warning-300);
    --color-400: var(--warning-400);
    --color-500: var(--warning-500);
    --color-600: var(--warning-600);
    --color-700: var(--warning-700);
    --color-800: var(--warning-800);
    --color-900: var(--warning-900);
    --color-950: var(--warning-950);
}

.fi-bg-color-50 {
    --bg: var(--color-50);
}

.fi-bg-color-100 {
    --bg: var(--color-100);
}

.fi-bg-color-200 {
    --bg: var(--color-200);
}

.fi-bg-color-300 {
    --bg: var(--color-300);
}

.fi-bg-color-400 {
    --bg: var(--color-400);
}

.fi-bg-color-500 {
    --bg: var(--color-500);
}

.fi-bg-color-600 {
    --bg: var(--color-600);
}

.fi-bg-color-700 {
    --bg: var(--color-700);
}

.fi-bg-color-800 {
    --bg: var(--color-800);
}

.fi-bg-color-900 {
    --bg: var(--color-900);
}

.fi-bg-color-950 {
    --bg: var(--color-950);
}

.hover\:fi-bg-color-50 {
    --hover-bg: var(--color-50);
}

.hover\:fi-bg-color-100 {
    --hover-bg: var(--color-100);
}

.hover\:fi-bg-color-200 {
    --hover-bg: var(--color-200);
}

.hover\:fi-bg-color-300 {
    --hover-bg: var(--color-300);
}

.hover\:fi-bg-color-400 {
    --hover-bg: var(--color-400);
}

.hover\:fi-bg-color-500 {
    --hover-bg: var(--color-500);
}

.hover\:fi-bg-color-600 {
    --hover-bg: var(--color-600);
}

.hover\:fi-bg-color-700 {
    --hover-bg: var(--color-700);
}

.hover\:fi-bg-color-800 {
    --hover-bg: var(--color-800);
}

.hover\:fi-bg-color-900 {
    --hover-bg: var(--color-900);
}

.hover\:fi-bg-color-950 {
    --hover-bg: var(--color-950);
}

.dark\:fi-bg-color-50 {
    --dark-bg: var(--color-50);
}

.dark\:fi-bg-color-100 {
    --dark-bg: var(--color-100);
}

.dark\:fi-bg-color-200 {
    --dark-bg: var(--color-200);
}

.dark\:fi-bg-color-300 {
    --dark-bg: var(--color-300);
}

.dark\:fi-bg-color-400 {
    --dark-bg: var(--color-400);
}

.dark\:fi-bg-color-500 {
    --dark-bg: var(--color-500);
}

.dark\:fi-bg-color-600 {
    --dark-bg: var(--color-600);
}

.dark\:fi-bg-color-700 {
    --dark-bg: var(--color-700);
}

.dark\:fi-bg-color-800 {
    --dark-bg: var(--color-800);
}

.dark\:fi-bg-color-900 {
    --dark-bg: var(--color-900);
}

.dark\:fi-bg-color-950 {
    --dark-bg: var(--color-950);
}

.dark\:hover\:fi-bg-color-50 {
    --dark-hover-bg: var(--color-50);
}

.dark\:hover\:fi-bg-color-100 {
    --dark-hover-bg: var(--color-100);
}

.dark\:hover\:fi-bg-color-200 {
    --dark-hover-bg: var(--color-200);
}

.dark\:hover\:fi-bg-color-300 {
    --dark-hover-bg: var(--color-300);
}

.dark\:hover\:fi-bg-color-400 {
    --dark-hover-bg: var(--color-400);
}

.dark\:hover\:fi-bg-color-500 {
    --dark-hover-bg: var(--color-500);
}

.dark\:hover\:fi-bg-color-600 {
    --dark-hover-bg: var(--color-600);
}

.dark\:hover\:fi-bg-color-700 {
    --dark-hover-bg: var(--color-700);
}

.dark\:hover\:fi-bg-color-800 {
    --dark-hover-bg: var(--color-800);
}

.dark\:hover\:fi-bg-color-900 {
    --dark-hover-bg: var(--color-900);
}

.dark\:hover\:fi-bg-color-950 {
    --dark-hover-bg: var(--color-950);
}

.fi-text-color-0 {
    --text: oklch(1 0 0);
}

.fi-text-color-50 {
    --text: var(--color-50);
}

.fi-text-color-100 {
    --text: var(--color-100);
}

.fi-text-color-200 {
    --text: var(--color-200);
}

.fi-text-color-300 {
    --text: var(--color-300);
}

.fi-text-color-400 {
    --text: var(--color-400);
}

.fi-text-color-500 {
    --text: var(--color-500);
}

.fi-text-color-600 {
    --text: var(--color-600);
}

.fi-text-color-700 {
    --text: var(--color-700);
}

.fi-text-color-800 {
    --text: var(--color-800);
}

.fi-text-color-900 {
    --text: var(--color-900);
}

.fi-text-color-950 {
    --text: var(--color-950);
}

.hover\:fi-text-color-0 {
    --hover-text: oklch(1 0 0);
}

.hover\:fi-text-color-50 {
    --hover-text: var(--color-50);
}

.hover\:fi-text-color-100 {
    --hover-text: var(--color-100);
}

.hover\:fi-text-color-200 {
    --hover-text: var(--color-200);
}

.hover\:fi-text-color-300 {
    --hover-text: var(--color-300);
}

.hover\:fi-text-color-400 {
    --hover-text: var(--color-400);
}

.hover\:fi-text-color-500 {
    --hover-text: var(--color-500);
}

.hover\:fi-text-color-600 {
    --hover-text: var(--color-600);
}

.hover\:fi-text-color-700 {
    --hover-text: var(--color-700);
}

.hover\:fi-text-color-800 {
    --hover-text: var(--color-800);
}

.hover\:fi-text-color-900 {
    --hover-text: var(--color-900);
}

.hover\:fi-text-color-950 {
    --hover-text: var(--color-950);
}

.dark\:fi-text-color-0 {
    --dark-text: oklch(1 0 0);
}

.dark\:fi-text-color-50 {
    --dark-text: var(--color-50);
}

.dark\:fi-text-color-100 {
    --dark-text: var(--color-100);
}

.dark\:fi-text-color-200 {
    --dark-text: var(--color-200);
}

.dark\:fi-text-color-300 {
    --dark-text: var(--color-300);
}

.dark\:fi-text-color-400 {
    --dark-text: var(--color-400);
}

.dark\:fi-text-color-500 {
    --dark-text: var(--color-500);
}

.dark\:fi-text-color-600 {
    --dark-text: var(--color-600);
}

.dark\:fi-text-color-700 {
    --dark-text: var(--color-700);
}

.dark\:fi-text-color-800 {
    --dark-text: var(--color-800);
}

.dark\:fi-text-color-900 {
    --dark-text: var(--color-900);
}

.dark\:fi-text-color-950 {
    --dark-text: var(--color-950);
}

.dark\:hover\:fi-text-color-0 {
    --dark-hover-text: oklch(1 0 0);
}

.dark\:hover\:fi-text-color-50 {
    --dark-hover-text: var(--color-50);
}

.dark\:hover\:fi-text-color-100 {
    --dark-hover-text: var(--color-100);
}

.dark\:hover\:fi-text-color-200 {
    --dark-hover-text: var(--color-200);
}

.dark\:hover\:fi-text-color-300 {
    --dark-hover-text: var(--color-300);
}

.dark\:hover\:fi-text-color-400 {
    --dark-hover-text: var(--color-400);
}

.dark\:hover\:fi-text-color-500 {
    --dark-hover-text: var(--color-500);
}

.dark\:hover\:fi-text-color-600 {
    --dark-hover-text: var(--color-600);
}

.dark\:hover\:fi-text-color-700 {
    --dark-hover-text: var(--color-700);
}

.dark\:hover\:fi-text-color-800 {
    --dark-hover-text: var(--color-800);
}

.dark\:hover\:fi-text-color-900 {
    --dark-hover-text: var(--color-900);
}

.dark\:hover\:fi-text-color-950 {
    --dark-hover-text: var(--color-950);
}

.fi-sr-only {
    @apply sr-only;
}

.fi-prose {
    --prose-color: var(--color-gray-700);
    --prose-heading-color: var(--color-gray-950);
    --prose-strong-color: var(--color-gray-950);
    --prose-link-color: var(--color-gray-950);
    --prose-code-color: var(--color-gray-950);
    --prose-marker-color: color-mix(
        in oklab,
        var(--color-gray-700) 25%,
        transparent
    );
    --prose-link-underline-color: var(--color-primary-400);
    --prose-th-borders: var(--color-gray-300);
    --prose-td-borders: var(--color-gray-200);
    --prose-hr-color: color-mix(
        in oklab,
        var(--color-gray-950) 5%,
        transparent
    );
    --prose-blockquote-border-color: var(--color-gray-300);

    &:where(.dark, .dark *) {
        --prose-color: var(--color-gray-300);
        --prose-heading-color: var(--color-white);
        --prose-strong-color: var(--color-white);
        --prose-link-color: var(--color-white);
        --prose-code-color: var(--color-white);
        --prose-marker-color: color-mix(
            in oklab,
            var(--color-gray-300) 35%,
            transparent
        );
        --prose-link-underline-color: var(--color-sky-400);
        --prose-th-borders: var(--color-gray-600);
        --prose-td-borders: var(--color-gray-700);
        --prose-hr-color: color-mix(
            in oklab,
            var(--color-white) 10%,
            transparent
        );
        --prose-blockquote-border-color: var(--color-gray-600);
    }

    color: var(--prose-color);
    font-size: var(--text-sm);
    line-height: 1.5;

    *:where(:not(.fi-not-prose, .fi-not-prose *))
        + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-top: calc(var(--spacing) * 4);
    }

    h1:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-size: var(--text-xl);
        line-height: calc(28 / 18);
        letter-spacing: -0.025em;
        color: var(--prose-code-color);
        font-weight: var(--font-weight-bold);
    }

    h2:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-size: var(--text-lg);
        line-height: calc(28 / 18);
        letter-spacing: -0.025em;
        color: var(--prose-code-color);
        font-weight: var(--font-weight-semibold);
    }

    h3:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-size: var(--text-base);
        line-height: calc(28 / 18);
        color: var(--prose-heading-color);
        font-weight: var(--font-weight-semibold);
    }

    h4:where(:not(.fi-not-prose, .fi-not-prose *)),
    h5:where(:not(.fi-not-prose, .fi-not-prose *)),
    h6:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-size: var(--text-sm);
        line-height: calc(28 / 14);
        color: var(--prose-heading-color);
        font-weight: var(--font-weight-semibold);
    }

    :is(h2, h3, h4, h5, h6):where(:not(.fi-not-prose, .fi-not-prose *)) {
        scroll-margin-top: calc(var(--spacing) * 32);
        @variant lg {
            scroll-margin-top: calc(var(--spacing) * 18);
        }
    }

    ol:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-left: calc(var(--spacing) * 6);
        list-style-type: decimal;
    }

    ul:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-left: calc(var(--spacing) * 6);
        list-style-type: disc;
    }

    ol li:where(:not(.fi-not-prose, .fi-not-prose *)),
    ul li:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-left: calc(var(--spacing) * 3);
    }

    ol li + li:where(:not(.fi-not-prose, .fi-not-prose *)),
    ul li + li:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-top: calc(var(--spacing) * 4);
    }

    ol li:where(:not(.fi-not-prose, .fi-not-prose *))::marker,
    ul li:where(:not(.fi-not-prose, .fi-not-prose *))::marker {
        color: var(--prose-marker-color);
    }

    a:not(:where(:is(h2, h3, h4, h5, h6) *)):where(
            :not(.fi-not-prose, .fi-not-prose *)
        ) {
        color: var(--prose-link-color);
        font-weight: var(--font-weight-semibold);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--prose-link-underline-color);
        text-decoration-thickness: 1px;
        & code {
            font-weight: var(--font-weight-semibold);
        }
    }

    a:hover:where(:not(.fi-not-prose, .fi-not-prose *)) {
        text-decoration-thickness: 2px;
    }

    strong:where(:not(.fi-not-prose, .fi-not-prose *)) {
        color: var(--prose-strong-color);
        font-weight: var(--font-weight-semibold);
    }

    code:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-variant-ligatures: none;
        font-family: var(--font-mono);
        font-weight: var(--font-weight-medium);
        color: var(--prose-code-color);
    }

    :where(h2, h3, h4, h5, h6)
        code:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-weight: var(--font-weight-semibold);
    }

    code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
    code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
        display: inline;
        content: '`';
    }

    pre:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 10);
    }

    pre code * + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-top: 0;
    }

    pre code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
    pre code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
        content: none;
    }

    pre code:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-variant-ligatures: none;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: 2;
    }

    table:where(:not(.fi-not-prose, .fi-not-prose *)) {
        width: 100%;
        table-layout: auto;
        margin-top: 2em;
        margin-bottom: 2em;
        font-size: var(--text-sm);
        line-height: 1.4;
    }

    thead:where(:not(.fi-not-prose, .fi-not-prose *)) {
        border-bottom-width: 1px;
        border-bottom-color: var(--prose-th-borders);
    }

    thead th:where(:not(.fi-not-prose, .fi-not-prose *)) {
        color: var(--prose-heading-color);
        font-weight: 600;
        vertical-align: bottom;
        padding-inline-end: 0.6em;
        padding-bottom: 0.8em;
        padding-inline-start: 0.6em;
    }

    thead th:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-inline-start: 0;
    }

    thead th:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-inline-end: 0;
    }

    tbody tr:where(:not(.fi-not-prose, .fi-not-prose *)) {
        border-bottom-width: 1px;
        border-bottom-color: var(--prose-td-borders);
    }

    tbody tr:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        border-bottom-width: 0;
    }

    tbody td:where(:not(.fi-not-prose, .fi-not-prose *)) {
        vertical-align: baseline;
    }

    tfoot:where(:not(.fi-not-prose, .fi-not-prose *)) {
        border-top-width: 1px;
        border-top-color: var(--prose-th-borders);
    }

    tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
        vertical-align: top;
    }

    tbody td:where(:not(.fi-not-prose, .fi-not-prose *)),
    tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-top: 0.8em;
        padding-inline-end: 0.6em;
        padding-bottom: 0.8em;
        padding-inline-start: 0.6em;
    }

    tbody td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)),
    tfoot td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-inline-start: 0;
    }

    tbody td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)),
    tfoot td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        padding-inline-end: 0;
    }

    th:where(:not(.fi-not-prose, .fi-not-prose *)),
    td:where(:not(.fi-not-prose, .fi-not-prose *)) {
        text-align: start;
    }

    td code:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-size: 0.8125rem;
    }

    hr:where(:not(.fi-not-prose, .fi-not-prose *)) {
        border-color: var(--prose-hr-color);
        margin-block: --spacing(8);
        & + h2 {
            margin-top: --spacing(8);
        }
    }

    blockquote {
        font-style: italic;
        border-inline-start-width: 0.25rem;
        border-inline-start-color: var(--prose-blockquote-border-color);
        padding-inline-start: calc(var(--spacing) * 4);
    }

    blockquote p:first-of-type::before {
        content: open-quote;
    }

    blockquote p:last-of-type::after {
        content: close-quote;
    }

    figure:where(:not(.fi-not-prose, .fi-not-prose *)) {
        figcaption:where(:not(.fi-not-prose, .fi-not-prose *)) {
            margin-top: calc(var(--spacing) * 3);
            text-align: center;
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            font-style: italic;
            color: color-mix(in oklab, var(--prose-color) 75%, transparent);
        }
    }

    :first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-top: 0;
    }

    :last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-bottom: 0;
    }

    & .lead:where(:not(.fi-not-prose, .fi-not-prose *)) {
        font-size: var(--text-base);
    }
}