:root {
    color-scheme: light dark;
    /* Spacing */
    --spacing-2xs: .125rem;
    --spacing-xs: .25rem;
    --spacing-sm: .5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 8rem;

    /* Borders and corners */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 9999px;
    --radius-round: 50%;
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-default: var(--border-width) solid var(--line);

    /* Typography */
    --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --display: "Newsreader", Georgia, serif;
    --font-handwritten: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    --font-2xs: .625rem;
    --font-xs: .75rem;
    --font-sm: .875rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-2xl: 2rem;
    --font-3xl: 2.5rem;
    --font-4xl: 3rem;
    --font-5xl: 4rem;
    --font-6xl: 6rem;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-heading: 1.125;
    --leading-tight: 1.25;
    --leading-body: 1.75;
    --tracking-tight: -.04em;
    --tracking-label: .1em;

    /* Layout */
    --width-container: 80rem;
    --width-reading: 40rem;
    --size-control: 3rem;

    /* Motion and elevation */
    --motion-fast: 128ms;
    --motion-normal: 256ms;
    --motion-slow: 512ms;
    --hover-scale: 1.04;
    --ease: cubic-bezier(.2, .65, .3, 1);
    --shadow-sm: 0 var(--spacing-xs) var(--spacing-md) light-dark(color-mix(in srgb, var(--ink) 4%, transparent), #0006);
    --shadow-md: 0 var(--spacing-sm) var(--spacing-lg) light-dark(color-mix(in srgb, var(--ink) 8%, transparent), #0009);

    /* Colours */
    --paper: light-dark(#fefefd, #181818);
    --ink: light-dark(#111411, #efefed);
    --muted: light-dark(#656962, #b1b1ae);
    --line: light-dark(#e8eae4, #383838);
    --accent: light-dark(#202720, #a0bc9b);
    --sage: light-dark(#758477, #88a682);
    --button-end: light-dark(var(--ink), color-mix(in srgb, var(--accent) 75%, var(--sage)));
    --soft: light-dark(#f1f3ee, #2a2a2a);
    --panel: light-dark(#f7f8f5, #222222);
    --selected: light-dark(#e9eee6, #343434);
    --overlay: light-dark(#fefefdf2, #181818f2);
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* Shared breakpoints: 1024px, 768px and 384px. CSS variables cannot define media conditions. */