hellob.art/src/theme.postcss

:root {
	/* =~= Theme Properties =~= */
	--theme-font-family-base: system-ui;
	--theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--theme-font-color-base: 0 0 0;
	--theme-font-color-dark: 255 255 255;
	--theme-rounded-base: 4px;
	--theme-rounded-container: 12px;
	--theme-border-base: 2px;
	/* =~= Theme On-X Colors =~= */
	--on-primary: 0 0 0;
	--on-secondary: 255 255 255;
	--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 | #67a1ba */
	--color-primary-50: 232 241 245; /* ⬅ #e8f1f5 */
	--color-primary-100: 225 236 241; /* ⬅ #e1ecf1 */
	--color-primary-200: 217 232 238; /* ⬅ #d9e8ee */
	--color-primary-300: 194 217 227; /* ⬅ #c2d9e3 */
	--color-primary-400: 149 189 207; /* ⬅ #95bdcf */
	--color-primary-500: 103 161 186; /* ⬅ #67a1ba */
	--color-primary-600: 93 145 167; /* ⬅ #5d91a7 */
	--color-primary-700: 77 121 140; /* ⬅ #4d798c */
	--color-primary-800: 62 97 112; /* ⬅ #3e6170 */
	--color-primary-900: 50 79 91; /* ⬅ #324f5b */
	/* secondary | #4F46E5 */
	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
	/* tertiary | #0EA5E9 */
	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
	/* success | #84cc16 */
	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
	--color-success-600: 119 184 20; /* ⬅ #77b814 */
	--color-success-700: 99 153 17; /* ⬅ #639911 */
	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
	--color-success-900: 65 100 11; /* ⬅ #41640b */
	/* warning | #EAB308 */
	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
	--color-warning-900: 115 88 4; /* ⬅ #735804 */
	/* error | #d31922 */
	--color-error-50: 248 221 222; /* ⬅ #f8ddde */
	--color-error-100: 246 209 211; /* ⬅ #f6d1d3 */
	--color-error-200: 244 198 200; /* ⬅ #f4c6c8 */
	--color-error-300: 237 163 167; /* ⬅ #eda3a7 */
	--color-error-400: 224 94 100; /* ⬅ #e05e64 */
	--color-error-500: 211 25 34; /* ⬅ #d31922 */
	--color-error-600: 190 23 31; /* ⬅ #be171f */
	--color-error-700: 158 19 26; /* ⬅ #9e131a */
	--color-error-800: 127 15 20; /* ⬅ #7f0f14 */
	--color-error-900: 103 12 17; /* ⬅ #670c11 */
	/* surface | #063142 */
	--color-surface-50: 218 224 227; /* ⬅ #dae0e3 */
	--color-surface-100: 205 214 217; /* ⬅ #cdd6d9 */
	--color-surface-200: 193 204 208; /* ⬅ #c1ccd0 */
	--color-surface-300: 155 173 179; /* ⬅ #9badb3 */
	--color-surface-400: 81 111 123; /* ⬅ #516f7b */
	--color-surface-500: 6 49 66; /* ⬅ #063142 */
	--color-surface-600: 5 44 59; /* ⬅ #052c3b */
	--color-surface-700: 5 37 50; /* ⬅ #052532 */
	--color-surface-800: 4 29 40; /* ⬅ #041d28 */
	--color-surface-900: 3 24 32; /* ⬅ #031820 */
	
}