:root {
    --color-primary: #2c3e50;
    /* TODO: provide a fallback for older browsers that don't support relative colour */
    --color-secondary: hsl(from var(--color-primary) h s calc(l * 1.5));
    --color-background: #ecf0f1;
    --color-text: #2c3e50;
    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --spacing-base: 1rem;

    --border-radius: 8px;

    font-family: var(--font-family);

    box-sizing: border-box;
}

button {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    padding: calc(var(--spacing-base) / 2) var(--spacing-base);
    border: none;
    background-color: var(--color-primary);
    color: white;
    border-radius: 4px;
}

button:not([disabled]) {
    cursor: pointer;
}