/*
 * Design tokens. Restyling the site starts here: every stylesheet after this
 * one takes its colours and font stacks from these properties.
 *
 * The palette keeps the original 2013 colours. The semantic properties at the
 * bottom say what each colour is for; change those to re-skin a role without
 * touching the palette.
 */
:root {
    /* Palette */
    --color-blue: #2276c6;
    --color-blue-light: #90c8fc;
    --color-purple: #5d09ac;
    --color-purple-light: #a469dc;
    --color-red: #c82227;
    --color-red-dark: #9b1b1f;
    --color-red-light: #d5595d;
    --color-pink: #fc9195;
    --color-green-light: #91fcad;
    --color-yellow: #ffda21;
    --color-gold: #ffcd00;
    --color-yellow-light: #fff98c;
    --color-yellow-pale: #fffe96;
    --color-grey-darker: #505050;
    --color-grey-dark: #6a6a6a;
    --color-grey-light: #c6c6c6;
    --color-white: #fff;

    /* Font stacks */
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-heading: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", Optima, Segoe, Candara, Calibri, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, Times, "Times New Roman", serif;
    --font-georgia: Georgia, Times, "Times New Roman", serif;

    /* Roles */
    --page-background: var(--color-blue);
    --heading-color: var(--color-grey-dark);
}