:root {

    // Tachyons palette
    --t-black: #000000;
    --t-near-black: #111111;
    --t-dark-gray: #333333;
    --t-mid-gray: #555555;
    --t-gray: #777777;
    --t-silver: #999999;
    --t-light-silver: #AAAAAA;
    --t-moon-gray: #CCCCCC;
    --t-light-gray: #EEEEEE;
    --t-near-white: #F4F4F4;
    --t-white: #FFFFFF;
    --t-dark-red: #E7040F;
    --t-red: #FF4136;
    --t-light-red: #FF725C;
    --t-orange: #FF6300;
    --t-gold: #FFB700;
    --t-yellow: #FFD700;
    --t-dortmund: #FFFF00;
    --t-light-yellow: #FBF1A9;
    --t-purple: #5E2CA5;
    --t-light-purple: #A463F2;
    --t-dark-pink: #D5008F;
    --t-hot-pink: #FF41B4;
    --t-pink: #FF80CC;
    --t-light-pink: #FFA3D7;
    --t-dark-green: #137752;
    --t-green: #19A974;
    --t-light-green: #9EEBCF;
    --t-navy: #001B44;
    --t-dark-blue: #00449E;
    --t-blue: #357EDD;
    --t-light-blue: #96CCFF;
    --t-lightest-blue: #CDECFF;
    --t-washed-blue: #F6FFFE;
    --t-washed-green: #E8FDF5;
    --t-washed-yellow: #FFFCEB;
    --t-washed-red: #FFDFDF;

    // Typeface
    --serif: Georgia, serif;
    --sans-serif: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, sans-serif;
    --font-size: 112.5%;
    --font-size-m: 118.75%;
    --font-size-l: 131.25%;
    --font-size-code: 87.5%;
    --lh-copy: 1.5;
    --lh-title: 1.2;
    --text-decoration-thickness: 2px;
    --title-heading-font-family: var(--sans-serif);
    --title-heading-weight: bold;
    --title-heading-font-style: normal;
    --article-heading-font-family: var(--sans-serif);
    --article-heading-weight: bold;
    --article-heading-mt: 2.25rem;
    --article-heading-mb: 1rem;
    --article-heading-font-style: normal;
    --article-heading-font-alignment: left;
    --article-font-size-h2: 1.25rem;
    --article-font-size-h3: 1rem;

    // Layout
    --measure: 38rem;
    --half-measure: calc(var(--measure) / 2);
    --one-and-a-half-measure: calc(var(--measure) * 1.5);
    --bleed-width: calc(100% + 2rem);
    --bleed-width-ns: calc(100% + 4rem);
    --bleed-width-l: 90vw;
    --pull-left: -1rem;
    --pull-left-ns: -2rem;
    --pull-left-l: 0;

    // Colours
    --klein-browser-blue: #0000EE;
    --accent: var(--t-blue);
    --link: var(--t-black);
    --visited: var(--t-mid-gray);
    --hover: var(--t-black);
    --nav-link: var(--t-black);
    --nav-link-hover: var(--accent);
    --text-decoration-color: var(--accent);
    --foreground: var(--t-dark-gray);
    --bg: var(--t-white);
    --header-foreground: var(--t-dark-gray);
    --header-bg: var(--t-white);
    --bg-secondary: var(--t-near-white);
    --pre-foreground: var(--t-washed-green);
    --pre-bg: var(--t-near-black);
    --title-color: var(--t-black);
    --article-heading-color: var(--t-black);
    --bg-button: var(--t-moon-gray);
    --bg-button--hover: var(--t-light-gray);
    --foreground-button: var(--foreground);
    --code-color: var(--t-dark-red);

    // Rules and borders
    --border-img-color: var(--t-moon-gray);
    --border-form-color: var(--t-light-silver);
    --compulsory: var(--t-dark-red)

}

@media (prefers-color-scheme: dark) {
    :root {

    // Colours
    --accent: #F5B042;
    --link: var(--t-white);
    --visited: var(--t-light-silver);
    --hover: var(--t-white);
    --nav-link: var(--t-white);
    --text-decoration-color: var(--accent);
    --foreground: var(--t-moon-gray);
    --bg: var(--t-dark-gray);
    --header-foreground: var(--t-moon-gray);
    --header-bg: var(--t-black);
    --bg-secondary: var(--mid-gray);
    --pre-bg: var(--t-black);
    --title-color: var(--t-near-white);
    --article-heading-color: var(--t-near-white);
    --compulsory: var(--t-light-pink);
    --foreground-button: var(--t-dark-gray);
    --code-color: var(--t-gold);

    // Rules and borders
    --border-img-color: var(--t-gray);
    --border-form-color: var(--t-gray);

    }
}