/* Typography Styles */
@media (max-width: 1023px) {
    :root {
        --font-h1: 400 calc(var(--rpx) * 28)/1.2 var(--font-primary);
        --font-h2: var(--font-h1);
        --font-h3: 400 calc(var(--rpx) * 20)/1.2 var(--font-primary);

        --font-p1: 400 calc(var(--rpx) * 18)/1.4 var(--font-primary);
        --font-p2: 400 calc(var(--rpx) * 16)/1.2 var(--font-primary);
        --font-p3: 400 calc(var(--rpx) * 12)/1.2 var(--font-primary);
        --font-p4: 400 calc(var(--rpx) * 14)/1.4 var(--font-primary);
        --font-p5: 400 calc(var(--rpx) * 12)/1.2 var(--font-primary);
        --font-btn: var(--font-p4);
    }
}

@media (min-width: 1024px) {
    :root {
        --font-h1: 400 calc(var(--rpx) * 50)/1.2 var(--font-primary);
        --font-h2: var(--font-h1);
        --font-h3: 400 calc(var(--rpx) * 32)/1.2 var(--font-primary);

        --font-p1: 400 calc(var(--rpx) * 24)/1.4 var(--font-primary);
        --font-p2: 400 calc(var(--rpx) * 20)/1.2 var(--font-primary);
        --font-p3: 400 calc(var(--rpx) * 18)/1.2 var(--font-primary);
        --font-p4: 400 calc(var(--rpx) * 16)/1.4 var(--font-primary);
        --font-p5: 400 calc(var(--rpx) * 14)/1.2 var(--font-primary);
        --font-btn: var(--font-p5);
    }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1, .h1 {
    font: var(--font-h1);
}

h2, .h2 {
    font: var(--font-h2);
}

h3, .h3 {
    font: var(--font-h3);
}

.p1 {font: var(--font-p1);}
.p2 {font: var(--font-p2);}
.p3 {font: var(--font-p3);}
.p4 {font: var(--font-p4);}
.p5 {font: var(--font-p5);}

label {
    font: var(--font-input);
    color: var(--text);
    display: block;
}

p {margin: 0;}
p:not(:last-child) {margin-bottom: var(--spacing-20);}

ul, ol {
    padding-left: var(--spacing-24);
}
ul li:not(:last-child), ol li:not(:last-child) {
    margin-bottom: var(--spacing-12);
}