:root {
    --th-red-100: #f8d7da;
    --th-red-200: #EEAEBA;
    --th-red-300: #ea868f;
    --th-red-400: #e35d6a;
    --th-red-500: #dc3545;
    --th-red-600: #AB2A37;
    --th-red-700: #842029;
    --th-red-800: #58151c;
    --th-red-900: #2c0b0e;

    --th-orange-100: #ffe5d0;
    --th-orange-200: #fecba1;
    --th-orange-300: #feb272;
    --th-orange-400: #fd9843;
    --th-orange-500: #fd7e14;
    --th-orange-600: #ca6510;
    --th-orange-700: #984c0c;
    --th-orange-800: #6D3208;
    --th-orange-900: #331904;

    --th-green-100: #d1e7dd;
    --th-green-200: #a3cfbb;
    --th-green-300: #75b798;
    --th-green-400: #479f76;
    --th-green-500: #198754;
    --th-green-600: #146c43;
    --th-green-700: #0f5132;
    --th-green-800: #0a3622;
    --th-green-900: #051b11;

    --th-gray-100: #f8f9fa;
    --th-gray-200: #e9ecef;
    --th-gray-300: #dee2e6;
    --th-gray-400: #ced4da;
    --th-gray-500: #adb5bd;
    --th-gray-600: #6c757d;
    --th-gray-700: #495057;
    --th-gray-800: #343a40;
    --th-gray-900: #212529;
}

/** text */
.text-red-100 { color: var(--th-red-100) }
.text-red-200 { color: var(--th-red-200) }
.text-red-300 { color: var(--th-red-300) }
.text-red-400 { color: var(--th-red-400) }
.text-red-500 { color: var(--th-red-500) }
.text-red-600 { color: var(--th-red-600) }
.text-red-700 { color: var(--th-red-700) }
.text-red-800 { color: var(--th-red-800) }
.text-red-900 { color: var(--th-red-900) }

.text-orange-100 { color: var(--th-orange-100) }
.text-orange-200 { color: var(--th-orange-200) }
.text-orange-300 { color: var(--th-orange-300) }
.text-orange-400 { color: var(--th-orange-400) }
.text-orange-500 { color: var(--th-orange-500) }
.text-orange-600 { color: var(--th-orange-600) }
.text-orange-700 { color: var(--th-orange-700) }
.text-orange-800 { color: var(--th-orange-800) }
.text-orange-900 { color: var(--th-orange-900) }

.text-green-100 { color: var(--th-green-100) }
.text-green-200 { color: var(--th-green-200) }
.text-green-300 { color: var(--th-green-300) }
.text-green-400 { color: var(--th-green-400) }
.text-green-500 { color: var(--th-green-500) }
.text-green-600 { color: var(--th-green-600) }
.text-green-700 { color: var(--th-green-700) }
.text-green-800 { color: var(--th-green-800) }
.text-green-900 { color: var(--th-green-900) }

.text-gray-100 { color: var(--th-gray-100) }
.text-gray-200 { color: var(--th-gray-200) }
.text-gray-300 { color: var(--th-gray-300) }
.text-gray-400 { color: var(--th-gray-400) }
.text-gray-500 { color: var(--th-gray-500) }
.text-gray-600 { color: var(--th-gray-600) }
.text-gray-700 { color: var(--th-gray-700) }
.text-gray-800 { color: var(--th-gray-800) }
.text-gray-900 { color: var(--th-gray-900) }

/** font-size */
.fs-xs { font-size: 0.5rem; }
.fs-sm { font-size: 0.6rem; }
.fs-md { font-size: 0.7rem; }
.fs-lg { font-size: 0.8rem; }
.fs-xl { font-size: 0.9rem; }
.fs-2xl { font-size: 1.2rem; }
.fs-3xl { font-size: 1.4rem; }
.fs-4xl { font-size: 1.6rem; }
.fs-5xl { font-size: 1.8rem; }
.fs-h6 { font-size: 2rem; }
.fs-h5 { font-size: 2.2rem; }
.fs-h4 { font-size: 2.4rem; }
.fs-h3 { font-size: 2.6rem; }
.fs-h2 { font-size: 2.8rem; }
.fs-h1 { font-size: 3rem; }

/** bg */
.bg-red-100 { background-color: var(--th-red-100) }
.bg-red-200 { background-color: var(--th-red-200) }
.bg-red-300 { background-color: var(--th-red-300) }
.bg-red-400 { background-color: var(--th-red-400) }
.bg-red-500 { background-color: var(--th-red-500) }
.bg-red-600 { background-color: var(--th-red-600) }
.bg-red-700 { background-color: var(--th-red-700) }
.bg-red-800 { background-color: var(--th-red-800) }
.bg-red-900 { background-color: var(--th-red-900) }

.bg-orange-100 { background-color: var(--th-orange-100) }
.bg-orange-200 { background-color: var(--th-orange-200) }
.bg-orange-300 { background-color: var(--th-orange-300) }
.bg-orange-400 { background-color: var(--th-orange-400) }
.bg-orange-500 { background-color: var(--th-orange-500) }
.bg-orange-600 { background-color: var(--th-orange-600) }
.bg-orange-700 { background-color: var(--th-orange-700) }
.bg-orange-800 { background-color: var(--th-orange-800) }
.bg-orange-900 { background-color: var(--th-orange-900) }

.bg-green-100 { background-color: var(--th-green-100) }
.bg-green-200 { background-color: var(--th-green-200) }
.bg-green-300 { background-color: var(--th-green-300) }
.bg-green-400 { background-color: var(--th-green-400) }
.bg-green-500 { background-color: var(--th-green-500) }
.bg-green-600 { background-color: var(--th-green-600) }
.bg-green-700 { background-color: var(--th-green-700) }
.bg-green-800 { background-color: var(--th-green-800) }
.bg-green-900 { background-color: var(--th-green-900) }

.bg-gray-100 { background-color: var(--th-gray-100) }
.bg-gray-200 { background-color: var(--th-gray-200) }
.bg-gray-300 { background-color: var(--th-gray-300) }
.bg-gray-400 { background-color: var(--th-gray-400) }
.bg-gray-500 { background-color: var(--th-gray-500) }
.bg-gray-600 { background-color: var(--th-gray-600) }
.bg-gray-700 { background-color: var(--th-gray-700) }
.bg-gray-800 { background-color: var(--th-gray-800) }
.bg-gray-900 { background-color: var(--th-gray-900) }