:root {
    --color-page: #efefef;
    --color-red: #e54d42;
    --color-orange: #f37b1d;
    --color-yellow: #fbbd08;
    --color-olive: #8dc63f;
    --color-green: #39b54a;
    --color-cyan: #1cbbb4;
    --color-blue: #0081ff;
    --color-purple: #6739b6;
    --color-mauve: #9c26b0;
    --color-pink: #e03997;
    --color-brown: #a5673f;
    --color-secondary: #6c757d;
    --color-grey: #8799a3;
    --color-gray: #aaaaaa;
    --color-black: #333333;
    --color-light: #f8f9fa;
    --color-white: #ffffff;
    --color-light-red: #fadbd9;
    --color-light-orange: #fde6d2;
    --color-light-yellow: #fef2ce;
    --color-light-olive: #e8f4d9;
    --color-light-green: #d7f0db;
    --color-light-cyan: #d2f1f0;
    --color-light-blue: #cce6ff;
    --color-light-purple: #e1d7f0;
    --color-light-mauve: #ebd4ef;
    --color-light-pink: #f9d7ea;
    --color-light-brown: #ede1d9;
    --color-light-grey: #8799a3;
    --color-light-gray: #cccccc;
    --color-light-black: #333333;
    --color-light-white: #ffffff;
}
/* 文字 */
.text-red {
    color: var(--color-red);
}

.text-light-red {
    color: var(--color-light-red);
}

.text-orange {
    color: var(--color-orange);
}

.text-light-orange {
    color: var(--color-light-orange);
}

.text-yellow {
    color: var(--color-yellow);
}

.text-light-yellow {
    color: var(--color-light-yellow);
}

.text-olive {
    color: var(--color-olive);
}

.text-light-olive {
    color: var(--color-light-olive);
}

.text-green {
    color: var(--color-green);
}

.text-light-green {
    color: var(--color-light-green);
}

.text-cyan {
    color: var(--color-cyan);
}

.text-light-cyan {
    color: var(--color-light-cyan);
}

.text-blue {
    color: var(--color-blue);
}

.text-light-blue {
    color: var(--color-light-blue);
}

.text-purple {
    color: var(--color-purple);
}

.text-light-purple {
    color: var(--color-light-purple);
}

.text-mauve {
    color: var(--color-mauve);
}

.text-light-mauve {
    color: var(--color-light-mauve);
}

.text-pink {
    color: var(--color-pink);
}

.text-light-pink {
    color: var(--color-light-pink);
}

.text-brown {
    color: var(--color-brown);
}

.text-light-brown {
    color: var(--color-light-brown);
}

.text-grey {
    color: var(--color-grey);
}

.text-light-grey {
    color: var(--color-light-grey);
}

.text-gray {
    color: var(--color-gray);
}

.text-light-gray {
    color: var(--color-light-gray);
}

.text-black {
    color: var(--color-black);
}

.text-light-black {
    color: var(--color-light-black);
}

.text-white {
    color: var(--color-white);
}

/* 背景 */
.bg-page {
    background-color: var(--color-page);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.bg-olive {
    background-color: var(--color-olive);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-cyan {
    background-color: var(--color-cyan);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-purple {
    background-color: var(--color-purple);
}

.bg-mauve {
    background-color: var(--color-mauve);
}

.bg-pink {
    background-color: var(--color-pink);
}

.bg-brown {
    background-color: var(--color-brown);
}

.bg-grey {
    background-color: var(--color-grey);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-light-red {
    background-color: var(--color-light-red);
}

.bg-light-orange {
    background-color: var(--color-light-orange);
}

.bg-light-yellow {
    background-color: var(--color-light-yellow);
}

.bg-light-olive {
    background-color: var(--color-olive);
}

.bg-light-green {
    background-color: var(--color-light-green);
}

.bg-light-cyan {
    background-color: var(--color-light-cyan);
}

.bg-light-blue {
    background-color: var(--color-light-blue);
}

.bg-light-purple {
    background-color: var(--color-light-purple);
}

.bg-light-mauve {
    background-color: var(--color-light-mauve);
}

.bg-light-pink {
    background-color: var(--color-light-pink);
}

.bg-light-brown {
    background-color: var(--color-light-brown);
}

.bg-light-grey {
    background-color: var(--color-light-grey);
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-light-black {
    background-color: var(--color-light-black);
}

.bg-light-white {
    background-color: var(--color-light-white);
}

/* 渐变色 */
.bg-lightblue-to-white {
    background: linear-gradient(to bottom, var(--color-light-blue) 10%, var(--color-white) 70%)
}

.bg-lightcyan-to-white {
    background: linear-gradient(to bottom, var(--color-light-cyan) 10%, var(--color-white) 70%)
}