@layer sds.reset, sds.base, sds.components, sds.utilities;

@import url('./sds/reset.css');
@import url('./sds/variables.css');
@import url('./sds/buttons.css');
@import url('./sds/inputs.css');

@import url('./sds/table.css');
@import url('./sds/stack.css');
@import url('./sds/cluster.css');
@import url('./sds/center.css');
@import url('./sds/sidebar.css');
@import url('./sds/form.css');

@layer sds.base {
    body {
        background: var(--color-white);
        color: var(--color-black);
        font-family: var(--font-sans);
    }

    a {
        color: var(--color-link-normal);
        text-underline-offset: 2px;

        &:hover {
            color: var(--color-link-hover);
            text-underline-offset: 2px;
            text-decoration-thickness: 2px;
        }
    }

    :is(a, button, input, textarea, .button) {
        transition: 100ms ease-out;
        transition-property: background-color, border-color, box-shadow, filter, outline;
        touch-action: manipulation;

        /* Keyboard navigation */
        &:where(:focus-visible) {
            border-radius: 0.25ch;
            outline: var(--focus-ring-size) solid var(--focus-ring-color);
            outline-offset: var(--focus-ring-offset);
        }

        /* Default disabled styles */
        &:where([disabled]) {
            cursor: not-allowed;
            opacity: 0.5;
            pointer-events: none;
        }
    }
}