/**
 * Base Styles
 */

/* Амперсанды — курсив */
.amp,
em.amp {
    font-style: italic;
    font-family: inherit;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 0;
    padding-bottom: 0;
    min-width: 360px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-content);
    line-height: 1.5;
    min-height: 100vh;
    margin-bottom: 0;
    padding-bottom: 0;
    min-width: 360px;
}

/* Lenis: блокировка скролла при открытом полноэкранном слайдере */
html.lenis-stopped,
html.lenis.lenis-stopped {
    overflow: hidden;
}

/* Typography Classes - Desktop */
@media (min-width: 769px) {
    .display-1 {
        font-family: var(--font-display);
        font-size: var(--font-size-display-1-desktop);
        line-height: var(--line-height-display-1-desktop);
    }
    
    .display-2 {
        font-family: var(--font-display);
        font-size: var(--font-size-display-2-desktop);
        line-height: var(--line-height-display-2-desktop);
    }
    
    .display-3 {
        font-family: var(--font-display);
        font-size: var(--font-size-display-3-desktop);
        line-height: var(--line-height-display-3-desktop);
    }
    
    .body-1 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-1-desktop);
        font-weight: 300;
        line-height: var(--line-height-body-1-desktop);
        letter-spacing: -0.02em; /* -2% */
    }
    
    .body-2 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-2-desktop);
        font-weight: 300;
        line-height: var(--line-height-body-2-desktop);
    }
    
    .body-3 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-3-desktop);
        font-weight: 300;
        line-height: var(--line-height-body-3-desktop);
    }
    
    .body-4 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-4-desktop);
        font-weight: 300;
        line-height: var(--line-height-body-4-desktop);
    }
}

/* Typography Classes - Mobile */
@media (max-width: 768px) {
    .display-1 {
        font-family: var(--font-display);
        font-size: var(--font-size-display-1-mobile);
        line-height: var(--line-height-display-1-mobile);
    }
    
    .display-2 {
        font-family: var(--font-display);
        font-size: var(--font-size-display-2-mobile);
        line-height: var(--line-height-display-2-mobile);
    }
    
    .display-3 {
        font-family: var(--font-display);
        font-size: var(--font-size-display-3-mobile);
        line-height: var(--line-height-display-3-mobile);
    }
    
    .body-1 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-1-mobile);
        font-weight: 300;
        line-height: var(--line-height-body-1-mobile);
        letter-spacing: -0.02em; /* -2% */
    }
    
    .body-2 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-2-mobile);
        font-weight: 300;
        line-height: var(--line-height-body-2-mobile);
    }
    
    .body-3 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-3-mobile);
        font-weight: 300;
        line-height: var(--line-height-body-3-mobile);
    }
    
    .body-4 {
        font-family: var(--font-body);
        font-size: var(--font-size-body-4-mobile);
        font-weight: 300;
        line-height: var(--line-height-body-4-mobile);
    }
}