:root, .theme-default {
	/* https://javisperez.github.io/tailwindcolorshades/?buttercup=f6ae12&bali-hai=84a2ad&crocodile=796b52&dark-blue=383ffc&scooter=01c4e0&jacarta=272263
	https://www.skeleton.dev/docs/generator 
	https://www.tailwindshades.com */
	/* =~= Theme Styles =~= */
	/* 
   --theme-border-base: 0px;
	--theme-font-family-heading: 'Creepster', cursive;
	--theme-font-family-base: system-ui;
	--theme-rounded-container: 24px; 
   */
    --theme-font-color-base: 0 0 0;  /* var(--color-primary-900); */
	--theme-font-color-dark: 255 255 255; /* var(--color-primary-200);*/
	--theme-rounded-base: 8px;
	/* =~= Theme On-X Colors =~= */
	--on-primary: 255 255 255;
	--on-secondary: 255 255 255;
	--on-tertiary: 0 0 0;
	--on-success: 0 0 0;
	--on-warning: 0 0 0;
	--on-error:  var(--color-error-50);  // 255 255 255;
	--on-surface: 255 255 255;
	/* =~= Theme Colors  =~= */


	


	/* primary | #7367f0 */
	--color-primary-50: 234 232 253; /* ⬅ #eae8fd */
	--color-primary-100: 227 225 252; /* ⬅ #e3e1fc */
	--color-primary-200: 220 217 251; /* ⬅ #dcd9fb */
	--color-primary-300: 199 194 249; /* ⬅ #c7c2f9 */
	--color-primary-400: 157 149 245; /* ⬅ #9d95f5 */
	--color-primary-500: 115 103 240; /* ⬅ #7367f0 */
	--color-primary-600: 104 93 216; /* ⬅ #685dd8 */
	--color-primary-700: 86 77 180; /* ⬅ #564db4 */
	--color-primary-800: 69 62 144; /* ⬅ #453e90 */
	--color-primary-900: 56 50 118; /* ⬅ #383276 */
	--color-primary-950: 26 20 107; /* ⬅ #1a146b */
	/* 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 | #D41976 */
	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
	--color-error-500: 212 25 118; /* ⬅ #D41976 */
	--color-error-600: 191 23 106; /* ⬅ #bf176a */
	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
	--color-error-900: 104 12 58; /* ⬅ #680c3a */




	/*color verde de tailwind */
	--color-surface-50	: 240 253 244;  /*// rgb(240 253 244); */
	--color-surface-100	: 220 252 231;  /*// rgb(220 252 231); */
	--color-surface-200	: 187 247 208;  /*// rgb(187 247 208); */
	--color-surface-300	: 134 239 172;  /*// rgb(134 239 172); */
	--color-surface-400	:  74 222 128;  /*// rgb(74 222 128); */
	--color-surface-500	:  34 197  94;  /*// rgb(34 197 94); */
	--color-surface-600	:  22 163  74;  /*// rgb(22 163 74); */
	--color-surface-700	:  21 128  61;  /*// rgb(21 128 61); */
	--color-surface-800	:  22 101  52;  /*// rgb(22 101 52); */
	--color-surface-900	:  20  83  45;  /*// rgb(20 83 45); */
	--color-surface-950	:   5  46  22;  /*// rgb(5 46 22); */

}