/* Every value the components read. A component rule that writes a literal
   colour or size puts it beyond the reach of this file. */

:root {
    /* Paper is the page, tint is the only fill, spot is the only colour.
     Contrast on paper: ink 17.0, muted 7.6, spot 6.8, rule 2.1. */
    --paper: #f4f1ea;
    --tint: #e5dece;
    --rule: #b3a98f;
    --ink: #100f0a;
    --muted: #514c3c;
    --spot: #9c2a15;
    --serif:
        "Iowan Old Style", "Palatino Linotype", palatino, "Book Antiqua", georgia, ui-serif, serif;
    --mono: ui-monospace, sfmono-regular, menlo, monospace;
    --t-page: 40px;
    --t-sheet: 22px;
    --t-lead: 18px;
    --t-body: 16px;
    --t-row: 15px;
    --t-small: 14px;
    --t-label: 13px;
    --t-meta: 12px;
    --t-fine: 11px;

    /* Uppercase at these sizes closes up without tracking; the two values are
     the band heading and everything smaller. */
    --track-band: 0.12em;
    --track-meta: 0.07em;

    /* A band rule is ink and closes a section, a hairline is rule and divides
     rows inside one. Hairline clears 2.1:1, so it never bounds a control. */
    --band-rule: 2px solid var(--ink);
    --edge: 1px solid var(--ink);
    --hairline: 1px solid var(--rule);
    --page-max: 1340px;
    --pad-x: 40px;
    --pad-top: 18px;
    --pad-bottom: 96px;
    --measure: 62ch;

    /* The label column of a two-column block, and the term column of a facts
     list. Both hold uppercase or mono labels that must not wrap. */
    --label-col: 180px;
    --term-col: 155px;

    /* Tile width is fixed so a row of two tiles is two tiles wide. */
    --tile: 128px;
    --gap-row: 8px;
    --gap-col: 20px;
    --gap-band: 26px;
}

@media (width <= 720px) {
    :root {
        --t-page: 32px;
        --pad-x: 20px;
        --pad-bottom: 72px;
        --tile: 102px;
    }
}