CSS and SCSS Color/Styling Variables For dWeb dSites and dApps. Colors pulled from @dwstyle/design
:root {
--white: #f9f9fa;
--black: #403d46;
--gray: #403d46;
--gray-900: #403d46;
--gray-800: #6e6979;
--gray-700: #8b8699;
--gray-600: #a29cb2;
--gray-500: #b5b0c1;
--gray-400: #c5c1cf;
--gray-300: #d4d1db;
--gray-200: #e1dfe6;
--gray-100: #edecf0;
--green: #44dd7d;
--green-disabled: #ecfff1;
--green-hover: #4dff7a;
--green-darker: #80ffa0;
--green-light100: #ecfff1;
--green-light200: #d7ffe1;
--green-light300: #bfffcf;
--green-light400: #a4ffbb;
--green-mid: #4dff7a;
--green-dark100: #80ffa0;
--green-dark200: #3dcb61;
--green-dark300: #33a951;
--green-dark400: #257b3a;
--purple: #409cff;
--purple-disabled: #eaefff;
--purple-hover: #7b9cff;
--purple-darker: #456de6;
--purple-light100: #faecff;
--purple-light200: #f5d7ff;
--purple-light300: #efbfff;
--purple-light400: #df80ff;
--purple-light500: #d34dff;
--purple-mid: #be45e6;
--purple-dark100: #e8a3ff;
--purple-dark200: #a73cc9;
--purple-dark300: #8a32a7;
--purple-dark400: #632477;
--indigo: #409cff;
--indigo-light100: #f1ecff;
--indigo-light200: #e1d7ff;
--indigo-light300: #cfc0ff;
--indigo-light400: #bba4ff;
--indigo-mid: #a181ff;
--indigo-dark100: #6d45e5;
--indigo-dark200: #603cc8;
--indigo-dark300: #4f31a5;
--indigo-dark400: #372374;
--yellow: #ffd34d;
--yellow-disabled: #fff8e6;
--yellow-hover: #ffdc71;
--yellow-darker: #e6bf45;
--yellow-light100: #fff8e6;
--yellow-light200: #fff2cc;
--yellow-light300: #ffebb0;
--yellow-light400: #ffe492;
--yellow-mid: #ffdc71;
--yellow-dark100: #e6bf45;
--yellow-dark200: #caa73d;
--yellow-dark300: #a88b33;
--yellow-dark400: #7a6524;
--red: #f54c63;
--red-disabled: #ffefea;
--red-hover: #ff9b7a;
--red-darker: #e66e45;
--red-light100: #ffefea;
--red-light200: #ffded3;
--red-light300: #ffcbba;
--red-light400: #ffb59d;
--red-dark100: #e66e45;
--red-dark200: #ca603d;
--red-dark300: #a75032;
--red-dark400: #783924;
--pink: #ee6ea9;
--pink-disabled: #ffd8e1;
--pink-hover: #ffa5bb;
--pink-darker: #e6456d;
--pink-light100: #ffecf1;
--pink-light200: #ffd8e1;
--pink-light300: #ffc1d0;
--pink-light400: #ff4d79;
--pink-mid: #ffa5bb;
--pink-dark100: #e6456d;
--pink-dark200: #ca3d5f;
--pink-dark300: #a7324f;
--pink-dark400: #782439;
--indigo: #8c4cf5;
--indigo-disabled: #f1ecff;
--indigo-hover: #a181ff;
--indigo-darker: #6d45e5;
--fuschia: #ff82df;
--fuschia-disabled: #ffecfa;
--fuschia-hover: #ff4dd2;
--fuschia-darker: #e645bd;
--fuschia-light100: #ffecfa;
--fuschia-light200: #ffd8f5;
--fuschia-light300: #ffc0ef;
--fuschia-light400: #ffa5e8;
--fuschia-mid: #ff4dd2;
--fuschia-dark100: #e645bd;
--fuschia-dark200: #ca3da6;
--fuschia-dark300: #a7328a;
--fuschia-dark400: #782463;
--teal: #58d7b1;
--teal-disabled: #ecfffa;
--teal-hover: #80ffdf;
--teal-darker: #45e7bf;
--teal-light100: #ecfffa;
--teal-light200: #d7fff5;
--teal-light300: #bfffef;
--teal-light400: #a3ffe8;
--teal-mid: #80ffdf;
--teal-dark100: #45e7bf;
--teal-dark200: #3dcba8;
--teal-dark300: #33a98c;
--teal-dark400: #257b65;
--cyan: #51b9ca;
--cyan-disabled: #e8f9ff;
--cyan-hover: #75ddff;
--cyan-darker: #45bee6;
--cyan-light100: #e8f9ff;
--cyan-light200: #d0f3ff;
--cyan-light300: #b5ecff;
--cyan-light400: #98e5ff;
--cyan-mid: #75ddff;
--cyan-dark100: #45bee6;
--cyan-dark200: #3da7ca;
--cyan-dark300: #328ba8;
--cyan-dark400: #246479;
--primary: #8c4cf5;
--secondary: #58d7b1;
--success: #44dd7d;
--info: #409cff;
--warning: #ffd34d;
--danger: #f54c63;
--light: #e1dfe6;
--dark: #403d46;
}