:root {
    --paper: #f6f6f4;
    --paper-alt: #efeeea;
    --paper-panel: #f1f0ec;

    --rule: #dedcd6;
    --rule-strong: #d5d3cb;
    --rule-muted: #c9c7bf;

    --ink: #16181c;
    --body: #45443f;
    --body-muted: #5a5952;
    --meta: #6b6a64;
    --nav: #4a4a46;
    --faint: #8a8880;
    --faintest: #a3a199;

    --accent: #1e3a5f;
    --accent-on-dark: #8d99ad;

    --dark-rule: #2c2f36;
    --dark-rule-strong: #3a3f48;
    --dark-body: #a8a69e;
    --dark-meta: #75736c;

    --font-family-base: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --container-max-width: 1180px;
    --gutter: 32px;
    --header-height: 68px;

    --ruled-grid-padding-x: 56px;

    --border-radius-sm: 2px;
    --transition-base: 140ms ease;
}

@media (max-width: 1099px) {
    :root {
        --ruled-grid-padding-x: 32px;
    }
}

@media (max-width: 759px) {
    :root {
        --gutter: 20px;
        --ruled-grid-padding-x: 20px;
    }
}

@media (max-width: 639px) {
    :root {
        --header-height: 104px;
    }
}