@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: 'Libre Caslon Text';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/fonts/libre-caslon-text/libre-caslon-text-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: 'Libre Caslon Text';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/fonts/libre-caslon-text/libre-caslon-text-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: 'Libre Caslon Text';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(/fonts/libre-caslon-text/libre-caslon-text-bold-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: 'Libre Caslon Text';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(/fonts/libre-caslon-text/libre-caslon-text-bold-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: 'Libre Caslon Text';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(/fonts/libre-caslon-text/libre-caslon-text-italic-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: 'Libre Caslon Text';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url(/fonts/libre-caslon-text/libre-caslon-text-italic-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="wrenfield"] {
        --c-page: #faf9f6;
        --c-surface: #ffffff;
        --c-tile: #ebe6dc;
        --c-ink: #161616;
        --c-muted: #66645e;
        --c-line: rgba(22, 22, 22, .13);
        --c-line-strong: rgba(22, 22, 22, .36);
        --c-accent: #283a2e;
        --c-accent-hover: #1c2a21;
        --c-accent-ink: #ffffff;
        --c-warn: #8a4a1e;
        --c-dark: #1c211d;
        --c-dark-ink: #faf9f6;
        --c-dark-muted: #b4b2a8;
        --c-dark-line: rgba(250, 249, 246, .17);
        --c-scrim: rgba(18, 18, 16, .48);

        --f-display: 'Libre Caslon Text', 'Adobe Caslon Pro', Georgia, 'Times New Roman', serif;
        --f-text: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --fw-display: 400;

        --wm-family: var(--f-display);
        --wm-weight: 400;
        --wm-track: .18em;
        --wm-case: uppercase;

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

}