:root {
    --black: #000;
    --off-black: #0b0a0a;
    --black-bg: #1e1e1e;
    --titles-on-black: #7d7873;
    --titles-on-white: #97928c;
    --keyline-on-white: #e9e4e0;
    --stone: #f0eee9;
    --white: white;
    --keyline-on-black: #292827;
    --pearl: #f2f5f6;
    --colour-neutral-1000: #232E3A;
    --colour-neutral-600: #6080A0;
}


body {
    background: var(--bg);
    color: var(--fg);
}

/** SURFACES **/
.surface {
    background: var(--bg);
    color: var(--fg);
}

.surface.dark {
    --muted: var(--titles-on-black);
    --bg: var(--off-black);
    --fg: var(--white);
    --line: var(--keyline-on-black);
}

.surface.light {
    --muted: var(--titles-on-white);
    --bg: var(--white);
    --fg: var(--off-black);
    --line: var(--keyline-on-white);
}

.surface.base {
    --muted: var(--titles-on-black);
    --bg: var(--black);
    --fg: var(--white);
    --line: var(--keyline-on-black);
}

.line {
    border-bottom: 1px solid var(--line);
}