:root {
    --sidebar-width: 70px;
    --phone-max-width: 600px;

    /* type — codex register */
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --f-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --f-mark: "Cormorant Garamond", Georgia, serif;
    --f-math: "STIX Two Text", Georgia, serif;

    /* codex — light palette */
    --paper: #f2e9cf; /* laid paper */
    --desk: #ded2b6; /* aged desk */
    --ink: #37301f; /* iron-gall ink */
    --bead: #b4551f; /* bead, deepened */
    --sanguine: #9e4b2e; /* sanguine */
    --brass: #977b39; /* brass */
    --rod: #6e6650; /* dark rod on light ground */
    --bead-deep: #7b3a1b; /* shadowed side of a bead */

    /* code inks — the pigments a scribe had on the desk, dark enough to hold
       4.5:1 against the code panel */
    --ink-vermilion: #8f3319;
    --ink-orpiment: #6f5411;
    --ink-verdigris: #2f6140;
    --ink-lapis: #2c4c78;
    --ink-tyrian: #61356a;
    --ink-umber: #8a5218;
    --ink-faded: #6b6450; /* iron-gall gone brown */

    /* topic dots — one per tag slug, see src/content/mod.rs */
    --tag-math: var(--rod);
    --tag-physics: var(--bead);
    --tag-engineering: var(--bead-deep);
    --tag-graphics: var(--brass);
    --tag-other: var(--fg-muted);

    --bg: #fff9e8;
    /*--bg: var(--paper);*/
    --bg-alt: #f9f1dc;
    /*--bg-alt: var(--desk);*/
    --fg: var(--ink);
    --fg-muted: color-mix(in srgb, var(--ink) 65%, var(--paper) 35%);
    --accent: var(--bead);
    --accent-alt: var(--brass);
    --rule: var(--sanguine);
    --link: var(--bead);
    --link-hover: var(--sanguine);
    --shadow: color-mix(in srgb, var(--ink) 45%, transparent);

    /* syntax roles — see the token classes in src/highlight/mod.rs. Declared
       once: `var()` resolves where it is used, so each theme's inks apply. */
    --syn-comment: var(--ink-faded);
    --syn-keyword: var(--ink-vermilion);
    --syn-type: var(--ink-orpiment);
    --syn-function: var(--ink-lapis);
    --syn-string: var(--ink-verdigris);
    --syn-number: var(--ink-tyrian);
    --syn-const: var(--ink-tyrian);
    --syn-attr: var(--ink-umber);
    --syn-prop: var(--ink-lapis);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* dark palette */
        --paper: #181510; /* sheet */
        --desk: color-mix(in srgb, #181510 82%, #d7cfb8 18%);
        --ink: #d7cfb8; /* rod / ink-soft */
        --bead: #ce6b33; /* bead accent */
        --sanguine: #c06a4a; /* sanguine rules */
        --brass: #c0a05c; /* brass, 4th cat. */
        --rod: #d7cfb8; /* lit rod on dark ground */
        --bead-deep: #944721; /* lifted so the dot survives the dark sheet */

        /* the same pigments, lit from the other side */
        --ink-vermilion: #ea8b57;
        --ink-orpiment: #dcbb72;
        --ink-verdigris: #9ac591;
        --ink-lapis: #94b6de;
        --ink-tyrian: #cba3d6;
        --ink-umber: #dda767;
        --ink-faded: #a2977d;

        --tag-math: var(--rod);
        --tag-physics: var(--bead);
        --tag-engineering: var(--bead-deep);
        --tag-graphics: var(--brass);
        --tag-other: var(--fg-muted);

        --bg: var(--paper);
        --bg-alt: var(--desk);
        --fg: var(--ink);
        --fg-muted: color-mix(in srgb, var(--ink) 65%, var(--paper) 35%);
        --accent: var(--bead);
        --accent-alt: var(--brass);
        --rule: var(--sanguine);
        --link: var(--bead);
        --link-hover: var(--brass);
        --shadow: color-mix(in srgb, black 60%, transparent);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --paper: #181510;
    --desk: color-mix(in srgb, #181510 82%, #d7cfb8 18%);
    --ink: #d7cfb8;
    --bead: #ce6b33;
    --sanguine: #c06a4a;
    --brass: #c0a05c;
    --rod: #d7cfb8;
    --bead-deep: #944721;

    --ink-vermilion: #ea8b57;
    --ink-orpiment: #dcbb72;
    --ink-verdigris: #9ac591;
    --ink-lapis: #94b6de;
    --ink-tyrian: #cba3d6;
    --ink-umber: #dda767;
    --ink-faded: #a2977d;

    --tag-math: var(--rod);
    --tag-physics: var(--bead);
    --tag-engineering: var(--bead-deep);
    --tag-graphics: var(--brass);
    --tag-other: var(--fg-muted);

    --bg: var(--paper);
    --bg-alt: var(--desk);
    --fg: var(--ink);
    --fg-muted: color-mix(in srgb, var(--ink) 65%, var(--paper) 35%);
    --accent: var(--bead);
    --accent-alt: var(--brass);
    --rule: var(--sanguine);
    --link: var(--bead);
    --link-hover: var(--brass);
    --shadow: color-mix(in srgb, black 60%, transparent);

    color-scheme: dark;
}