@layer marielco-base {
    body {
        color: var(--marielco-text);
        background: var(--marielco-background);
    }

    :where(a) {
        color: inherit;
        text-decoration-thickness: var(--marielco-border-width);
        text-underline-offset: var(--marielco-underline-offset);
    }

    :focus-visible {
        outline: var(--marielco-focus-width) solid var(--marielco-focus-color);
        outline-offset: var(--marielco-focus-offset);
    }

    :where(button, input, select, textarea) {
        border-radius: var(--marielco-radius);
    }

    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
        max-inline-size: 100%;
        min-block-size: var(--marielco-control-height);
        padding: var(--marielco-control-padding-block) var(--marielco-control-padding-inline);
        border: var(--marielco-border-width) solid var(--marielco-border-color);
        color: var(--marielco-text);
        background: var(--marielco-background);
    }

    :where(input, textarea)::placeholder {
        color: var(--marielco-text-muted);
        opacity: 1;
    }

    :where(button, input, select, textarea):disabled {
        cursor: not-allowed;
    }

    .skip-link {
        position: fixed;
        inset-block-start: var(--marielco-page-gutter);
        inset-inline-start: var(--marielco-page-gutter);
        z-index: var(--marielco-z-skip-link);
        padding: var(--marielco-control-padding-block) var(--marielco-control-padding-inline);
        color: var(--marielco-text);
        background: var(--marielco-background);
        border: var(--marielco-border-width) solid var(--marielco-border-color);
        transform: translateY(calc(-100% - var(--marielco-page-gutter) - var(--marielco-focus-offset) - var(--marielco-focus-width)));
    }

    .skip-link:focus {
        transform: translateY(0);
    }
}