@layer vendor, foundation, layout, component, utility, override;

@layer foundation {
    :root {
        --ui-auth-width: 28rem;
        --ui-content-narrow: 48rem;
        --ui-sidebar-width: 15.5rem;
        --ui-control-height: 2.25rem;
        --ui-header-height: 3.25rem;
        --ui-focus-width: 3px;
        --ui-content-inset: var(--ui-space-3);
        --ui-heading-size-1: 1.5rem;
        --ui-heading-size-2: 1.25rem;
        --ui-heading-size-3: 1.0625rem;
        --ui-heading-size-4: .9375rem;
        --ui-heading-size-5: .875rem;
        --ui-heading-size-6: .8125rem;
        --ui-space-1: .25rem;
        --ui-space-2: .5rem;
        --ui-space-3: .75rem;
        --ui-space-4: 1rem;
        --ui-space-5: 1.25rem;
        --ui-space-6: 1.5rem;
        --ui-space-8: 2rem;
        --ui-space-10: 2.5rem;
        --ui-breakpoint-mobile: 48rem;
        --ui-transition-fast: 150ms ease;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; }
    body {
        background: var(--ui-canvas-background);
        color: var(--ui-text);
        font-feature-settings: "kern", "liga", "tnum";
        min-height: 100vh;
        text-rendering: optimizeLegibility;
    }
    button, input, select, textarea { font: inherit; }
    ::selection { background: var(--ui-selection-background); color: var(--ui-text); }
}