/*
  ----------------------------------------
  Typography
  ----------------------------------------
*/

@layer styles {
    /* General */
    body,
    p {
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: 1.6;
        overflow-wrap: break-word;
        color: var(--text-body);
    }

    p {
        margin-top: var(--space-sm);
        max-width: var(--max-w-text);
    }

    h1 {
        font-family: var(--font-heading);
        font-size: var(--text-3xl);
        margin-top: var(--space-xl);
        max-width: var(--max-w-text);
        font-weight: 700;
        line-height: 1.05;
        color: var(--text-heading);
    }

    h2 {
        font-family: var(--font-heading);
        font-size: var(--text-2xl);
        margin-top: var(--space-lg);
        max-width: var(--max-w-text);
        font-weight: 700;
        line-height: 1.1;
        color: var(--text-heading);
    }

    h3 {
        font-family: var(--font-heading);
        font-size: var(--text-xl);
        margin-top: var(--space-md);
        max-width: var(--max-w-text);
        font-weight: 700;
        line-height: 1.15;
        color: var(--text-heading);
    }

    h4 {
        font-family: var(--font-heading);
        font-size: var(--text-lg);
        margin-top: var(--space-sm);
        max-width: var(--max-w-text);
        font-weight: 700;
        line-height: 1.2;
        color: var(--text-heading);
    }

    a {
        color: var(--link);
        text-decoration: underline;
    }

    blockquote {
        margin-top: var(--space-md);
        padding-left: var(--space-sm);
        border-left: 0.375rem solid var(--brand-1);
    }

    mark {
        background-color: var(--highlight);
    }

    :not(pre) > code {
        font-size: max(90%, 0.9375rem);
        padding: 0.125rem 0.25rem;
        background-color: var(--lighter);
        border-radius: var(--rounded);
        color: var(--dark);
        white-space: nowrap;
    }

    /* Lists — styled by default, use .list-none to reset */
    ul:not(.list-none),
    ol:not(.list-none) {
        display: flex;
        flex-direction: column;
        justify-content: items-around;
        gap: var(--space-sm);
        padding: var(--space-md);
        max-width: var(--max-w-text);
        list-style: none;
    }

    ul:not(.list-none) {
        li {
            position: relative;
            font-size: var(--text-base);
            line-height: 1.5;
            padding-left: 1.25rem;
            max-width: var(--max-w-text);
        }

        li::before {
            position: absolute;
            top: -0.15em;
            color: var(--brand-1);
            left: calc(var(--space-2xs) * -1);
            font-size: 140%;
            content: "✦";
        }
    }

    ol:not(.list-none) {
        li {
            position: relative;
            font-size: var(--text-base);
            line-height: 1.4;
            padding-left: 1.5rem;
            counter-increment: step-counter;
        }

        li::before {
            display: flex;
            position: absolute;
            top: 0;
            left: -0.25rem;
            font-weight: 600;
            line-height: 1;
            width: 1.25rem;
            height: 1.25rem;
            border-radius: var(--rounded-full);
            background-color: var(--brand-1);
            align-items: center;
            justify-content: center;
            font-size: 0.9375rem;
            color: var(--white);
            content: counter(step-counter);
        }
    }

    /* Default table — used outside of .ui-table-wrap contexts */
    table {
        min-width: 100%;
        font-size: var(--text-sm);
        white-space: nowrap;
        background-color: var(--white);

        thead {
            border-bottom: var(--border) solid var(--light);
        }

        th {
            font-size: var(--text-base);
            background-color: var(--lighter);
            padding: var(--space-2xs);
            font-weight: 600;
            color: var(--darker);
            text-align: left;
        }

        tr {
            border-bottom: var(--border) solid var(--light);

            &:last-child {
                border: none;
            }

            td {
                padding: var(--space-2xs);
            }
        }
    }

    /* Table wrapper for rounded corners */
    div:has(> table) {
        display: block;
        min-width: 100%;
        overflow-x: auto;
        border-radius: var(--rounded);
        border: var(--border) solid var(--light);
        min-height: 0;
    }
}