:root {
    --bg-01: #FFFFFF;
    --bg-02: #F2F2F2;
    --bg-03: #E6E6E6;
    --bg-04: #CCCCCC;
    --bg-05: #B3B3B3;
    --bg-06: #999999;
    --bg-07: #808080;
    --bg-08: #666666;
    --bg-09: #4D4D4D;
    --bg-10: #333333;
    --bg-11: #1A1A1A;
    --bg-12: #000000;
}

/* DEFINE COLORS */

.f-half {
    --c-border: var(--bg-12);
    --c-text: var(--bg-12);
}

.s-half {
    --c-border: var(--bg-01);
    --c-text: var(--bg-01);
}

.colour-01 {
    --c-back: var(--bg-01);
}

.colour-02 {
    --c-back: var(--bg-02);
}

.colour-03 {
    --c-back: var(--bg-03);
}

.colour-04 {
    --c-back: var(--bg-04);
}

.colour-05 {
    --c-back: var(--bg-05);
}

.colour-06 {
    --c-back: var(--bg-06);
}

.colour-07 {
    --c-back: var(--bg-07);
}

.colour-08 {
    --c-back: var(--bg-08);
}

.colour-09 {
    --c-back: var(--bg-09);
}

.colour-10 {
    --c-back: var(--bg-10);
}

.colour-11 {
    --c-back: var(--bg-11);
}

.colour-12 {
    --c-back: var(--bg-12);
}

/* SET COLORS */

body {
    background-color: var(--c-back);
}

header,
p,
a,
span,
h1 {
    color: var(--c-text);
}

input,
.search-content,
textarea,
input::placeholder,
textarea::placeholder,
.span-extend .item-list,
#search .item-type span,
.corner::before,
.corner::after,
button {
    background-color: var(--c-text);
    color: var(--c-back);
}

.colour-swap [class*="colour-"] {
    background-color: var(--c-back);
}