:root {
    --wbgreen-100: #E3F9E5;
    --wbgreen-200: #C1F2C7;
    --wbgreen-300: #91E697;
    --wbgreen-400: #51CA58;
    --wbgreen-500: #31B237;
    --wbgreen-600: #18981D;
    --wbgreen-700: #0F8613;
    --wbgreen-800: #0E7817;
    --wbgreen-900: #07600E;
    --wbgreen-950: #014807;
    --wbgrey-100: #F7F7F7;
    --wbgrey-200: #E1E1E1;
    --wbgrey-300: #CFCFCF;
    --wbgrey-400: #B1B1B1;
    --wbgrey-500: #9E9E9E;
    --wbgrey-600: #7E7E7E;
    --wbgrey-700: #626262;
    --wbgrey-800: #515151;
    --wbgrey-900: #3B3B3B;
    --wbgrey-950: #222222;
}

/* Backgrounds (bg-*) */
.bg-wbgreen-100 { background-color: var(--wbgreen-100); }
.bg-wbgreen-200 { background-color: var(--wbgreen-200); }
.bg-wbgreen-300 { background-color: var(--wbgreen-300); }
.bg-wbgreen-400 { background-color: var(--wbgreen-400); }
.bg-wbgreen-500 { background-color: var(--wbgreen-500); }
.bg-wbgreen-600 { background-color: var(--wbgreen-600); }
.bg-wbgreen-700 { background-color: var(--wbgreen-700); }
.bg-wbgreen-800 { background-color: var(--wbgreen-800); }
.bg-wbgreen-900 { background-color: var(--wbgreen-900); }
.bg-wbgreen-950 { background-color: var(--wbgreen-950); }
.bg-wbgrey-100 { background-color: var(--wbgrey-100); }
.bg-wbgrey-200 { background-color: var(--wbgrey-200); }
.bg-wbgrey-300 { background-color: var(--wbgrey-300); }
.bg-wbgrey-400 { background-color: var(--wbgrey-400); }
.bg-wbgrey-500 { background-color: var(--wbgrey-500); }
.bg-wbgrey-600 { background-color: var(--wbgrey-600); }
.bg-wbgrey-700 { background-color: var(--wbgrey-700); }
.bg-wbgrey-800 { background-color: var(--wbgrey-800); }
.bg-wbgrey-900 { background-color: var(--wbgrey-900); }
.bg-wbgrey-950 { background-color: var(--wbgrey-950); }

/* Text (text-*) */
.text-wbgreen-100 { color: var(--wbgreen-100); }
.text-wbgreen-200 { color: var(--wbgreen-200); }
.text-wbgreen-300 { color: var(--wbgreen-300); }
.text-wbgreen-400 { color: var(--wbgreen-400); }
.text-wbgreen-500 { color: var(--wbgreen-500); }
.text-wbgreen-600 { color: var(--wbgreen-600); }
.text-wbgreen-700 { color: var(--wbgreen-700); }
.text-wbgreen-800 { color: var(--wbgreen-800); }
.text-wbgreen-900 { color: var(--wbgreen-900); }
.text-wbgreen-950 { color: var(--wbgreen-950); }
.text-wbgrey-100 { color: var(--wbgrey-100); }
.text-wbgrey-200 { color: var(--wbgrey-200); }
.text-wbgrey-300 { color: var(--wbgrey-300); }
.text-wbgrey-400 { color: var(--wbgrey-400); }
.text-wbgrey-500 { color: var(--wbgrey-500); }
.text-wbgrey-600 { color: var(--wbgrey-600); }
.text-wbgrey-700 { color: var(--wbgrey-700); }
.text-wbgrey-800 { color: var(--wbgrey-800); }
.text-wbgrey-900 { color: var(--wbgrey-900); }
.text-wbgrey-950 { color: var(--wbgrey-950); }

