/*
 * Osmo Scaling System: one responsive base ruler for all rem-based tokens.
 * Semantic sizes belong in tokens.css; this file deliberately does not style components.
 */

:root {
    --size-unit: 16;
    --size-container: 100vw;
    --size-font: 16px;
}

@supports (width: clamp(1px, 1vw, 2px)) {
    :root {
        /* Mobile portrait: 320px–479px, ideal 390px. */
        --size-container: clamp(20rem, 100vw, 29.9375rem);
        --size-font: calc(var(--size-container) / 24.375);
    }

    @media (min-width: 30rem) {
        :root {
            /* Mobile landscape: 480px–767px, ideal 550px. */
            --size-container: clamp(30rem, 100vw, 47.9375rem);
            --size-font: calc(var(--size-container) / 34.375);
        }
    }

    @media (min-width: 48rem) {
        :root {
            /* Tablet: 768px–991px, ideal 834px. */
            --size-container: clamp(48rem, 100vw, 61.9375rem);
            --size-font: calc(var(--size-container) / 52.125);
        }
    }

    @media (min-width: 62rem) {
        :root {
            /* Desktop: 992px–1920px, ideal 1440px. */
            --size-container: clamp(62rem, 100vw, 120rem);
            --size-font: calc(var(--size-container) / 90);
        }
    }
}