@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

@font-face {
    font-family: 'Montserrat Light';
    src: url('montserrat/Montserrat-Light.woff2') format('woff2'),
         url('montserrat/Montserrat-Light.ttf')   format('truetype'),
         url('montserrat/Montserrat-Light.otf')   format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-display: 'Playfair Display', Montserrat, serif;
    --font-body:    'Montserrat Light', Montserrat, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.75rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: 1.25;
    font-weight: 600;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p, a, li, span, label,
input, button, select, textarea {
    font-family: var(--font-body);
}

.btn {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.nav-link, .navbar-nav .nav-item, .dropdown-item {
    font-family: var(--font-body);
}

[class*="price"],
.product-price,
.price {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.02em;
}