mainstack-design-system 1.0.0 → 1.1.2

package/dist/assets/theme/tokenTheme.css

@@ -0,0 +1,1072 @@
+/*
+---------------------------------NOTE:------------------------------------
+* This file defines the **core design tokens** for the entire system.
+* The main ideal is that token defined here are never meant to be overriden.
+* This file is only to define the design-system color palette and other design tokens like spacing, fonts, easings etc.
+* These tokens are then used to create themes that can be applied via `uiTheme` and `lightDarkModes`
+* NOTE: Colors defined here should not be used to style your element directly unless in some extreme edge cases, you should style your elements with theme-based-colors colors defined in `uiTheme` and `lightDarkModeTheme`.
+
+
+/**
+------------------------------------------------------------------------
+
+
+Enable styling in tailwind based on design-system current theme value.
+E.g: public:p-20 will apply padding 20px when data-ui-theme="public in html root tag"
+**/
+@custom-variant dark (&:where([data-theme-mode="dark"], [data-theme-mode="dark"] *));
+@custom-variant public (&:where([data-ui-theme="public"], [data-ui-theme="public"] *));
+
+/* Safelist */
+@source inline("w-[{20..92..4}px]");
+@source inline("h-[{20..92..4}px]");
+
+@theme static {
+  /*custom ease overrides for css defaults*/
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --ease-out-pressed: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Custom Font Family */
+  --font-degular: "Degular", sans-serif;
+  --font-suisse-intl: "Suisse-Intl", sans-serif;
+
+  /* Custom Font Weight */
+  --font-weight-*: initial;
+  --font-weight-black: 800;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-book: 450;
+  --font-weight-regular: 400;
+
+  /* Custom spacing */
+  --spacing: 0.0625rem;
+
+  /*Custom color Palette*/
+  --color-*: initial;
+  /* override tailwind palette */
+  /* Neutral Colors */
+  --color-neutral-500: #040506;
+  --color-neutral-475: #090a0c;
+  --color-neutral-450: #0d0e12;
+  --color-neutral-425: #111318;
+  --color-neutral-400: #16181d;
+  --color-neutral-375: #1f2228;
+  --color-neutral-350: #363b45;
+  --color-neutral-325: #484e5b;
+  --color-neutral-300: #6c7689;
+  --color-neutral-275: #a4aab7;
+  --color-neutral-250: #afb5c0;
+  --color-neutral-225: #bcc0c8;
+  --color-neutral-200: #cdd0d6;
+  --color-neutral-175: #dddfe3;
+  --color-neutral-150: #eeeff1;
+  --color-neutral-125: #f4f4f6;
+  --color-neutral-100: #f9fafa;
+  --color-neutral-75: #fcfcfd;
+  --color-neutral-50: #ffffff;
+
+  /* Red Colors */
+  --color-red-500: #170303;
+  --color-red-475: #2e0505;
+  --color-red-450: #450808;
+  --color-red-425: #5c0a0a;
+  --color-red-400: #730d0d;
+  --color-red-375: #8a0f0f;
+  --color-red-350: #a11212;
+  --color-red-325: #b81414;
+  --color-red-300: #cf1717;
+  --color-red-275: #e51919;
+  --color-red-250: #e83030;
+  --color-red-225: #eb4747;
+  --color-red-200: #ed5e5e;
+  --color-red-175: #f07575;
+  --color-red-150: #f28c8c;
+  --color-red-125: #f5a3a3;
+  --color-red-100: #f7baba;
+  --color-red-75: #fad1d1;
+  --color-red-50: #fce8e8;
+
+  /* Muted Red Colors */
+  --color-muted-red-500: #120c08;
+  --color-muted-red-475: #240f0f;
+  --color-muted-red-450: #361717;
+  --color-muted-red-425: #471f1f;
+  --color-muted-red-400: #592626;
+  --color-muted-red-375: #6b2e2e;
+  --color-muted-red-350: #7d3636;
+  --color-muted-red-325: #8f3d3d;
+  --color-muted-red-300: #a14545;
+  --color-muted-red-275: #b34c4c;
+  --color-muted-red-250: #ba5e5e;
+  --color-muted-red-225: #c27070;
+  --color-muted-red-200: #c98282;
+  --color-muted-red-175: #d19494;
+  --color-muted-red-150: #d9a6a6;
+  --color-muted-red-125: #e0b8b8;
+  --color-muted-red-100: #e8c9c9;
+  --color-muted-red-75: #f0dbdb;
+  --color-muted-red-50: #f7eded;
+
+  /* Persimmon Colors */
+  --color-persimmon-500: #180701;
+  --color-persimmon-475: #300e03;
+  --color-persimmon-450: #491504;
+  --color-persimmon-425: #611c05;
+  --color-persimmon-400: #792306;
+  --color-persimmon-375: #912a08;
+  --color-persimmon-350: #aa3109;
+  --color-persimmon-325: #c2380a;
+  --color-persimmon-300: #da3f0b;
+  --color-persimmon-275: #f2460d;
+  --color-persimmon-250: #f45925;
+  --color-persimmon-225: #f5683d;
+  --color-persimmon-200: #f67e55;
+  --color-persimmon-175: #f7906e;
+  --color-persimmon-150: #f9a386;
+  --color-persimmon-125: #fab59e;
+  --color-persimmon-100: #fbc8b6;
+  --color-persimmon-75: #fcdacf;
+  --color-persimmon-50: #feede7;
+
+  /* Muted Persimmon Colors */
+  --color-muted-persimmon-500: #120808;
+  --color-muted-persimmon-475: #240f0f;
+  --color-muted-persimmon-450: #361717;
+  --color-muted-persimmon-425: #471f1f;
+  --color-muted-persimmon-400: #592626;
+  --color-muted-persimmon-375: #6b2e2e;
+  --color-muted-persimmon-350: #7d3636;
+  --color-muted-persimmon-325: #8f3d3d;
+  --color-muted-persimmon-300: #a14545;
+  --color-muted-persimmon-275: #b24d4d;
+  --color-muted-persimmon-250: #ba5e5e;
+  --color-muted-persimmon-225: #c27070;
+  --color-muted-persimmon-200: #c98282;
+  --color-muted-persimmon-175: #d19494;
+  --color-muted-persimmon-150: #d9a6a6;
+  --color-muted-persimmon-125: #e0b8b8;
+  --color-muted-persimmon-100: #e8c9c9;
+  --color-muted-persimmon-75: #f0dbdb;
+  --color-muted-persimmon-50: #f7eded;
+
+  /* Orange Colors */
+  --color-orange-500: #180d01;
+  --color-orange-475: #301a03;
+  --color-orange-450: #492604;
+  --color-orange-425: #613305;
+  --color-orange-400: #794006;
+  --color-orange-375: #914c08;
+  --color-orange-350: #aa5909;
+  --color-orange-325: #c2660a;
+  --color-orange-300: #da730b;
+  --color-orange-275: #f2800d;
+  --color-orange-250: #f48c25;
+  --color-orange-225: #f5993d;
+  --color-orange-200: #f6a655;
+  --color-orange-175: #f7b36e;
+  --color-orange-150: #f9bf86;
+  --color-orange-125: #facc9e;
+  --color-orange-100: #fbd9b6;
+  --color-orange-75: #fce6cf;
+  --color-orange-50: #fef2e7;
+
+  /* Muted Orange Colors */
+  --color-muted-orange-500: #120d08;
+  --color-muted-orange-475: #241a0f;
+  --color-muted-orange-450: #362617;
+  --color-muted-orange-425: #47331f;
+  --color-muted-orange-400: #594026;
+  --color-muted-orange-375: #6B4C2;
+  --color-muted-orange-350: #7d5936;
+  --color-muted-orange-325: #8f663d;
+  --color-muted-orange-300: #a17345;
+  --color-muted-orange-275: #b2804d;
+  --color-muted-orange-250: #ba8c5e;
+  --color-muted-orange-225: #c29970;
+  --color-muted-orange-200: #c9a682;
+  --color-muted-orange-175: #d1b394;
+  --color-muted-orange-150: #d9bfa6;
+  --color-muted-orange-125: #e0ccb8;
+  --color-muted-orange-100: #e8d9c9;
+  --color-muted-orange-75: #f0e6db;
+  --color-muted-orange-50: #f7f2ed;
+
+  /* Lemon Colors */
+  --color-lemon-500: #181401;
+  --color-lemon-475: #302903;
+  --color-lemon-450: #493d04;
+  --color-lemon-425: #615205;
+  --color-lemon-400: #796606;
+  --color-lemon-375: #917a08;
+  --color-lemon-350: #aa8f09;
+  --color-lemon-325: #c2a30a;
+  --color-lemon-300: #dab80b;
+  --color-lemon-275: #f2cc0d;
+  --color-lemon-250: #f4d125;
+  --color-lemon-225: #f5d63d;
+  --color-lemon-200: #f6db55;
+  --color-lemon-175: #f7e06e;
+  --color-lemon-150: #f9e586;
+  --color-lemon-125: #faeb9e;
+  --color-lemon-100: #fbf0b6;
+  --color-lemon-75: #fcf5cf;
+  --color-lemon-50: #fefae7;
+
+  /* Muted Lemon Colors */
+  --color-muted-lemon-500: #0d0c07;
+  --color-muted-lemon-475: #1b180e;
+  --color-muted-lemon-450: #282515;
+  --color-muted-lemon-425: #3c3720;
+  --color-muted-lemon-400: #50492b;
+  --color-muted-lemon-375: #5d5632;
+  --color-muted-lemon-350: #857a47;
+  --color-muted-lemon-325: #a99d60;
+  --color-muted-lemon-300: #c2b470;
+  --color-muted-lemon-275: #cec38d;
+  --color-muted-lemon-250: #d4cb9b;
+  --color-muted-lemon-225: #ddd6b0;
+  --color-muted-lemon-200: #e3ddbf;
+  --color-muted-lemon-175: #eae4cd;
+  --color-muted-lemon-150: #f2eed9;
+  --color-muted-lemon-125: #f7f3de;
+  --color-muted-lemon-100: #f9f6e7;
+  --color-muted-lemon-75: #fbf9ef;
+  --color-muted-lemon-50: #fdfcf7;
+
+  /* Dandelion Colors */
+  --color-dandelion-500: #181801;
+  --color-dandelion-475: #303003;
+  --color-dandelion-450: #494904;
+  --color-dandelion-425: #616105;
+  --color-dandelion-400: #797906;
+  --color-dandelion-375: #919108;
+  --color-dandelion-350: #aaaa09;
+  --color-dandelion-325: #c2c20a;
+  --color-dandelion-300: #dada0b;
+  --color-dandelion-275: #f2f20d;
+  --color-dandelion-250: #f4f425;
+  --color-dandelion-225: #f5f53d;
+  --color-dandelion-200: #f6f655;
+  --color-dandelion-175: #f7f76e;
+  --color-dandelion-150: #f9f986;
+  --color-dandelion-125: #fafa9e;
+  --color-dandelion-100: #fbfbb6;
+  --color-dandelion-75: #fcfccf;
+  --color-dandelion-50: #fefee7;
+
+  /* Muted Dandelion Colors */
+  --color-muted-dandelion-500: #0c0d07;
+  --color-muted-dandelion-475: #181b0e;
+  --color-muted-dandelion-450: #252815;
+  --color-muted-dandelion-425: #373c20;
+  --color-muted-dandelion-400: #49502b;
+  --color-muted-dandelion-375: #565d32;
+  --color-muted-dandelion-350: #7a8547;
+  --color-muted-dandelion-325: #9da960;
+  --color-muted-dandelion-300: #b4c270;
+  --color-muted-dandelion-275: #c3ce8d;
+  --color-muted-dandelion-250: #cbd49b;
+  --color-muted-dandelion-225: #d6ddb0;
+  --color-muted-dandelion-200: #dde3bf;
+  --color-muted-dandelion-175: #e5eacd;
+  --color-muted-dandelion-150: #eef2d9;
+  --color-muted-dandelion-125: #f3f7de;
+  --color-muted-dandelion-100: #f6f9e7;
+  --color-muted-dandelion-75: #f9fbef;
+  --color-muted-dandelion-50: #fcfdf7;
+
+  /* Lime Colors */
+  --color-lime-500: #0f1801;
+  --color-lime-475: #213003;
+  --color-lime-450: #2b3617;
+  --color-lime-425: #426105;
+  --color-lime-400: #537906;
+  --color-lime-375: #639108;
+  --color-lime-350: #74aa09;
+  --color-lime-325: #85c20a;
+  --color-lime-300: #95da0b;
+  --color-lime-275: #a6f20d;
+  --color-lime-250: #aff425;
+  --color-lime-225: #b8f53d;
+  --color-lime-200: #c1f655;
+  --color-lime-175: #c9f76e;
+  --color-lime-150: #d2f986;
+  --color-lime-125: #dbfa9e;
+  --color-lime-100: #e4fbb6;
+  --color-lime-75: #edfccf;
+  --color-lime-50: #edfccf;
+
+  /* Muted Lime Colors */
+  --color-muted-lime-500: #0c0d07;
+  --color-muted-lime-475: #171b0e;
+  --color-muted-lime-450: #232815;
+  --color-muted-lime-425: #343c20;
+  --color-muted-lime-400: #46502b;
+  --color-muted-lime-375: #515d32;
+  --color-muted-lime-350: #748547;
+  --color-muted-lime-325: #96a960;
+  --color-muted-lime-300: #acc270;
+  --color-muted-lime-275: #bdce8d;
+  --color-muted-lime-250: #c5d49b;
+  --color-muted-lime-225: #d1ddb0;
+  --color-muted-lime-200: #dae3bf;
+  --color-muted-lime-175: #e2eacd;
+  --color-muted-lime-150: #ebf2d9;
+  --color-muted-lime-125: #f0f7de;
+  --color-muted-lime-100: #f4f9e7;
+  --color-muted-lime-75: #f8fbef;
+  --color-muted-lime-50: #fbfdf7;
+
+  /* Green Colors */
+  --color-green-500: #091703;
+  --color-green-475: #132e05;
+  --color-green-450: #1c4508;
+  --color-green-425: #255c0a;
+  --color-green-400: #2f730d;
+  --color-green-375: #388a0f;
+  --color-green-350: #41a112;
+  --color-green-325: #4bb814;
+  --color-green-300: #54cf17;
+  --color-green-275: #5ee51a;
+  --color-green-250: #6ee830;
+  --color-green-225: #7eeb47;
+  --color-green-200: #8eed5e;
+  --color-green-175: #9ef075;
+  --color-green-150: #aef28c;
+  --color-green-125: #bef5a3;
+  --color-green-100: #cff7ba;
+  --color-green-75: #dffad1;
+  --color-green-50: #effce8;
+
+  /* Muted Green Colors */
+  --color-muted-green-500: #070d0a;
+  --color-muted-green-475: #0e1b14;
+  --color-muted-green-450: #15281f;
+  --color-muted-green-425: #203c2e;
+  --color-muted-green-400: #2b503d;
+  --color-muted-green-375: #325d47;
+  --color-muted-green-350: #478566;
+  --color-muted-green-325: #60a985;
+  --color-muted-green-300: #70c299;
+  --color-muted-green-275: #8dcead;
+  --color-muted-green-250: #9bd4b8;
+  --color-muted-green-225: #b0ddc7;
+  --color-muted-green-200: #bfe3d1;
+  --color-muted-green-175: #cdeadb;
+  --color-muted-green-150: #d9f2e5;
+  --color-muted-green-125: #def7eb;
+  --color-muted-green-100: #e7f9f0;
+  --color-muted-green-75: #effbf5;
+  --color-muted-green-50: #f7fdfa;
+
+  /* Malachite Colors */
+  --color-malachite-500: #03170b;
+  --color-malachite-475: #052e16;
+  --color-malachite-450: #084521;
+  --color-malachite-425: #0a5c2c;
+  --color-malachite-400: #0d7337;
+  --color-malachite-375: #0f8a42;
+  --color-malachite-350: #12a14d;
+  --color-malachite-325: #14b858;
+  --Color-malachite-300: #17cf63;
+  --color-malachite-275: #1ae56f;
+  --color-malachite-250: #30e87d;
+  --color-malachite-225: #47eb8b;
+  --color-malachite-200: #5eed9a;
+  --color-malachite-175: #75f0a8;
+  --color-malachite-150: #8cf2b7;
+  --color-malachite-125: #a3f5c5;
+  --color-malachite-100: #baf7d4;
+  --color-malachite-75: #d1fae2;
+  --color-malachite-50: #e8fcf1;
+
+  /* Muted Malachite Colors */
+  --color-muted-malachite-500: #08120c;
+  --color-muted-malachite-475: #0f2418;
+  --color-muted-malachite-450: #173624;
+  --color-muted-malachite-425: #1f4730;
+  --color-muted-malachite-400: #26593b;
+  --color-muted-malachite-375: #2e6b47;
+  --color-muted-malachite-350: #367d53;
+  --color-muted-malachite-325: #3d8f5f;
+  --color-muted-malachite-300: #45a16b;
+  --color-muted-malachite-275: #4cb377;
+  --color-muted-malachite-250: #5eba85;
+  --color-muted-malachite-225: #70c292;
+  --color-muted-malachite-200: #82c9a0;
+  --color-muted-malachite-175: #94d1ad;
+  --color-muted-malachite-150: #a6d9bb;
+  --color-muted-malachite-125: #b8e0c9;
+  --color-muted-malachite-100: #c9e8d6;
+  --color-muted-malachite-75: #dbf0e4;
+  --color-muted-malachite-50: #edf7f1;
+
+  /* Mintwave Colors */
+  --color-mintwave-500: #031710ff;
+  --color-mintwave-475: #052e20ff;
+  --color-mintwave-450: #084530ff;
+  --color-mintwave-425: #0a5c41ff;
+  --color-mintwave-400: #0d7351ff;
+  --color-mintwave-375: #0f8a61ff;
+  --color-mintwave-350: #12a171ff;
+  --color-mintwave-325: #14b881ff;
+  --color-mintwave-300: #17cf91ff;
+  --color-mintwave-275: #1ae5a1ff;
+  --color-mintwave-250: #30e8abff;
+  --color-mintwave-225: #47ebb4ff;
+  --color-mintwave-200: #5eedbeff;
+  --color-mintwave-175: #75f0c7ff;
+  --color-mintwave-150: #8cf2d0ff;
+  --color-mintwave-125: #a3f5daff;
+  --color-mintwave-100: #baf7e3ff;
+  --color-mintwave-75: #d1faecff;
+  --color-mintmave-50: #e8fcf6;
+
+  /* Muted Mintwave Colors */
+  --color-muted-mintwave-500: #08120e;
+  --color-muted-mintwave-475: #0f241d;
+  --color-muted-mintwave-450: #17362b;
+  --color-muted-mintwave-425: #1f473a;
+  --color-muted-mintwave-400: #265948;
+  --color-muted-mintwave-375: #2e6b57;
+  --color-muted-mintwave-350: #367d65;
+  --color-muted-mintwave-325: #3d8f74;
+  --color-muted-mintwave-300: #45a182;
+  --color-muted-mintwave-275: #4cb390;
+  --color-muted-mintwave-250: #5eba9c;
+  --color-muted-mintwave-225: #70c2a7;
+  --color-muted-mintwave-200: #82c9b2;
+  --color-muted-mintwave-175: #94d1bd;
+  --color-muted-mintwave-150: #a6d9c8;
+  --color-muted-mintwave-125: #b8e0d3;
+  --color-muted-mintwave-100: #c9e8de;
+  --color-muted-mintwave-50: #edf7f4;
+
+  /* Teal Colors */
+  --color-teal-500: #031715;
+  --color-teal-475: #052e2a;
+  --color-teal-450: #084540;
+  --color-teal-425: #0a5c55;
+  --color-teal-400: #0d736a;
+  --color-teal-375: #0f8a7f;
+  --color-teal-350: #12a195;
+  --color-teal-325: #14b8aa;
+  --color-teal-300: #17cfbf;
+  --color-teal-275: #1ae5d4;
+  --color-teal-250: #30e8d9;
+  --color-teal-225: #47ebdd;
+  --color-teal-200: #5eede1;
+  --color-teal-175: #75f0e5;
+  --color-teal-150: #8cf2ea;
+  --color-teal-125: #a3f5ee;
+  --color-teal-100: #baf7f2;
+  --color-teal-75: #d1faf6;
+  --color-teal-50: #e8fcfb;
+
+  /* Muted Teal Colors */
+  --color-muted-teal-500: #091110;
+  --color-muted-teal-475: #122120;
+  --color-muted-teal-450: #1b3230;
+  --color-muted-teal-425: #244240;
+  --color-muted-teal-400: #2d5350;
+  --color-muted-teal-375: #356460;
+  --color-muted-teal-350: #3e7470;
+  --color-muted-teal-325: #478580;
+  --color-muted-teal-300: #509590;
+  --color-muted-teal-275: #59a6a0;
+  --color-muted-teal-250: #69afa9;
+  --color-muted-teal-225: #7ab8b3;
+  --color-muted-teal-200: #8bc1bc;
+  --color-muted-teal-175: #9cc9c6;
+  --color-muted-teal-150: #acd2cf;
+  --color-muted-teal-125: #bddbd9;
+  --color-muted-teal-100: #cde4e2;
+  --color-muted-teal-75: #deedec;
+  --color-muted-teal-50: #eef6f5;
+
+  /* Azure Colors */
+  --color-azure-500: #011418;
+  --color-azure-475: #032930;
+  --color-azure-450: #043d49;
+  --color-azure-425: #055261;
+  --color-azure-400: #076679;
+  --color-azure-375: #087b91;
+  --color-azure-350: #098faa;
+  --color-azure-325: #0aa4c2;
+  --color-azure-300: #0bb8da;
+  --color-azure-275: #0dccf2;
+  --color-azure-250: #25d1f4;
+  --color-azure-225: #3ed6f4;
+  --color-azure-200: #56dbf6;
+  --color-azure-175: #6ee0f7;
+  --color-azure-150: #86e6f8;
+  --color-azure-125: #9eebfa;
+  --color-azure-100: #b6f0fb;
+  --color-azure-75: #cff5fc;
+  --color-azure-50: #e7fafe;
+
+  /* Muted Azure Colors */
+  --color-muted-azure-500: #081012;
+  --color-muted-azure-475: #0f2024;
+  --color-muted-azure-450: #173036;
+  --color-muted-azure-425: #1f4147;
+  --color-muted-azure-400: #265159;
+  --color-muted-azure-375: #2e616b;
+  --color-muted-azure-350: #36717d;
+  --color-muted-azure-325: #3d828f;
+  --color-muted-azure-300: #4492a1;
+  --color-muted-azure-275: #4ca2b3;
+  --color-muted-azure-250: #5eabba;
+  --color-muted-azure-225: #70b4c2;
+  --color-muted-azure-200: #82beca;
+  --color-muted-azure-175: #94c7d1;
+  --color-muted-azure-150: #a6d0d9;
+  --color-muted-azure-125: #b8dae0;
+  --color-muted-azure-100: #c9e3e8;
+  --color-muted-azure-75: #dbecf0;
+  --color-muted-azure-50: #edf6f7;
+
+  /* Blue Colors */
+  --color-blue-500: #010d18;
+  --color-blue-475: #031a30;
+  --color-blue-450: #042649;
+  --color-blue-425: #053361;
+  --color-blue-400: #074079;
+  --color-blue-375: #084d91;
+  --color-blue-350: #0a58a9;
+  --color-blue-325: #0b65c1;
+  --color-blue-300: #0c72da;
+  --color-blue-275: #0d7ff2;
+  --color-blue-250: #258cf3;
+  --color-blue-225: #3d98f5;
+  --color-blue-200: #55a5f6;
+  --color-blue-175: #6db2f8;
+  --color-blue-150: #86bff9;
+  --color-blue-125: #9eccfa;
+  --color-blue-100: #b6d9fb;
+  --color-blue-75: #cfe6fc;
+  --color-blue-50: #e5f2ff;
+
+  /* Muted Blue Colors */
+  --color-muted-blue-500: #090d11;
+  --color-muted-blue-475: #121a21;
+  --color-muted-blue-450: #1b2632;
+  --color-muted-blue-425: #243342;
+  --color-muted-blue-400: #2d4053;
+  --color-muted-blue-375: #354c64;
+  --color-muted-blue-350: #3e5974;
+  --color-muted-blue-325: #476685;
+  --color-muted-blue-300: #507395;
+  --color-muted-blue-275: #5980a6;
+  --color-muted-blue-250: #6a8caf;
+  --color-muted-blue-225: #7b99b7;
+  --color-muted-blue-200: #8ba6c0;
+  --color-muted-blue-175: #9cb2c9;
+  --color-muted-blue-150: #acbfd2;
+  --color-muted-blue-125: #bdccdb;
+  --color-muted-blue-100: #cdd9e4;
+  --color-muted-blue-75: #dee5ed;
+  --color-muted-blue-50: #eef2f6;
+
+  /* Cobalt Colors */
+  --color-cobalt-500: #010518;
+  --color-cobalt-475: #030a30;
+  --color-cobalt-450: #040f49;
+  --color-cobalt-425: #051461;
+  --color-cobalt-400: #071a79;
+  --color-cobalt-375: #081f91;
+  --color-cobalt-350: #0a24a9;
+  --color-cobalt-325: #0b29c1;
+  --color-cobalt-300: #0c2eda;
+  --color-cobalt-275: #0d33f2;
+  --color-cobalt-250: #2547f3;
+  --color-cobalt-225: #3d5cf5;
+  --color-cobalt-200: #5570f6;
+  --color-cobalt-175: #6d84f8;
+  --color-cobalt-150: #8699f9;
+  --color-cobalt-125: #9eadfa;
+  --color-cobalt-100: #b6c2fb;
+  --color-cobalt-75: #cfd6fc;
+  --color-cobalt-50: #e5eaff;
+
+  /* Muted Cobalt Colors */
+  --color-muted-cobalt-500: #090a11;
+  --color-muted-cobalt-475: #121421;
+  --color-muted-cobalt-450: #1b1f32;
+  --color-muted-cobalt-425: #242942;
+  --color-muted-cobalt-400: #2d3353;
+  --color-muted-cobalt-375: #2c3353;
+  --color-muted-cobalt-350: #3e4774;
+  --color-muted-cobalt-325: #475285;
+  --color-muted-cobalt-300: #505c95;
+  --color-muted-cobalt-275: #5966a6;
+  --color-muted-cobalt-250: #6a75af;
+  --color-muted-cobalt-225: #7b85b7;
+  --color-muted-cobalt-200: #8b94c0;
+  --color-muted-cobalt-175: #9ca3c9;
+  --color-muted-cobalt-150: #acb3d2;
+  --color-muted-cobalt-125: #bdc2db;
+  --color-muted-cobalt-100: #cdd1e4;
+  --color-muted-cobalt-75: #dee0ed;
+  --color-muted-cobalt-50: #eef0f6;
+
+  /* Indigo Colors */
+  --color-indigo-500: #070118;
+  --color-indigo-475: #0e0330;
+  --color-indigo-450: #150449;
+  --color-indigo-425: #1c0561;
+  --color-indigo-400: #230779;
+  --color-indigo-375: #2a0891;
+  --color-indigo-350: #3209aa;
+  --color-indigo-325: #390ac2;
+  --color-indigo-300: #400bda;
+  --color-indigo-275: #470df2;
+  --color-indigo-250: #5925f4;
+  --color-indigo-225: #6c3ef4;
+  --color-indigo-200: #7f56f6;
+  --color-indigo-175: #916ef7;
+  --color-indigo-150: #a386f8;
+  --color-indigo-125: #b59efa;
+  --color-indigo-100: #c8b6fb;
+  --color-indigo-75: #dacffc;
+  --color-indigo-50: #ede7fe;
+
+  /* Muted Indigo Colors */
+  --color-muted-indigo-500: #0a0812;
+  --color-muted-indigo-475: #140f24;
+  --color-muted-indigo-450: #1f1736;
+  --color-muted-indigo-425: #291f47;
+  --color-muted-indigo-400: #332659;
+  --color-muted-indigo-375: #3e2e6b;
+  --color-muted-indigo-350: #48367d;
+  --color-muted-indigo-325: #523d8f;
+  --color-muted-indigo-300: #5c44a1;
+  --color-muted-indigo-275: #664cb3;
+  --color-muted-indigo-250: #755eba;
+  --color-muted-indigo-225: #8570c2;
+  --color-muted-indigo-200: #9482c9;
+  --color-muted-indigo-175: #a394d1;
+  --color-muted-indigo-150: #b2a6d9;
+  --color-muted-indigo-125: #c2b8e0;
+  --color-muted-indigo-100: #d1c9e8;
+  --color-muted-indigo-75: #e0dbf0;
+  --color-muted-indigo-50: #f0edf7;
+
+  /* Purple Colors */
+  --color-purple-500: #0d0118;
+  --color-purple-475: #1a0330;
+  --color-purple-450: #260449;
+  --color-purple-425: #330561;
+  --color-purple-400: #400779;
+  --color-purple-375: #4d0891;
+  --color-purple-350: #5809aa;
+  --color-purple-325: #650bc1;
+  --color-purple-300: #720cda;
+  --color-purple-275: #7f0df2;
+  --color-purple-250: #8c25f3;
+  --color-purple-225: #983df5;
+  --color-purple-200: #a555f6;
+  --color-purple-175: #b26df8;
+  --color-purple-150: #bf86f9;
+  --color-purple-125: #cd9efa;
+  --color-purple-100: #d9b6fb;
+  --color-purple-75: #e6cffc;
+  --color-purple-50: #f2e7fe;
+
+  /* Muted Purple Colors */
+  --color-muted-purple-500: #0d0812;
+  --color-muted-purple-475: #1a0f24;
+  --color-muted-purple-450: #261736;
+  --color-muted-purple-425: #331f47;
+  --color-muted-purple-400: #402659;
+  --color-muted-purple-375: #4d2e6b;
+  --color-muted-purple-350: #5a367d;
+  --color-muted-purple-325: #663d8f;
+  --color-muted-purple-300: #7344a1;
+  --color-muted-purple-275: #804cb3;
+  --color-muted-purple-250: #8c5eba;
+  --color-muted-purple-225: #9870c2;
+  --color-muted-purple-200: #a582c9;
+  --color-muted-purple-175: #b294d1;
+  --color-muted-purple-150: #bfa6d9;
+  --color-muted-purple-125: #ccb8e0;
+  --color-muted-purple-100: #d9c9e8;
+  --color-muted-purple-75: #e5dbf0;
+  --color-muted-purple-50: #f2edf7;
+
+  /* Mulberry Colors */
+  --color-mulberry-500: #120118;
+  --color-mulberry-475: #250330;
+  --color-mulberry-450: #370449;
+  --color-mulberry-425: #4a0561;
+  --color-mulberry-400: #5c0779;
+  --color-mulberry-375: #6f0891;
+  --color-mulberry-350: #8109aa;
+  --color-mulberry-325: #940bc1;
+  --color-mulberry-300: #a60cda;
+  --color-mulberry-275: #b90df2;
+  --color-mulberry-250: #c025f3;
+  --color-mulberry-225: #c73df5;
+  --color-mulberry-200: #ce55f6;
+  --color-mulberry-175: #d56df8;
+  --color-mulberry-150: #dc86f9;
+  --color-mulberry-125: #e39efa;
+  --color-mulberry-100: #eab6fb;
+  --color-mulberry-75: #f1cffc;
+  --color-mulberry-50: #f8e7fe;
+
+  /* Muted Mulberry Colors */
+  --color-muted-mulberry-500: #0f0812;
+  --color-muted-mulberry-475: #1f0f24;
+  --color-muted-mulberry-450: #2e1736;
+  --color-muted-mulberry-425: #3d1f47;
+  --color-muted-mulberry-400: #4c2659;
+  --color-muted-mulberry-375: #5c2e6b;
+  --color-muted-mulberry-350: #6b367d;
+  --color-muted-mulberry-325: #7a3d8f;
+  --color-muted-mulberry-300: #8a44a1;
+  --color-muted-mulberry-275: #994cb3;
+  --color-muted-mulberry-250: #a35eba;
+  --color-muted-mulberry-225: #ad70c2;
+  --color-muted-mulberry-200: #b882c9;
+  --color-muted-mulberry-175: #c294d1;
+  --color-muted-mulberry-150: #cca6d9;
+  --color-muted-mulberry-125: #d6b8e0;
+  --color-muted-mulberry-100: #e0c9e8;
+  --color-muted-mulberry-75: #ebdbf0;
+  --color-muted-mulberry-50: #f5edf7;
+
+  /* Fuschia Colors */
+  --color-fuchsia-500: #180118ff;
+  --color-fuchsia-475: #300330ff;
+  --color-fuchsia-450: #490449ff;
+  --color-fuchsia-425: #610561ff;
+  --color-fuchsia-400: #790779ff;
+  --color-fuchsia-375: #910891ff;
+  --color-fuchsia-350: #aa09aaff;
+  --color-fuchsia-325: #c20ac2ff;
+  --color-fuchsia-300: #da0bdaff;
+  --color-fuchsia-275: #f20df2ff;
+  --color-fuchsia-250: #f425f4ff;
+  --color-fuchsia-225: #f43ef4ff;
+  --color-fuchsia-200: #f656f6ff;
+  --color-fuchsia-175: #f76ef7ff;
+  --color-fuchsia-150: #f886f8ff;
+  --color-fuchsia-125: #fa9efaff;
+  --color-fuchsia-100: #fbb6fbff;
+  --color-fuchsia-75: #fccffcff;
+  --color-fuchsia-50: #fee7feff;
+
+  /* Muted Fuschia Colors  */
+  --color-muted-fuchsia-500: #120812;
+  --color-muted-fuchsia-475: #240f24;
+  --color-muted-fuchsia-450: #361736;
+  --color-muted-fuchsia-425: #471f47;
+  --color-muted-fuchsia-400: #592659;
+  --color-muted-fuchsia-375: #6b2e6b;
+  --color-muted-fuchsia-350: #7d367d;
+  --color-muted-fuchsia-325: #8f3d8f;
+  --color-muted-fuchsia-300: #a144a1;
+  --color-muted-fuchsia-275: #b34cb3;
+  --color-muted-fuchsia-250: #ba5eba;
+  --color-muted-fuchsia-225: #c270c2;
+  --color-muted-fuchsia-200: #c982c9;
+  --color-muted-fuchsia-175: #d194d1;
+  --color-muted-fuchsia-150: #d9a6d9;
+  --color-muted-fuchsia-125: #e0b8e0;
+  --color-muted-fuchsia-100: #e8c9e8;
+  --color-muted-fuchsia-75: #f0dbf0;
+  --color-muted-fuchsia-50: #f7edf7;
+
+  /* Pink Colors  */
+  --color-pink-500: #18010d;
+  --color-pink-475: #30031a;
+  --color-pink-450: #490426;
+  --color-pink-425: #610533;
+  --color-pink-400: #790740;
+  --color-pink-375: #91084d;
+  --color-pink-350: #aa0958;
+  --color-pink-325: #c10b65;
+  --color-pink-300: #da0c72;
+  --color-pink-275: #f20d7f;
+  --color-pink-250: #f3258c;
+  --color-pink-225: #f53d98;
+  --color-pink-200: #f655a5;
+  --color-pink-175: #f86db2;
+  --color-pink-150: #f986bf;
+  --color-pink-125: #fa9ecd;
+  --color-pink-100: #fbb6d9;
+  --color-pink-75: #fccfe6;
+  --color-pink-50: #fee7f2;
+
+  /* Muted Pink Colors */
+  --color-muted-pink-500: #12080d;
+  --color-muted-pink-475: #240f1a;
+  --color-muted-pink-450: #361726;
+  --color-muted-pink-425: #471f33;
+  --color-muted-pink-400: #59263f;
+  --color-muted-pink-375: #6b2e4c;
+  --color-muted-pink-350: #7d3659;
+  --color-muted-pink-325: #8f3d66;
+  --color-muted-pink-300: #a14472;
+  --color-muted-pink-275: #b34c7f;
+  --color-muted-pink-250: #ba5e8c;
+  --color-muted-pink-225: #c27099;
+  --color-muted-pink-200: #ca82a6;
+  --color-muted-pink-175: #d194b2;
+  --color-muted-pink-150: #d9a6bf;
+  --color-muted-pink-125: #e0b8cc;
+  --color-muted-pink-100: #e8c9d9;
+  --color-muted-pink-75: #f0dbe5;
+  --color-muted-pink-50: #f7edf2;
+
+  /* Crimson Colors */
+  --Color-Crimson-Crimson-500: #180107;
+  --Color-Crimson-Crimson-475: #30030e;
+  --Color-Crimson-Crimson-450: #490415;
+  --Color-Crimson-Crimson-425: #61051c;
+  --Color-Crimson-Crimson-400: #790723;
+  --Color-Crimson-Crimson-375: #91082a;
+  --Color-Crimson-Crimson-350: #aa0932;
+  --Color-Crimson-Crimson-325: #c20a39;
+  --Color-Crimson-Crimson-300: #da0b40;
+  --Color-Crimson-Crimson-275: #f20d47;
+  --Color-Crimson-Crimson-250: #f42559;
+  --Color-Crimson-Crimson-225: #f43e6c;
+  --Color-Crimson-Crimson-200: #f6567f;
+  --Color-Crimson-Crimson-175: #f76e91;
+  --Color-Crimson-Crimson-150: #f886a3;
+  --Color-Crimson-Crimson-125: #fa9eb5;
+  --Color-Crimson-Crimson-100: #fbb6c8;
+  --Color-Crimson-Crimson-75: #fccfda;
+  --Color-Crimson-Crimson-50: #fee7ed;
+
+  /* Muted Crimson Colors */
+  --color-muted-crimson-500: #12080a;
+  --color-muted-crimson-475: #240f14;
+  --color-muted-crimson-450: #36171f;
+  --color-muted-crimson-425: #471f29;
+  --color-muted-crimson-400: #592633;
+  --color-muted-crimson-375: #6b2e3e;
+  --color-muted-crimson-350: #7d3648;
+  --color-muted-crimson-325: #8f3d52;
+  --color-muted-crimson-300: #a1445c;
+  --color-muted-crimson-275: #b34c66;
+  --color-muted-crimson-250: #ba5e75;
+  --color-muted-crimson-225: #c27085;
+  --color-muted-crimson-200: #c98294;
+  --color-muted-crimson-175: #d194a3;
+  --color-muted-crimson-150: #d9a6b2;
+  --color-muted-crimson-125: #e0b8c2;
+  --color-muted-crimson-100: #e8c9d1;
+  --color-muted-crimson-75: #f0dbe0;
+  --color-muted-crimson-50: #f7edf0;
+
+  /* Custom border radius palette */
+  --radius-*: initial;
+  /* override tailwind palette */
+  --radius-0: 0px;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+  --radius-18: 18px;
+  --radius-20: 20px;
+  --radius-22: 22px;
+  --radius-24: 24px;
+  --radius-26: 26px;
+  --radius-28: 28px;
+  --radius-30: 30px;
+  --radius-32: 32px;
+  --radius-34: 34px;
+  --radius-36: 36px;
+  --radius-10000000: 10000000px;
+
+  --radius-full: calc(infinity * 1px);
+
+  /* Custom Border Width Palette */
+  --border-width-*: initial;
+  /* override tailwind palette */
+  --border-width-stroke-weight-thin: 1px;
+  --border-width-stroke-weight-regular: 2px;
+  --border-width-stroke-weight-thick: 3px;
+
+  /* Custom Shadow & Elevation */
+
+  --shadow-*: initial;
+  /* override tailwind palette */
+
+  --shadow-50:
+    0 1px 1px 0 var(--color-elevation-shadow-2),
+    0 1px 2px 0 var(--color-elevation-shadow-4),
+    0 2px 4px 0 var(--color-elevation-shadow-6);
+  --shadow-100:
+    0 1px 2px 0 var(--color-elevation-shadow-2),
+    0 2px 3px 0 var(--color-elevation-shadow-6),
+    0 3px 6px 0 var(--color-elevation-shadow-8);
+  --shadow-200:
+    0 1px 3px 0 var(--color-elevation-shadow-2),
+    0 2px 4px 0 var(--color-elevation-shadow-6),
+    0 4px 8px 0 var(--color-elevation-shadow-10);
+  --shadow-300:
+    0 1px 3px 0 var(--color-elevation-shadow-2),
+    0 3px 5px 0 var(--color-elevation-shadow-6),
+    0 6px 10px -2px var(--color-elevation-shadow-12);
+  --shadow-400:
+    0 2px 4px 0 var(--color-elevation-shadow-2),
+    0 3px 6px 0 var(--color-elevation-shadow-6),
+    0 8px 14px -2px var(--color-elevation-shadow-12);
+  --shadown-500:
+    0 2px 5px 0 var(--color-elevation-shadow-2),
+    0 4px 6px 0 var(--color-elevation-shadow-8),
+    0 12px 18px -4px var(--color-elevation-shadow-16);
+  --shadow-600:
+    0 2px 6px 0 var(--color-elevation-shadow-2),
+    0 6px 8px 0 var(--color-elevation-shadow-10),
+    0 16px 24px -4px var(--color-elevation-shadow-16);
+  --shadow-700:
+    0 2px 6px 0 var(--color-elevation-shadow-2),
+    0 8px 10px 0 var(--color-elevation-shadow-10),
+    0 20px 28px -4px var(--color-elevation-shadow-20);
+  --shadow-800:
+    0 3px 8px 0 var(--color-elevation-shadow-2),
+    0 10px 12px 0 var(--color-elevation-shadow-10),
+    0 24px 32px -4px var(--color-elevation-shadow-20);
+  --shadow-900:
+    0 4px 10px 0 var(--color-elevation-shadow-2),
+    0 12px 16px 0 var(--color-elevation-shadow-12),
+    0 28px 40px -4px var(--color-elevation-shadow-24);
+
+  --shadow-inset-100: 0 -3px 0 0 var(--color-elevation-shadow-6) inset;
+
+  --shadow-bevel-100:
+    0 1px 0 0 var(--color-elevation-shadow-10) inset,
+    1px 0 0 0 var(--color-elevation-shadow-10) inset,
+    -1px 0 0 0 var(--color-elevation-shadow-10) inset,
+    0 -1px 0 0 var(--color-elevation-shadow-10) inset;
+
+  --shadow-special-button-default:
+    -2px 0 0 0 var(--color-neutral-400) inset,
+    0 -2px 0 0 var(--color-neutral-400) inset,
+    2px 0 0 0 var(--color-neutral-400) inset,
+    0 2px 0 0 var(--color-neutral-400) inset,
+    0 4px 8px 0 var(--color-elevation-shadow-20),
+    0 0 0 0.8px var(--color-neutral-500);
+
+  --shadow-special-button-hover:
+    0 4px 8px 0 var(--color-elevation-shadow-10),
+    0 0 0 0.8px var(--color-neutral-500),
+    0 -2px 0 0 var(--color-neutral-500) inset,
+    0 2px 0 0 var(--color-neutral-500) inset,
+    -2px 0 0 0 var(--color-neutral-500) inset,
+    2px 0 0 0 var(--color-neutral-500) inset;
+
+  --shadow-special-button-pressed:
+    0 6px 0 0 var(--color-neutral-500) inset,
+    0 0 0 0.8px var(--color-neutral-425),
+    0 2px 0 0 var(--color-neutral-500) inset,
+    0 -2px 0 0 var(--color-neutral-500) inset,
+    2px 0 0 0 var(--color-neutral-500) inset,
+    -2px 0 0 0 var(--color-neutral-500) inset;
+
+  --background-image-content-special: linear-gradient(
+    0deg,
+    var(--color-neutral-500) 50%,
+
+    var(--color-neutral-375) 100%
+  );
+  --background-image-content-special-hover: linear-gradient(
+    0deg,
+    var(--color-neutral-375) 0%,
+
+    var(--color-neutral-500) 50%
+  );
+  --background-image-content-special-active: linear-gradient(
+    0deg,
+    var(--color-neutral-400) 0%,
+
+    var(--color-neutral-475) 53.71%,
+
+    var(--color-neutral-400) 100%
+  );
+
+  /* Animations */
+  --animate-pulse-wiggle: pulse-wiggle 2s ease-in-out infinite;
+  --animate-content-fade-in: content-fade-in 100ms ease-out;
+  --animate-content-fade-out: content-fade-out 150ms ease-in;
+  --animate-content-scale-in: content-scale-in 250ms ease-out;
+  --animate-content-scale-out: content-scale-out 350ms ease-in;
+  @keyframes pulse-wiggle {
+    0%,
+    100% {
+      transform: rotate(-12deg) scale(0.9);
+    }
+    50% {
+      transform: rotate(12deg) scale(1.1);
+    }
+  }
+  @keyframes content-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes content-fade-out {
+    from {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+  }
+  @keyframes content-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes content-scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+  }
+}