/* Table (table-*) */
.table-wbgreen-100 { background-color: var(--wbgreen-100); }
.table-wbgreen-200 { background-color: var(--wbgreen-200); }
.table-wbgreen-300 { background-color: var(--wbgreen-300); }
.table-wbgreen-400 { background-color: var(--wbgreen-400); }
.table-wbgreen-500 { background-color: var(--wbgreen-500); }
.table-wbgreen-600 { background-color: var(--wbgreen-600); }
.table-wbgreen-700 { background-color: var(--wbgreen-700); }
.table-wbgreen-800 { background-color: var(--wbgreen-800); }
.table-wbgreen-900 { background-color: var(--wbgreen-900); }
.table-wbgreen-950 { background-color: var(--wbgreen-950); }
.table-wbgrey-100 { background-color: var(--wbgrey-100); }
.table-wbgrey-200 { background-color: var(--wbgrey-200); }
.table-wbgrey-300 { background-color: var(--wbgrey-300); }
.table-wbgrey-400 { background-color: var(--wbgrey-400); }
.table-wbgrey-500 { background-color: var(--wbgrey-500); }
.table-wbgrey-600 { background-color: var(--wbgrey-600); }
.table-wbgrey-700 { background-color: var(--wbgrey-700); }
.table-wbgrey-800 { background-color: var(--wbgrey-800); }
.table-wbgrey-900 { background-color: var(--wbgrey-900); }
.table-wbgrey-950 { background-color: var(--wbgrey-950); }

