@layer base, components, utilities, overrides;

        /* ============================================================
   Reset & Global Styles
   ============================================================ */

        @layer base {
            * {
                box-sizing: border-box;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                margin: 0;
                font-family: var(--font-sans);
                color: var(--ink);
                background: var(--paper);
                overflow-x: hidden;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                line-height: var(--leading-relaxed);
            }

            body.menu-open {
                overflow: hidden;
            }

            img,
            svg {
                display: block;
                max-width: 100%;
            }

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

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

            button {
                cursor: pointer;
            }

            ::selection {
                background: var(--accent);
                color: var(--white);
            }

            /* Focus-visible global */
            :focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: var(--space-1);
            }

            /* Screen reader only utility in base */
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
        }