html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.55;
}

h1, h2, h3 {
    letter-spacing: 0.04em;
    font-weight: 500;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3vw, 2rem);  line-height: 1.2; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.5rem); line-height: 1.25; }

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

code, pre, kbd, samp {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}