/* Alerts (alert-*) */
.alert-wbgreen-100 { background-color: var(--wbgreen-100); border-color: var(--wbgreen-200); color: var(--wbgreen-950); }
.alert-wbgreen-200 { background-color: var(--wbgreen-200); border-color: var(--wbgreen-300); color: var(--wbgreen-950); }
.alert-wbgreen-300 { background-color: var(--wbgreen-300); border-color: var(--wbgreen-400); color: var(--wbgreen-950); }
.alert-wbgreen-400 { background-color: var(--wbgreen-400); border-color: var(--wbgreen-500); color: var(--wbgreen-950); }
.alert-wbgreen-500 { background-color: var(--wbgreen-500); border-color: var(--wbgreen-600); color: #fff; }
.alert-wbgreen-600 { background-color: var(--wbgreen-600); border-color: var(--wbgreen-700); color: #fff; }
.alert-wbgreen-700 { background-color: var(--wbgreen-700); border-color: var(--wbgreen-800); color: #fff; }
.alert-wbgreen-800 { background-color: var(--wbgreen-800); border-color: var(--wbgreen-900); color: #fff; }
.alert-wbgreen-900 { background-color: var(--wbgreen-900); border-color: var(--wbgreen-950); color: #fff; }
.alert-wbgreen-950 { background-color: var(--wbgreen-950); border-color: var(--wbgreen-950); color: #fff; }
.alert-wbgrey-100 { background-color: var(--wbgrey-100); border-color: var(--wbgrey-200); color: var(--wbgrey-950); }
.alert-wbgrey-200 { background-color: var(--wbgrey-200); border-color: var(--wbgrey-300); color: var(--wbgrey-950); }
.alert-wbgrey-300 { background-color: var(--wbgrey-300); border-color: var(--wbgrey-400); color: var(--wbgrey-950); }
.alert-wbgrey-400 { background-color: var(--wbgrey-400); border-color: var(--wbgrey-500); color: var(--wbgrey-950); }
.alert-wbgrey-500 { background-color: var(--wbgrey-500); border-color: var(--wbgrey-600); color: var(--wbgrey-950); }
.alert-wbgrey-600 { background-color: var(--wbgrey-600); border-color: var(--wbgrey-700); color: var(--wbgrey-100); }
.alert-wbgrey-700 { background-color: var(--wbgrey-700); border-color: var(--wbgrey-800); color: var(--wbgrey-100); }
.alert-wbgrey-800 { background-color: var(--wbgrey-800); border-color: var(--wbgrey-900); color: var(--wbgrey-100); }
.alert-wbgrey-900 { background-color: var(--wbgrey-900); border-color: var(--wbgrey-950); color: var(--wbgrey-100); }
.alert-wbgrey-950 { background-color: var(--wbgrey-950); border-color: var(--wbgrey-950); color: var(--wbgrey-100); }

/* Badges (badge-*) */
.badge-wbgreen-100 { background-color: var(--wbgreen-100); color: var(--wbgreen-950); }
.badge-wbgreen-200 { background-color: var(--wbgreen-200); color: var(--wbgreen-950); }
.badge-wbgreen-300 { background-color: var(--wbgreen-300); color: var(--wbgreen-950); }
.badge-wbgreen-400 { background-color: var(--wbgreen-400); color: var(--wbgreen-950); }
.badge-wbgreen-500 { background-color: var(--wbgreen-500); color: #fff; }
.badge-wbgreen-600 { background-color: var(--wbgreen-600); color: #fff; }
.badge-wbgreen-700 { background-color: var(--wbgreen-700); color: #fff; }
.badge-wbgreen-800 { background-color: var(--wbgreen-800); color: #fff; }
.badge-wbgreen-900 { background-color: var(--wbgreen-900); color: #fff; }
.badge-wbgreen-950 { background-color: var(--wbgreen-950); color: #fff; }
.badge-wbgrey-100 { background-color: var(--wbgrey-100); color: var(--wbgrey-950); }
.badge-wbgrey-200 { background-color: var(--wbgrey-200); color: var(--wbgrey-950); }
.badge-wbgrey-300 { background-color: var(--wbgrey-300); color: var(--wbgrey-950); }
.badge-wbgrey-400 { background-color: var(--wbgrey-400); color: var(--wbgrey-950); }
.badge-wbgrey-500 { background-color: var(--wbgrey-500); color: var(--wbgrey-950); }
.badge-wbgrey-600 { background-color: var(--wbgrey-600); color: var(--wbgrey-100); }
.badge-wbgrey-700 { background-color: var(--wbgrey-700); color: var(--wbgrey-100); }
.badge-wbgrey-800 { background-color: var(--wbgrey-800); color: var(--wbgrey-100); }
.badge-wbgrey-900 { background-color: var(--wbgrey-900); color: var(--wbgrey-100); }
.badge-wbgrey-950 { background-color: var(--wbgrey-950); color: var(--wbgrey-100); }

/* Buttons (btn-*) */
.btn-wbgreen-100 { background-color: var(--wbgreen-100); border-color: var(--wbgreen-200); color: var(--wbgreen-950); }
.btn-wbgreen-100:hover { background-color: var(--wbgreen-200); border-color: var(--wbgreen-300); }
.btn-wbgreen-200 { background-color: var(--wbgreen-200); border-color: var(--wbgreen-300); color: var(--wbgreen-950); }
.btn-wbgreen-200:hover { background-color: var(--wbgreen-300); border-color: var(--wbgreen-400); }
.btn-wbgreen-300 { background-color: var(--wbgreen-300); border-color: var(--wbgreen-400); color: var(--wbgreen-950); }
.btn-wbgreen-300:hover { background-color: var(--wbgreen-400); border-color: var(--wbgreen-500); }
.btn-wbgreen-400 { background-color: var(--wbgreen-400); border-color: var(--wbgreen-500); color: var(--wbgreen-950); }
.btn-wbgreen-400:hover { background-color: var(--wbgreen-500); border-color: var(--wbgreen-600); }
.btn-wbgreen-500 { background-color: var(--wbgreen-500); border-color: var(--wbgreen-600); color: #fff; }
.btn-wbgreen-500:hover { background-color: var(--wbgreen-600); border-color: var(--wbgreen-700); }
.btn-wbgreen-600 { background-color: var(--wbgreen-600); border-color: var(--wbgreen-700); color: #fff; }
.btn-wbgreen-600:hover { background-color: var(--wbgreen-700); border-color: var(--wbgreen-800); }
.btn-wbgreen-700 { background-color: var(--wbgreen-700); border-color: var(--wbgreen-800); color: #fff; }
.btn-wbgreen-700:hover { background-color: var(--wbgreen-800); border-color: var(--wbgreen-900); }
.btn-wbgreen-800 { background-color: var(--wbgreen-800); border-color: var(--wbgreen-900); color: #fff; }
.btn-wbgreen-800:hover { background-color: var(--wbgreen-900); border-color: var(--wbgreen-950); }
.btn-wbgreen-900 { background-color: var(--wbgreen-900); border-color: var(--wbgreen-950); color: #fff; }
.btn-wbgreen-900:hover { background-color: var(--wbgreen-950); border-color: var(--wbgreen-950); }
.btn-wbgreen-950 { background-color: var(--wbgreen-950); border-color: var(--wbgreen-950); color: #fff; }
.btn-wbgreen-950:hover { background-color: var(--wbgreen-950); border-color: var(--wbgreen-950); }
.btn-wbgrey-100 { background-color: var(--wbgrey-100); border-color: var(--wbgrey-200); color: var(--wbgrey-950); }
.btn-wbgrey-100:hover { background-color: var(--wbgrey-200); border-color: var(--wbgrey-300); }
.btn-wbgrey-200 { background-color: var(--wbgrey-200); border-color: var(--wbgrey-300); color: var(--wbgrey-950); }
.btn-wbgrey-200:hover { background-color: var(--wbgrey-300); border-color: var(--wbgrey-400); }
.btn-wbgrey-300 { background-color: var(--wbgrey-300); border-color: var(--wbgrey-400); color: var(--wbgrey-950); }
.btn-wbgrey-300:hover { background-color: var(--wbgrey-400); border-color: var(--wbgrey-500); }
.btn-wbgrey-400 { background-color: var(--wbgrey-400); border-color: var(--wbgrey-500); color: var(--wbgrey-950); }
.btn-wbgrey-400:hover { background-color: var(--wbgrey-500); border-color: var(--wbgrey-600); }
.btn-wbgrey-500 { background-color: var(--wbgrey-500); border-color: var(--wbgrey-600); color: var(--wbgrey-950); }
.btn-wbgrey-500:hover { background-color: var(--wbgrey-600); border-color: var(--wbgrey-700); }
.btn-wbgrey-600 { background-color: var(--wbgrey-600); border-color: var(--wbgrey-700); color: var(--wbgrey-100); }
.btn-wbgrey-600:hover { background-color: var(--wbgrey-700); border-color: var(--wbgrey-800); }
.btn-wbgrey-700 { background-color: var(--wbgrey-700); border-color: var(--wbgrey-800); color: var(--wbgrey-100); }
.btn-wbgrey-700:hover { background-color: var(--wbgrey-800); border-color: var(--wbgrey-900); }
.btn-wbgrey-800 { background-color: var(--wbgrey-800); border-color: var(--wbgrey-900); color: var(--wbgrey-100); }
.btn-wbgrey-800:hover { background-color: var(--wbgrey-900); border-color: var(--wbgrey-950); }
.btn-wbgrey-900 { background-color: var(--wbgrey-900); border-color: var(--wbgrey-950); color: var(--wbgrey-100); }
.btn-wbgrey-900:hover { background-color: var(--wbgrey-950); border-color: var(--wbgrey-950); }
.btn-wbgrey-950 { background-color: var(--wbgrey-950); border-color: var(--wbgrey-950); color: var(--wbgrey-100); }
.btn-wbgrey-950:hover { background-color: var(--wbgrey-950); border-color: var(--wbgrey-950); }

/* Outline Buttons (btn-outline-*) */
.btn-outline-wbgreen-100 { border-color: var(--wbgreen-100); color: var(--wbgreen-100); }
.btn-outline-wbgreen-100:hover { background-color: var(--wbgreen-100); color: var(--wbgreen-950); }
.btn-outline-wbgreen-200 { border-color: var(--wbgreen-200); color: var(--wbgreen-200); }
.btn-outline-wbgreen-200:hover { background-color: var(--wbgreen-200); color: var(--wbgreen-950); }
.btn-outline-wbgreen-300 { border-color: var(--wbgreen-300); color: var(--wbgreen-300); }
.btn-outline-wbgreen-300:hover { background-color: var(--wbgreen-300); color: var(--wbgreen-950); }
.btn-outline-wbgreen-400 { border-color: var(--wbgreen-400); color: var(--wbgreen-400); }
.btn-outline-wbgreen-400:hover { background-color: var(--wbgreen-400); color: var(--wbgreen-950); }
.btn-outline-wbgreen-500 { border-color: var(--wbgreen-500); color: var(--wbgreen-500); }
.btn-outline-wbgreen-500:hover { background-color: var(--wbgreen-500); color: #fff; }
.btn-outline-wbgreen-600 { border-color: var(--wbgreen-600); color: var(--wbgreen-600); }
.btn-outline-wbgreen-600:hover { background-color: var(--wbgreen-600); color: #fff; }
.btn-outline-wbgreen-700 { border-color: var(--wbgreen-700); color: var(--wbgreen-700); }
.btn-outline-wbgreen-700:hover { background-color: var(--wbgreen-700); color: #fff; }
.btn-outline-wbgreen-800 { border-color: var(--wbgreen-800); color: var(--wbgreen-800); }
.btn-outline-wbgreen-800:hover { background-color: var(--wbgreen-800); color: #fff; }
.btn-outline-wbgreen-900 { border-color: var(--wbgreen-900); color: var(--wbgreen-900); }
.btn-outline-wbgreen-900:hover { background-color: var(--wbgreen-900); color: #fff; }
.btn-outline-wbgreen-950 { border-color: var(--wbgreen-950); color: var(--wbgreen-950); }
.btn-outline-wbgreen-950:hover { background-color: var(--wbgreen-950); color: #fff; }
.btn-outline-wbgrey-100 { border-color: var(--wbgrey-100); color: var(--wbgrey-100); }
.btn-outline-wbgrey-100:hover { background-color: var(--wbgrey-100); color: var(--wbgrey-950); }
.btn-outline-wbgrey-200 { border-color: var(--wbgrey-200); color: var(--wbgrey-200); }
.btn-outline-wbgrey-200:hover { background-color: var(--wbgrey-200); color: var(--wbgrey-950); }
.btn-outline-wbgrey-300 { border-color: var(--wbgrey-300); color: var(--wbgrey-300); }
.btn-outline-wbgrey-300:hover { background-color: var(--wbgrey-300); color: var(--wbgrey-950); }
.btn-outline-wbgrey-400 { border-color: var(--wbgrey-400); color: var(--wbgrey-400); }
.btn-outline-wbgrey-400:hover { background-color: var(--wbgrey-400); color: var(--wbgrey-950); }
.btn-outline-wbgrey-500 { border-color: var(--wbgrey-500); color: var(--wbgrey-500); }
.btn-outline-wbgrey-500:hover { background-color: var(--wbgrey-500); color: var(--wbgrey-950); }
.btn-outline-wbgrey-600 { border-color: var(--wbgrey-600); color: var(--wbgrey-600); }
.btn-outline-wbgrey-600:hover { background-color: var(--wbgrey-600); color: var(--wbgrey-100); }
.btn-outline-wbgrey-700 { border-color: var(--wbgrey-700); color: var(--wbgrey-700); }
.btn-outline-wbgrey-700:hover { background-color: var(--wbgrey-700); color: var(--wbgrey-100); }
.btn-outline-wbgrey-800 { border-color: var(--wbgrey-800); color: var(--wbgrey-800); }
.btn-outline-wbgrey-800:hover { background-color: var(--wbgrey-800); color: var(--wbgrey-100); }
.btn-outline-wbgrey-900 { border-color: var(--wbgrey-900); color: var(--wbgrey-900); }
.btn-outline-wbgrey-900:hover { background-color: var(--wbgrey-900); color: var(--wbgrey-100); }
.btn-outline-wbgrey-950 { border-color: var(--wbgrey-950); color: var(--wbgrey-950); }
.btn-outline-wbgrey-950:hover { background-color: var(--wbgrey-950); color: var(--wbgrey-100); }