:root {
    --ui-scale: 1;

    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f4f6f8;

    --text: #18212f;
    --text-muted: #5d6878;

    --border: #dfe4ea;

    color-scheme: light;
}

html {
    font-size:
        calc(16px * var(--ui-scale));
}

body {
    background: var(--bg);
    color: var(--text);

    transition:
        background-color .2s ease,
        color .2s ease;
}

html[data-theme="dark"] {
    --bg: #10141c;
    --surface: #171d27;
    --surface-alt: #202735;

    --text: #f1f4f8;
    --text-muted: #b6bfcc;

    --border: #303949;

    color-scheme: dark;
}

.display-controls {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.display-control {
    min-width: 38px;
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--surface);
    color: var(--text);

    cursor: pointer;

    font: inherit;
}

.display-control:hover {
    background: var(--surface-alt);
}

.zoom-value {
    min-width: 55px;
    text-align: center;
    font-size: .85rem;
}

@media (max-width: 720px) {

    .display-controls {
        flex-wrap: wrap;
    }

}