@layer reset, base, utilities;

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        padding: 0;
    }

    img, picture, video {
        max-width: 100%;
        height: auto;
        display: block;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    button, input, textarea, select {
        font: inherit;
    }
}

@layer base {
    body.no-transitions,
    body.no-transitions *:not([data-keep-transitions]) {
        transition: none !important;
    }

    html {
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
    }

    body {
        font-family: var(--font-body);
        font-weight: var(--font-weight-body);
        background: var(--color-background);
        color: var(--color-text);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-heading);
        line-height: 1.2;
        margin-block: 0.5em;
    }

    a {
        color: var(--color-primary);
        transition: color var(--transition);

        &:hover {
            color: color-mix(in srgb, var(--color-primary), black 20%);
        }
    }

    code, pre {
        font-family: var(--font-mono);
        font-weight: var(--font-weight-mono);
    }

    :focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
}

@layer utilities {
    .container {
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .image-cover {
        aspect-ratio: var(--image-aspect-ratio, auto);
        overflow: hidden;
        border-radius: var(--radius-image-md);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .stretched-link {
        color: inherit;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
        }
    }

    .tag {
        position: relative;
        z-index: 1;
        display: inline-block;
        font-family: var(--font-tag);
        font-weight: var(--font-weight-tag);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--tag-color, var(--color-primary));
        background: var(--tag-background, transparent);
        border: var(--tag-border, none);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--tag-radius, var(--radius-sm));
    }
}