@layer components {
    .legal-document {
        background-color: var(--color-surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--spacing-12);
        margin-bottom: var(--spacing-6);
    }

    .legal-document h1,
    .legal-document h2,
    .legal-document h3,
    .legal-document h4,
    .legal-document h5,
    .legal-document h6 {
        font-family: var(--font-family-base);
    }

    .legal-document h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--spacing-6);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
    }

    .legal-document h2 {
        font-size: var(--font-size-xl);
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-2);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .legal-document h3 {
        font-size: var(--font-size-lg);
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-2);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }
    .legal-document p {
        color: var(--color-prose);
        font-size: var(--font-size-lg);
    }

    .legal-document ul {
        list-style-type: disc;
        padding-left: var(--spacing-4);
        font-size: var(--font-size-lg);
        color: var(--color-prose);

        li {
            margin-bottom: var(--spacing-2);
        }
    }

    .legal-document a {
        text-decoration: underline;
        text-underline-offset: 2px;
        font-weight: var(--font-weight-normal);

        &:hover {
            color: var(--color-primary-hover);
        }
    }
}