:root {
    --width-content-narrow: 34rem;
}

body {
    font-family: var(--fonts-default, 'Noto Sans', sans-serif);
    background: var(--colors-neutral-0);
    color: var(--colors-foreground);
    margin: 0;
    padding: 0;
    cursor: default;
}
main {
    margin: 0 auto;

    @media screen and (min-width: 48em) {
        /* Remove padding for hero sections */
    }
}

main.main-content {
    max-inline-size: var(--breakpoints-lg);
    padding-block: var(--spacing-6) var(--spacing-3);
    padding-inline: var(--spacing-4);

    @media screen and (min-width: 48em) {
        padding-block: var(--spacing-6) var(--spacing-5);
    }
}
h1,h2,h3,h4 {
    color: var(--colors-foreground-strong);
    margin-block-end: var(--spacing-5);
    cursor: default;
}
h2 {
    font-size: var(--font-sizes-4);
    &:has(+ small) {
        margin-block-end: var(--spacing-2);
    }
    & + small {
        display: block;
        font-size: var(--font-sizes-2);
        margin-block-end: var(--spacing-6);
    }
}
h3 {
    font-size: var(--font-sizes-3);
}
p {
    font-size: var(--font-sizes-3);
    line-height: var(--line-heights-normal);
    margin-block: 0 var(--spacing-1);
    cursor: default;
}
small {
    font-size: var(--font-sizes-1);
    cursor: default;
}
em {
    font-style: normal;
    font-weight: var(--font-weights-bold);
}

/* temp */

table {
    border: none;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}
td {
    vertical-align: top;
}
/* end temp */

button, .button {
    background: var(--colors-background-action-primary);
    color: var(--colors-foreground-action-inverse);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-2) var(--spacing-4);
    text-decoration: none;
    font-weight: var(--font-weights-bold);
    line-height: 1.5;
    display: inline-flex;
    box-shadow: none;
    cursor: pointer;

    &:active {
        background: var(--colors-background-action-primary-active);
        color: var(--colors-foreground-action-inverse-active);
    }
    &:hover {
        background: var(--colors-background-action-primary-hover);
        color: var(--colors-foreground-action-inverse-hover);
    }

    &.secondary {
        background: var(--colors-background-action-weak);
        color: var(--colors-foreground-action);

        &:active {
            background: var(--colors-background-action-weak-active);
            color: var(--colors-foreground-action-active);
        }
        &:hover {
            background: var(--colors-background-action-weak-hover);
            color: var(--colors-foreground-action-hover);
        }
    }
}
.badge {
    background: var(--colors-background-action-weak);
    color: var(--colors-foreground-action);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-1) var(--spacing-3);
    text-decoration: none;
    font-weight: var(--font-weights-bold);
    font-size: var(--font-sizes-1);
    line-height: 1.5;
    display: inline-flex;
    cursor: default;
}
span.icon {
    display: inline-block;
    inline-size: var(--spacing-5);
    block-size: var(--spacing-5);
    margin-inline-start: var(--spacing-2);
    margin-inline-end: var(--spacing-2);
    cursor: default;

    &.gold {
        color: var(--colors-expressive-earth-600)
    }
}

footer {
    border-top: 1px solid var(--colors-neutral-500);
}