@scope ([svui]) {
    /* SVUI */

    /* Base */
    :scope {
        color-scheme: light;
    }

    /* Scrollbar tokens */
    :scope {
        --sv-scrollbar-thumb-color: #1b1b24;
        --sv-scrollbar-track-color: #e4e4e4;
        --sv-scrollbar-height: 8px;
        --sv-scrollbar-width: 8px;
        --sv-scrollbar-textarea-height: 3px;
        --sv-scrollbar-textarea-width: 3px;
        --sv-scrollbar-height-small: 3px;
        --sv-scrollbar-width-small: 3px;
    }

    /* Flow */
    :scope {
        --sv-flow-indent-edge: 24px;
        --sv-flow-width: 1600px;
        --sv-flow-indent: max(calc(50vw - var(--sv-flow-width) / 2), var(--sv-flow-indent-edge));
    }

    @media (max-width: 1647px) {
        :scope {
            --sv-flow-width: 1400px;
        }
    }

    @media (max-width: 1535px) {
        :scope {
            --sv-flow-width: 1320px;
        }
    }

    @media (max-width: 1399px) {
        :scope {
            --sv-flow-width: 1140px;
        }
    }

    @media (max-width: 1279px) {
        :scope {
            --sv-flow-width: 960px;
        }
    }

    @media (max-width: 991px) {
        :scope {
            --sv-flow-width: 100vw;
            --sv-flow-indent-edge: clamp(16px, 4vw, 32px);
        }
    }

    /* Spacing tokens */
    :scope {
        --sv-space-i-3xs: 0.125em;
        --sv-space-i-2xs: 0.25em;
        --sv-space-i-xs: 0.375em;
        --sv-space-i-sm: 0.5em;
        --sv-space-i-md: 0.75em;
        --sv-space-i-lg: 1em;
        --sv-space-i-xl: 1.25em;
        --sv-space-i-2xl: 1.5em;
        --sv-space-i-3xl: 2em;

        --sv-space-b-3xs: 0.125rem;
        --sv-space-b-2xs: 0.25rem;
        --sv-space-b-xs: 0.5rem;
        --sv-space-b-sm: 0.75rem;
        --sv-space-b-md: 1rem;
        --sv-space-b-lg: 1.5rem;
        --sv-space-b-xl: 2rem;
        --sv-space-b-2xl: 3rem;
        --sv-space-b-3xl: 4rem;

        --sv-space-f-3xs: clamp(0.125rem, 0.2vw, 0.25rem);
        --sv-space-f-2xs: clamp(0.25rem, 0.4vw, 0.5rem);
        --sv-space-f-xs: clamp(0.5rem, 0.7vw, 0.75rem);
        --sv-space-f-sm: clamp(0.75rem, 1vw, 1rem);
        --sv-space-f-md: clamp(1rem, 1.5vw, 1.5rem);
        --sv-space-f-lg: clamp(1.5rem, 2.5vw, 2rem);
        --sv-space-f-xl: clamp(2rem, 4vw, 3.5rem);
        --sv-space-f-2xl: clamp(3rem, 6vw, 6rem);
        --sv-space-f-3xl: clamp(4rem, 8vw, 8rem);

    }

    /* Content layout tokens */
    :scope {
        --sv-content-float-width: clamp(16rem, 34%, 24rem);
        --sv-content-float-gap-inline: var(--sv-space-f-lg);
        --sv-content-float-gap-block: var(--sv-space-b-lg);
        --sv-content-video-ratio: 16 / 9;
        --sv-content-video-max-height: 100vh;
        --sv-content-video-max-height: 100dvh;
    }

    /* Typography tokens */
    :scope {
        --sv-fs-display: 2rem;
        --sv-flh-display: 1.11;

        --sv-fs-h1: 1.75rem;
        --sv-flh-h1: 1.12;

        --sv-fs-h2: 1.5rem;
        --sv-flh-h2: 1.18;

        --sv-fs-h3: 1.25rem;
        --sv-flh-h3: 1.25;

        --sv-fs-body: 1rem;
        --sv-flh-body: 1.45;

        --sv-fs-lead: 1.0625rem;
        --sv-flh-lead: var(--sv-flh-body);

        --sv-fs-small: 0.875rem;
        --sv-flh-small: 1.45;

        --sv-fs-section-label: 0.9375rem;
        --sv-flh-section-label: 1.4667;

        --sv-fs-caption: 0.75rem;
        --sv-flh-caption: 1.4;

        --sv-fs-nav: 0.875rem;
        --sv-flh-nav: var(--sv-flh-control);

        --sv-fs-button: 0.875rem;
        --sv-flh-button: var(--sv-flh-control);

        --sv-fs-label: 0.75rem;
        --sv-flh-label: var(--sv-flh-control);

        --sv-flh-control: 1.25;
        --sv-flh-solid: 1;

        --sv-fs-zero: 0;
        --sv-flh-zero: 0;

        --sv-fw-regular: 400;
        --sv-fw-medium: 500;
        --sv-fw-bold: 700;
    }

    @media (min-width: 390px) {
        :scope {
            --sv-fs-display: 2.125rem;
            --sv-fs-h1: 1.875rem;
            --sv-fs-h2: 1.5625rem;
            --sv-fs-h3: 1.3125rem;
        }
    }

    @media (min-width: 576px) {
        :scope {
            --sv-fs-display: 2.25rem;
            --sv-fs-h1: 2rem;
            --sv-fs-h2: 1.625rem;
            --sv-fs-h3: 1.375rem;
            --sv-fs-lead: 1.125rem;
        }
    }

    @media (min-width: 768px) {
        :scope {
            --sv-fs-display: 2.5rem;
            --sv-fs-h1: 2.25rem;
            --sv-fs-h2: 1.75rem;
            --sv-fs-h3: 1.5rem;
        }
    }

    @media (min-width: 1024px) {
        :scope {
            --sv-fs-display: 2.75rem;
            --sv-fs-h1: 2.5rem;
            --sv-fs-h2: 2rem;
            --sv-fs-h3: 1.625rem;
            --sv-fs-lead: 1.1875rem;
            --sv-fs-button: 0.9375rem;
            --sv-fs-label: 0.8125rem;
        }
    }

    @media (min-width: 1440px) {
        :scope {
            --sv-fs-display: 3rem;
            --sv-fs-h1: 2.625rem;
            --sv-fs-h2: 2.125rem;
            --sv-fs-h3: 1.75rem;
            --sv-fs-body: 1.0625rem;
            --sv-fs-lead: 1.25rem;
            --sv-fs-small: 0.9375rem;
            --sv-fs-caption: 0.8125rem;
            --sv-fs-nav: 0.9375rem;
            --sv-fs-button: 0.9375rem;
            --sv-fs-label: 0.8125rem;
        }
    }
}