feat: add HOT themed css vars

+ HOT theme CSS

src/theme/hot.css

@@ -0,0 +1,106 @@
+:root {
+  --hot-red-900: #b9302d;
+  --hot-red-800: #c93938;
+  --hot-red-700: #d63f3f;
+  --hot-red-600: #e84846;
+  --hot-red-500: #f75047;
+  --hot-red-400: #f15f5e;
+  --hot-red-300: #e67c7e;
+  --hot-red-200: #efa0a2;
+  --hot-red-100: #fed1d7;
+  --hot-red-50: #feecf0;
+  --hot-red: var(var(--hot-red-700));
+
+  --hot-darkred-900: #5b1018;
+  --hot-darkred-800: #6c2020;
+  --hot-darkred-700: #7c2e26;
+  --hot-darkred-600: #8d3a2f;
+  --hot-darkred-500: #994335;
+  --hot-darkred-400: #b15e4e;
+  --hot-darkred-300: #c87968;
+  --hot-darkred-200: #e69b8c;
+  --hot-darkred-100: #ffbead;
+  --hot-darkred-50: #ffdec8;
+  --hot-darkred: var(var(--hot-darkred-700));
+
+  --hot-gray-900: #2c3038;
+  --hot-gray-800: #3f444f;
+  --hot-gray-700: #4f5765;
+  --hot-gray-600: #606a7c;
+  --hot-gray-500: #6e798d;
+  --hot-gray-400: #848c9d;
+  --hot-gray-300: #9aa1af;
+  --hot-gray-200: #b7bcc5;
+  --hot-gray-100: #d3d7dc;
+  --hot-gray-50: #eeeef0;
+  --hot-gray: var(var(--hot-gray-900));
+
+  --hot-yellow-900: #ef7e1a;
+  --hot-yellow-800: #f4a628;
+  --hot-yellow-700: #f6bd30;
+  --hot-yellow-600: #f9d538;
+  --hot-yellow-500: #f7e53a;
+  --hot-yellow-400: #faea58;
+  --hot-yellow-300: #fcef77;
+  --hot-yellow-200: #fdf39d;
+  --hot-yellow-100: #fef8c4;
+  --hot-yellow-50: #fefde7;
+  --hot-yellow: var(var(--hot-yellow-800));
+
+  --hot-green-900: #105950;
+  --hot-green-800: #15766e;
+  --hot-green-700: #17867e;
+  --hot-green-600: #1a978f;
+  --hot-green-500: #1da49d;
+  --hot-green-400: #34b3ad;
+  --hot-green-300: #57c1bd;
+  --hot-green-200: #87d3d1;
+  --hot-green-100: #b7e4e3;
+  --hot-green-50: #e2f4f4;
+  --hot-green: var(var(--hot-green-300));
+
+  --hot-blue-900: #182642;
+  --hot-blue-800: #20365b;
+  --hot-blue-700: #263f68;
+  --hot-blue-600: #2e4873;
+  --hot-blue-500: #344f7b;
+  --hot-blue-400: #53688b;
+  --hot-blue-300: #71829e;
+  --hot-blue-200: #97a5ba;
+  --hot-blue-100: #bfc8d6;
+  --hot-blue-50: #e6e9ee;
+  --hot-blue: var(var(--hot-blue-800));
+
+  --hot-white: #ffffff;
+  --hot-black: #000000;
+
+  --hot-primary: var(--hot-red);
+  --hot-primary-light: var(--hot-red-200);
+  --hot-primary-dark: var(--hot-red-900);
+  --hot-primary-contrastText: var(--hot-white);
+
+  --hot-secondary: var(--hot-gray);
+  --hot-secondary-light: var(--hot-gray-200);
+  --hot-secondary-dark: var(--hot-black);
+  --hot-secondary-contrastText: var(--hot-white);
+
+  --hot-info: var(--hot-blue);
+  --hot-info-light: var(--hot-blue-300);
+  --hot-info-dark: var(--hot-gray-900);
+  --hot-secondary-contrastText: var(--hot-white);
+
+  --hot-error: var(--hot-darkred);
+  --hot-error-light: var(--hot-darkred-400);
+  --hot-error-dark: var(--hot-darkred-900);
+  --hot-error-contrastText: var(--hot-white);
+
+  --hot-warning: var(--hot-yellow-600);
+  --hot-warning-light: var(--hot-yellow-400);
+  --hot-warning-dark: var(--hot-yellow-900);
+  --hot-warning-contrastText: var(--hot-white);
+
+  --hot-success: var(--hot-green);
+  --hot-success-light: var(--hot-green-100);
+  --hot-success-dark: var(--hot-green-600);
+  --hot-success-contrastText: var(--hot-white);
+}