@layer reset, tokens, base, layout, components, utilities;

@layer tokens {

    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url(/fonts/inter/inter-latin-ext.woff2) format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url(/fonts/inter/inter-latin.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: 'Archivo';
        font-style: normal;
        font-weight: 400 800;
        font-display: swap;
        src: url(/fonts/archivo/archivo-latin-ext.woff2) format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Archivo';
        font-style: normal;
        font-weight: 400 800;
        font-display: swap;
        src: url(/fonts/archivo/archivo-latin.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

}

@layer tokens {

    :root {

        --s-1: 4px;
        --s-2: 8px;
        --s-3: 12px;
        --s-4: 16px;
        --s-5: 24px;
        --s-6: 32px;
        --s-7: 48px;
        --s-8: 64px;
        --s-9: clamp(64px, 8vw, 112px);
        --s-10: clamp(80px, 11vw, 168px);

        --t-2xs: 11px;
        --t-xs: 12px;
        --t-sm: 13px;
        --t-base: 15px;
        --t-md: 17px;
        --t-lg: clamp(19px, 1.1vw + 14px, 23px);
        --t-xl: clamp(24px, 1.6vw + 17px, 34px);
        --t-2xl: clamp(31px, 2.6vw + 20px, 54px);
        --t-3xl: clamp(40px, 4.6vw + 20px, 92px);

        --lh-tight: 1.04;
        --lh-snug: 1.22;
        --lh-text: 1.6;

        --track-caps: .14em;

        --w-page: 1680px;
        --w-read: 720px;
        --gutter: clamp(20px, 4.2vw, 64px);
        --h-header: 72px;
        --h-header-slim: 56px;
        --h-announce: 36px;

        --dur-1: 160ms;
        --dur-2: 320ms;
        --dur-3: 640ms;
        --ease: cubic-bezier(.22, .68, .2, 1);

        --z-sticky: 20;
        --z-header: 40;
        --z-drawer: 70;

        --shadow-pop: 0 18px 48px -18px rgba(20, 18, 15, .28);
        --shadow-drawer: 0 0 64px rgba(20, 18, 15, .18);
    }

    @media (max-width: 767px) {
        :root {
            --h-header: 60px;
            --h-header-slim: 52px;
        }
    }

}

@layer tokens {

    [data-loja="aurevo"] {
        --c-page: #0e0e0e;
        --c-surface: #171716;
        --c-tile: #1f1e1b;
        --c-ink: #f2f2f0;
        --c-muted: #9a9a96;
        --c-line: rgba(242, 242, 240, .14);
        --c-line-strong: rgba(242, 242, 240, .34);
        --c-accent: #f2f2f0;
        --c-accent-hover: #d6d6d2;
        --c-accent-ink: #0e0e0e;
        --c-warn: #f0a36b;
        --c-dark: #1b1b19;
        --c-dark-ink: #f2f2f0;
        --c-dark-muted: #a8a8a3;
        --c-dark-line: rgba(242, 242, 240, .16);
        --c-scrim: rgba(0, 0, 0, .55);

        --c-btn-light: #f2f2f0;
        --c-btn-light-ink: #0e0e0e;
        --c-btn-light-hover: #d6d6d2;

        --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
        --f-text: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --fw-display: 700;

        --wm-family: var(--f-display);
        --wm-weight: 700;
        --wm-track: -.01em;
        --wm-case: lowercase;

        --r-1: 6px;
        --r-control: 6px;
        --r-pill: 999px;
    }

}