html {
    /* Light theme */
    --background: #FFFFFF;
    --ink: #393C44;
}
html.dark {
    /* Dark theme */
    --theme-hue: 208;
    --theme-saturation: 9%;
    --theme-brightness: 16%;
    --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%);
    --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness));
    --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%));
    --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%));
    --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%));
    --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%));
    --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%));
    --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%));
    --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%));
    --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%));
    --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%));
}

html, body {
    font-family: var(--font-sans);
    color: var(--ink);
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: var(--background);
}

#app {
    height: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
}

.hoverable:hover {
    cursor: pointer;
}

/* Top bottom spacing */
.bb-margin-m {
    margin-bottom: var(--spacing-m);
}
* + .bb-margin-m {
    margin-top: var(--spacing-m);
}

.bb-margin-xl {
    margin-bottom: var(--spacing-xl);
}

* + .bb-margin-xl {
    margin-top: var(--spacing-xl);
}