:root
{
    --honbudojo-dojo-white: #f8f8f5;
    --honbudojo-kuro-black: #353535;
    --honbudojo-bamboo-tan: #d6c6aa;
    --honbudojo-tatami-green: #7ba249;
    --honbudojo-tatami-green-dark: #698d3e;
    --honbudojo-shoji-grey: #c7c7c7;
    --honbudojo-rust-red: #8c3c3c;
    --honbudojo-indigo-gi: #2e3f55;
    --honbudojo-golden-yellow: #968732;
}

.honbudojo-bg-dojo-white { background-color: var(--honbudojo-dojo-white); }
.honbudojo-bg-kuro-black { background-color: var(--honbudojo-kuro-black); }
.honbudojo-bg-bamboo-tan { background-color: var(--honbudojo-bamboo-tan); }
.honbudojo-bg-tatami-green { background-color: var(--honbudojo-tatami-green); }
.honbudojo-bg-shoji-grey { background-color: var(--honbudojo-shoji-grey); }
.honbudojo-bg-rust-red { background-color: var(--honbudojo-rust-red); }
.honbudojo-bg-indigo-gi { background-color: var(--honbudojo-indigo-gi); }
.honbudojo-bg-golden-yellow { background-color: var(--honbudojo-golden-yellow); }

.honbudojo-text-dojo-white { color: var(--honbudojo-dojo-white); }
.honbudojo-text-kuro-black { color: var(--honbudojo-kuro-black); }
.honbudojo-text-bamboo-tan { color: var(--honbudojo-bamboo-tan); }
.honbudojo-text-tatami-green { color: var(--honbudojo-tatami-green); }
.honbudojo-text-shoji-grey { color: var(--honbudojo-shoji-grey); }
.honbudojo-text-rust-red { color: var(--honbudojo-rust-red); }
.honbudojo-text-indigo-gi { color: var(--honbudojo-indigo-gi); }
.honbudojo-text-golden-yellow { color: var(--honbudojo-golden-yellow); }

.honbudojo-border-tatami-green { border-color: var(--honbudojo-tatami-green); }
.honbudojo-border-shoji-grey { border-color: var(--honbudojo-shoji-grey); }
.honbudojo-border-rust-red { border-color: var(--honbudojo-rust-red); }

.honbudojo-focus-ring:focus
{
    outline: none;
    border-color: var(--honbudojo-tatami-green);
    box-shadow: 0 0 0 4px rgba(123, 162, 73, 0.16);
}

.honbudojo-btn-primary
{
    background-color: var(--honbudojo-tatami-green);
    color: var(--honbudojo-dojo-white);
}
.honbudojo-btn-primary:hover
{
    background-color: var(--honbudojo-tatami-green-dark);
}

.honbudojo-btn-dark
{
    background-color: var(--honbudojo-kuro-black);
    color: var(--honbudojo-dojo-white);
}
.honbudojo-btn-dark:hover
{
    background-color: #2a2a2a;
}

.honbudojo-link-tatami
{
    color: var(--honbudojo-tatami-green);
}
.honbudojo-link-tatami:hover
{
    color: var(--honbudojo-tatami-green-dark);
}