@font-face {
    font-family: "Atkinson";
    src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Mono";
    src: url("fonts/atkinson-hyperlegible-mono-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    color-scheme: light;
    --parchment: #f4f2eb;
    --parchment-2: #e7ecdf;
    --parchment-3: #d6d5c8;
    --panel: #fff;
    --line: rgba(92, 90, 46, 0.16);
    --line-strong: rgba(92, 90, 46, 0.32);
    --ink: #1c1b14;
    --ink-soft: #5c5a2e;
    --ink-faint: #676443;
    --wood: #757047;
    --amber: #f4a81d;
    --on-amber: #1c1b14;
    --forest: #a4501e;
    --forest-deep: #803b13;
    --coral: #ae4825;
    --water: #33575b;
    --rust: #a4501e;
    --cream: #fff2d1;
    --route: #cc2a93;
    --sans: "Atkinson", system-ui, sans-serif;
    --serif: var(--sans);
    --mono: "Atkinson Mono", ui-monospace, monospace;
    --head-h: 56px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --parchment: #16150f;
    --parchment-2: #232820;
    --parchment-3: #414233;
    --panel: #201f17;
    --line: rgba(189, 180, 126, 0.15);
    --line-strong: rgba(189, 180, 126, 0.3);
    --ink: #f2efe3;
    --ink-soft: #bdb47e;
    --ink-faint: #aaa383;
    --wood: #bdb47e;
    --amber: #f2a93a;
    --forest: #f2a93a;
    --forest-deep: #ffc76d;
    --coral: #ef996f;
    --water: #8bb9bd;
    --rust: #93461a;
    --cream: #ffe9c0;
    --route: #f175c5;
}