:root [data-theme='custom'] {
	/* =~= Theme Properties =~= */
/* --theme-font-family-base: 'Inter', sans-serif; */
--theme-font-family-base: system-ui, sans-serif; ;
/* --theme-font-family-heading: 'Lora', sans-serif; */
--theme-font-family-heading: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--theme-font-color-base: 0 0 0;
	--theme-font-color-dark: 255 255 255;
	--theme-rounded-base: 4px;
	--theme-rounded-container: 4px;
	--theme-border-base: 2px;
	/* =~= Theme On-X Colors =~= */
	--on-primary: 0 0 0;
	--on-secondary: 0 0 0;
	--on-tertiary: 0 0 0;
	--on-success: 0 0 0;
	--on-warning: 0 0 0;
	--on-error: 255 255 255;
	--on-surface: 255 255 255;
	/* =~= Theme Colors  =~= */
	/* primary | #59aaf2 */
	--color-primary-50: 230 242 253; /* ⬅ #e6f2fd */
	--color-primary-100: 222 238 252; /* ⬅ #deeefc */
	--color-primary-200: 214 234 252; /* ⬅ #d6eafc */
	--color-primary-300: 189 221 250; /* ⬅ #bdddfa */
	--color-primary-400: 139 196 246; /* ⬅ #8bc4f6 */
	--color-primary-500: 89 170 242; /* ⬅ #59aaf2 */
	--color-primary-600: 80 153 218; /* ⬅ #5099da */
	--color-primary-700: 67 128 182; /* ⬅ #4380b6 */
	--color-primary-800: 53 102 145; /* ⬅ #356691 */
	--color-primary-900: 44 83 119; /* ⬅ #2c5377 */
	/* secondary | #dfcf11 */
	--color-secondary-50: 250 248 219; /* ⬅ #faf8db */
	--color-secondary-100: 249 245 207; /* ⬅ #f9f5cf */
	--color-secondary-200: 247 243 196; /* ⬅ #f7f3c4 */
	--color-secondary-300: 242 236 160; /* ⬅ #f2eca0 */
	--color-secondary-400: 233 221 88; /* ⬅ #e9dd58 */
	--color-secondary-500: 223 207 17; /* ⬅ #dfcf11 */
	--color-secondary-600: 201 186 15; /* ⬅ #c9ba0f */
	--color-secondary-700: 167 155 13; /* ⬅ #a79b0d */
	--color-secondary-800: 134 124 10; /* ⬅ #867c0a */
	--color-secondary-900: 109 101 8; /* ⬅ #6d6508 */
	/* tertiary | #e90ed9 */
	--color-tertiary-50: 252 219 249; /* ⬅ #fcdbf9 */
	--color-tertiary-100: 251 207 247; /* ⬅ #fbcff7 */
	--color-tertiary-200: 250 195 246; /* ⬅ #fac3f6 */
	--color-tertiary-300: 246 159 240; /* ⬅ #f69ff0 */
	--color-tertiary-400: 240 86 228; /* ⬅ #f056e4 */
	--color-tertiary-500: 233 14 217; /* ⬅ #e90ed9 */
	--color-tertiary-600: 210 13 195; /* ⬅ #d20dc3 */
	--color-tertiary-700: 175 11 163; /* ⬅ #af0ba3 */
	--color-tertiary-800: 140 8 130; /* ⬅ #8c0882 */
	--color-tertiary-900: 114 7 106; /* ⬅ #72076a */
	/* success | #14c94a */
	--color-success-50: 220 247 228; /* ⬅ #dcf7e4 */
	--color-success-100: 208 244 219; /* ⬅ #d0f4db */
	--color-success-200: 196 242 210; /* ⬅ #c4f2d2 */
	--color-success-300: 161 233 183; /* ⬅ #a1e9b7 */
	--color-success-400: 91 217 128; /* ⬅ #5bd980 */
	--color-success-500: 20 201 74; /* ⬅ #14c94a */
	--color-success-600: 18 181 67; /* ⬅ #12b543 */
	--color-success-700: 15 151 56; /* ⬅ #0f9738 */
	--color-success-800: 12 121 44; /* ⬅ #0c792c */
	--color-success-900: 10 98 36; /* ⬅ #0a6224 */
	/* warning | #ed9605 */
	--color-warning-50: 252 239 218; /* ⬅ #fcefda */
	--color-warning-100: 251 234 205; /* ⬅ #fbeacd */
	--color-warning-200: 251 229 193; /* ⬅ #fbe5c1 */
	--color-warning-300: 248 213 155; /* ⬅ #f8d59b */
	--color-warning-400: 242 182 80; /* ⬅ #f2b650 */
	--color-warning-500: 237 150 5; /* ⬅ #ed9605 */
	--color-warning-600: 213 135 5; /* ⬅ #d58705 */
	--color-warning-700: 178 113 4; /* ⬅ #b27104 */
	--color-warning-800: 142 90 3; /* ⬅ #8e5a03 */
	--color-warning-900: 116 74 2; /* ⬅ #744a02 */
	/* error | #d51a1e */
	--color-error-50: 249 221 221; /* ⬅ #f9dddd */
	--color-error-100: 247 209 210; /* ⬅ #f7d1d2 */
	--color-error-200: 245 198 199; /* ⬅ #f5c6c7 */
	--color-error-300: 238 163 165; /* ⬅ #eea3a5 */
	--color-error-400: 226 95 98; /* ⬅ #e25f62 */
	--color-error-500: 213 26 30; /* ⬅ #d51a1e */
	--color-error-600: 192 23 27; /* ⬅ #c0171b */
	--color-error-700: 160 20 23; /* ⬅ #a01417 */
	--color-error-800: 128 16 18; /* ⬅ #801012 */
	--color-error-900: 104 13 15; /* ⬅ #680d0f */
	/* surface | #424a6c */
	--color-surface-50: 227 228 233; /* ⬅ #e3e4e9 */
	--color-surface-100: 217 219 226; /* ⬅ #d9dbe2 */
	--color-surface-200: 208 210 218; /* ⬅ #d0d2da */
	--color-surface-300: 179 183 196; /* ⬅ #b3b7c4 */
	--color-surface-400: 123 128 152; /* ⬅ #7b8098 */
	--color-surface-500: 66 74 108; /* ⬅ #424a6c */
	--color-surface-600: 59 67 97; /* ⬅ #3b4361 */
	--color-surface-700: 50 56 81; /* ⬅ #323851 */
	--color-surface-800: 40 44 65; /* ⬅ #282c41 */
	--color-surface-900: 32 36 53; /* ⬅ #202435 */
}