:root {
    color-scheme: light;
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Arial, sans-serif;
    --primary: #1f1f1f;
    --secondary: #74777c;
    --tertiary: #8d9196;
    --background: #ffffff;
    --text-title: 32px;
    --text-heading: 20px;
    --text-subheading: 16px;
    --text-large: 16px;
    --text-big: 14px;
    --text-normal: 13px;
    --text-small: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --primary: #eeeeee;
        --secondary: #c7c7c7;
        --tertiary: #969ca2;
        --background: #131313;
    }
}

* {
    font-family: var(--font-sans);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-size: 13px;
    line-height: 1.5;
    overscroll-behavior: none;
    background: var(--background);
    color: var(--primary);
}

.wrapper {
    padding: 40px 20px;
}

.pp-container {
    max-width: 800px;
    margin: auto;
}

.section {
    margin-bottom: 40px;
}

h1 {
    color: var(--primary);
    font-size: var(--text-title);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25em;
}

h2 {
    color: var(--primary);
    font-size: var(--text-heading);
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

h3 {
    color: var(--primary);
    font-size: var(--text-subheading);
    font-weight: 600;
    line-height: 1.5;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

p,
li {
    font-size: var(--text-big);
    line-height: 1.5;
}

p {
    margin-bottom: 1.5em;
}

ul {
    font-size: var(--text-big);
    padding-left: 32px;
    margin-bottom: 1.5em;
}

p.footnote {
    color: var(--secondary);
    font-size: var(--text-normal);
    line-height: 1.7;
    font-weight: 400;
}

a {
    color: var(--primary);
}
