/* Design tokens ------------------------------------------------------------ */

:root {
    /* Grid */
    --col-count: 12;
    --margin: 8px;
    --gutter: 16px;

    /* Colors */
    --c-bg: #ffffff;
    --c-fg: #000000;
    --c-muted: #000000;

    /* Type */
    --ff-display: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ff-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --fs-caption: 11px;
    --fs-body: 13px;
    --fs-nav: 12px;

    --lh-tight: 1.1;
    --lh-body: 1.35;

    --tracking-mono: 0.02em;

    /* Layout constants */
    --header-h: 56px;
    --active-max-cols: 2;
    --preview-vertical-cols: 1;
    --preview-horizontal-cols: 2;
    --breakpoint-md: 1024px;

    /* One-column width, derived from margin + gutter + col-count. */
    --col-w: calc((100vw - 2 * var(--margin) - (var(--col-count) - 1) * var(--gutter)) / var(--col-count));
    --col-2w: calc(2 * var(--col-w) + var(--gutter));
}