globuswebcomponents 0.2.6 → 0.2.9

package/dist/collection/components/gb-badges/gb-badges.css

@@ -0,0 +1,3257 @@
+:root {
+    /* --------------------------------------Primary Colors--------------------------------------------- */
+    /* base color palette */
+    --base-white: #fff;
+    --base-black: #000;
+
+
+    /* gray color palette  */
+    --gray-25: #fcfcfd;
+    --gray-50: #f6f8fa;
+    --gray-100: #eef2f6;
+    --gray-200: #e3e8ef;
+    --gray-300: #cdd5df;
+    --gray-400: #9aa4b2;
+    --gray-500: #697586;
+    --gray-600: #4b5565;
+    --gray-700: #364152;
+    --gray-800: #202939;
+    --gray-900: #121926;
+    --gray-950: #0D121C;
+
+    /* brand dark blue color palette */
+    --brandDarkBlue-25: #F9F9FB;
+    --brandDarkBlue-50: #edeef3;
+    --brandDarkBlue-100: #d3d5e0;
+    --brandDarkBlue-200: #b5b9cc;
+    --brandDarkBlue-300: #9095b2;
+    --brandDarkBlue-400: #464f7f;
+    --brandDarkBlue-500: #212c65;
+    --brandDarkBlue-600: #1e285c;
+    --brandDarkBlue-700: #1c2554;
+    --brandDarkBlue-800: #161d43;
+    --brandDarkBlue-900: #0b0f22;
+    --brandDarkBlue-950: #070914;
+
+    /* brand red color palette */
+    --brandRed-25: #fffbfa;
+    --brandRed-50: #fef1f2;
+    --brandRed-100: #fde3e5;
+    --brandRed-200: #f9b4ba;
+    --brandRed-300: #f68e98;
+    --brandRed-400: #f36976;
+    --brandRed-500: #e21b2e;
+    --brandRed-600: #cc1a2a;
+    --brandRed-700: #b51726;
+    --brandRed-800: #8c121d;
+    --brandRed-900: #680d16;
+    --brandRed-950: #3f080d;
+
+    /* warning color palette */
+    --warning-25: #fffcf5;
+    --warning-50: #fffaeb;
+    --warning-100: #fef0c7;
+    --warning-200: #fedf89;
+    --warning-300: #fec84b;
+    --warning-400: #fdb022;
+    --warning-500: #f79009;
+    --warning-600: #dc6803;
+    --warning-700: #b54708;
+    --warning-800: #93370d;
+    --warning-900: #7A2e0e;
+    --warning-950: #4e1d09;
+
+    /* success color palette  */
+    --success-25: #f6fef9;
+    --success-50: #ecfdf3;
+    --success-100: #dcfaeb;
+    --success-200: #a9efc5;
+    --success-300: #75e0a7;
+    --success-400: #47cd89;
+    --success-500: #17b26a;
+    --success-600: #079455;
+    --success-700: #067647;
+    --success-800: #085d3a;
+    --success-900: #074d31;
+    --success-950: #053321;
+
+    /* opacity color palette  */
+    --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
+    --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
+
+
+    /* ------------------------------------------Secondary Color------------------------------------------- */
+    /* blueLight color palete */
+    --lightBlue-25: #F5FBFF;
+    --lightBlue-50: #F0F9FF;
+    --lightBlue-100: #E0F2FE;
+    --lightBlue-200: #B9E6FE;
+    --lightBlue-300: #7CD4FD;
+    --lightBlue-400: #7CD4FD;
+    --lightBlue-500: #0BA5EC;
+    --lightBlue-600: #0086C9;
+    --lightBlue-700: #026AA2;
+    --lightBlue-800: #065986;
+    --lightBlue-900: #0B4A6F;
+    --lightBlue-950: #062C41;
+   
+
+    /* blue color palette */
+    --blue-25: #ECF5FE;
+    --blue-50: #E4F0FC;
+    --blue-100: #C8E0F9;
+    --blue-200: #9AC7F4;
+    --blue-300: #6AA9E7;
+    --blue-400: #378FE6;
+    --blue-500: #075DB2;
+    --blue-600: #064E94;
+    --blue-700: #053E77;
+    --blue-800: #042F59;
+    --blue-900: #022445;
+    --blue-950: #021D37;
+
+    /* Purple color palete */
+    --purple-25: #FAFAFF;
+    --purple-50: #F4F3FF;
+    --purple-100: #EBE9FE;
+    --purple-200: #D9D6FE;
+    --purple-300: #BDB4FE;
+    --purple-400: #9B8AFB;
+    --purple-500: #7A5AF8;
+    --purple-600: #6938EF;
+    --purple-700: #5925DC;
+    --purple-800: #4A1FB8;
+    --purple-900: #3E1C96;
+    --purple-950: #27115F;
+
+
+    /* pink color palette */
+    --pink-25: #FEF6FB;
+    --pink-50: #FDF2FA;
+    --pink-100: #FCE7F6;
+    --pink-200: #FCCEEE;
+    --pink-300: #FAA7E0;
+    --pink-400: #F670C7;
+    --pink-500: #EE46BC;
+    --pink-600: #DD2590;
+    --pink-700: #C11574;
+    --pink-800: #9E165F;
+    --pink-900: #851651;
+    --pink-950: #4E0D30;
+
+
+
+    /* -------------------------------------------------Token---------------------------------------------- */
+
+    /* -----------Text Color----------- */
+
+    [data-theme="light"] {
+        --color-text-bold: var(--gray-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-bold: var(--gray-100);
+    }
+
+    [data-theme="light"] {
+        --color-text: var(--gray-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text: var(--gray-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-subtle: var(--gray-500);
+    }
+
+    [data-theme="light"] {
+        --color-text-subtle: var(--gray-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-disabled: var(--gray-300);
+    }
+
+    [data-theme="dark"] {
+        --color-text-disabled: var(--gray-700);
+    }
+
+    [data-theme="light"] {
+        --color-text-inverse: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-text-inverse: var(--base-black);
+    }
+
+    [data-theme="light"] {
+        --color-text-brandDarkBlue: var(--brandDarkBlue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-brandDarkBlue: var(--brandDarkBlue-200);
+    }
+
+    [data-theme="light"] {
+        --color-text-brandRed: var(--brandRed-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-brandRed: var(--brandRed-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-selected: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-selected: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-danger: var(--brandRed-700);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger: var(--brandRed-700);
+    }
+
+    [data-theme="light"] {
+        --color-text-danger-inverse: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-inverse: var(--brandRed-950);
+    }
+
+    [data-theme="light"] {
+        --color-text-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-bold: var(--brandRed-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-warning: var(--warning-600);
+    }
+
+
+    [data-theme="dark"] {
+        --color-text-warning: var(--warning-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-warning-bold: var(--warning-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-bold: var(--warning-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-sucess: var(--success-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-sucess: var(--success-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-sucess-bold: var(--success-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-sucess-bold: var(--success-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-discovery: var(--blueLight-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-discovery-bold: var(--blueLight-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-bold: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-information: var(--blue-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-information-bold: var(--blue-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-bold: var(--blue-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-purple: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-purple-bold: var(--purple-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-bold: var(--purple-100);
+    }
+
+
+    /* --------------Link color--------------- */
+
+
+    [data-theme="light"] {
+        --color-link: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-link: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-link-pressed: var(--blue-600);
+    }
+
+    [data-theme="dark"] {
+        --color-link-pressed: var(--blue-600);
+    }
+
+    [data-theme="light"] {
+        --color-link-visited: var(--blueLight-600);
+    }
+
+    [data-theme="dark"] {
+        --color-link-visited: var(--blueLight-300);
+    }
+
+
+    /* --------------Icon color--------------- */
+
+    [data-theme="light"] {
+        --color-icon-bold: var(--gray-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-bold: var(--gray-100);
+    }
+    
+    [data-theme="light"] {
+        --color-icon: var(--gray-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon: var(--gray-400);
+    }
+
+    [data-theme="light"] {
+        --color-icon-subtle: var(--gray-500);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-subtle: var(--gray-500);
+    }
+
+    [data-theme="light"] {
+        --color-icon-disabled: var(--gray-300);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-disabled: var(--gray-700);
+    }
+
+    [data-theme="light"] {
+        --color-icon-inverse: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-inverse: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-icon-darkBlue: var(--brandDarkBlue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-darkBlue: var(--brandDarkBlue-200);
+    }
+
+    [data-theme="light"] {
+        --color-icon-brandRed: var(--brandRed-500);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-brandRed: var(--brandRed-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-danger: var(--brandRed-700);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-danger: var(--brandRed-200);
+    }
+
+    [data-theme="light"] {
+        --color-icon-danger-inverse: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-danger-inverse: var(--brandRed-950);
+    }
+
+    [data-theme="light"] {
+        --color-icon-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-danger-bold: var(--brandRed-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-warning: var(--warning-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-warning: var(--warning-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-warning-bold: var(--warning-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-warning-bold: var(--warning-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-sucess: var(--success-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-sucess: var(--success-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-sucess-bold: var(--success-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-sucess-bold: var(--success-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-discovery: var(--blueLight-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-discovery: var(--blueLight-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-discovery-bold: var(--blueLight-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-discovery-bold: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-information: var(--blue-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-information: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-information-bold: var(--blue-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-information-bold: var(--blue-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-purple: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-purple: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-purple-bold: var(--purple-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-purple-bold: var(--purple-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-pink: var(--pink-300);
+    }
+
+    [data-theme="light"] {
+        --color-icon-pink-bold: var(--pink-800);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-pink: var(--pink-100);
+    }
+
+    /* ----------------Border Color --------------- */
+
+    [data-theme="light"] {
+        --color-border-bold: var(--gray-500);
+    }
+
+    [data-theme="dark"] {
+        --color-border-bold: var(--gray-400);
+    }
+
+    [data-theme="light"] {
+        --color-border: var(--gray-400);
+    }
+
+    [data-theme="dark"] {
+        --color-border: var(--gray-500);
+    }
+
+    [data-theme="light"] {
+        --color-border-subtle: var(--gray-300);
+    }
+
+    [data-theme="dark"] {
+        --color-border-subtle: var(--gray-700);
+    }
+
+    [data-theme="light"] {
+        --color-border-subtler: var(--gray-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-subtler: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-disabled: var(--gray-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-disabled: var(--gray-700);
+    }
+
+    [data-theme="light"] {
+        --color-border-inverse: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-border-inverse: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-input: var(--gray-300);
+    }
+
+    [data-theme="dark"] {
+        --color-border-input: var(--gray-600);
+    }
+
+    [data-theme="light"] {
+        --color-border-focus: var(--gray-400);
+    }
+
+    [data-theme="dark"] {
+        --color-border-focus: var(--blue-200);
+    }
+
+    [data-theme="light"] {
+        --color-border-selected: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-border-selected: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-darkBlue: var(--brandDarkBlue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-border-darkBlue: var(--brandDarkBlue-200);
+    }
+
+    [data-theme="light"] {
+        --color-border-brandRed: var(--brandRed-500);
+    }
+
+    [data-theme="dark"] {
+        --color-border-brandRed: var(--brandRed-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-danger-bold: var(--brandRed-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-danger: var(--brandRed-700);
+    }
+
+    [data-theme="dark"] {
+        --color-border-danger: var(--brandRed-200);
+    }
+
+    [data-theme="light"] {
+        --color-border-danger-subtle: var(--brandRed-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-danger-subtle: var(--brandRed-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-danger-subtler: var(--brandRed-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-danger-subtler: var(--brandRed-900);
+    }
+
+    [data-theme="light"] {
+        --color-border-warning-bold: var(--warning-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-warning-bold: var(--warning-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-warning: var(--warning-600);
+    }
+
+    [data-theme="dark"] {
+        --color-border-warning: var(--warning-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-warning-subtle: var(--warning-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-warning-subtle: var(--warning-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-warning-subtler: var(--warning-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-warning-subtler: var(--warning-900);
+    }
+
+    [data-theme="light"] {
+        --color-border-sucess-bold: var(--success-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-sucess-bold: var(--success-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-sucess: var(--success-600);
+    }
+
+    [data-theme="dark"] {
+        --color-border-sucess: var(--success-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-sucess-subtle: var(--success-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-sucess-subtle: var(--success-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-sucess-subtler: var(--success-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-sucess-subtler: var(--success-900);
+    }
+
+    [data-theme="light"] {
+        --color-border-discovery-bold: var(--blueLight-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-discovery-bold: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-discovery: var(--blueLight-600);
+    }
+
+    [data-theme="dark"] {
+        --color-border-discovery: var(--blueLight-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-discovery-subtle: var(--blueLight-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-discovery-subtle: var(--blueLight-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-discovery-subtler: var(--blueLight-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-discovery-subtler: var(--blueLight-900);
+    }
+
+    [data-theme="light"] {
+        --color-border-information-bold: var(--blue-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-information-bold: var(--blue-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-information: var(--blue-600);
+    }
+
+    [data-theme="dark"] {
+        --color-border-information: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-information-subtle: var(--blue-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-information-subtle: var(--blue-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-information-subtler: var(--blue-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-information-subtler: var(--blue-900);
+    }
+
+    [data-theme="light"] {
+        --color-border-purple-bold: var(--purple-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-purple-bold: var(--purple-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-purple: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-border-purple: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-purple-subtle: var(--purple-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-purple-subtle: var(--purple-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-purple-subtler: var(--purple-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-purple-subtler: var(--purple-900);
+    }
+
+    [data-theme="light"] {
+        --color-border-pink-bold: var(--pink-800);
+    }
+
+    [data-theme="dark"] {
+        --color-border-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-border-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-border-pink: var(--pink-300);
+    }
+
+    [data-theme="light"] {
+        --color-border-pink-subtle: var(--pink-200);
+    }
+
+    [data-theme="dark"] {
+        --color-border-pink-subtle: var(--pink-800);
+    }
+
+    [data-theme="light"] {
+        --color-border-pink-subtler: var(--pink-100);
+    }
+
+    [data-theme="dark"] {
+        --color-border-pink-subtler: var(--pink-900);
+    }
+
+
+
+    /* Emmanuel Kadiri starts from background color */
+
+    /* ----------------Background Color --------------- */
+
+    [data-theme="light"] {
+        --color-background-card-bold: var(--gray-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-card-bold: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-card: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-background-card: var(--gray-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-input: var(--gray-400);
+    }
+
+    [data-theme="dark"] {
+        --color-background-input: var(--gray-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-disabled: var(--gray-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-disabled: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-selected: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-background-selected: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-background-darkblue: var(--brandDarkBlue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-background-darkblue: var(--brandDarkBlue-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-brandRed: var(--brandRed-500);
+    }
+
+    [data-theme="dark"] {
+        --color-background-brandRed: var(--brandRed-300);
+    }
+
+    [data-theme="light"] {
+        --color-background-brandRed-hover: var(--brandRed-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-brandRed-hover: var(--brandRed-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-brandRed-pressed: var(--brandRed-700);
+    }
+
+    [data-theme="dark"] {
+        --color-background-brandRed-pressed: var(--brandRed-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-gray-bold: var(--gray-400);
+    }
+
+    [data-theme="dark"] {
+        --color-background-gray-bold: var(--gray-500);
+    }
+
+    [data-theme="light"] {
+        --color-background-gray: var(--gray-300);
+    }
+
+    [data-theme="dark"] {
+        --color-background-gray: var(--gray-600);
+    }
+
+    [data-theme="light"] {
+        --color-background-gray-subtle: var(--gray-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-gray-subtle: var(--gray-700);
+    }
+
+    [data-theme="light"] {
+        --color-background-gray-subtler: var(--gray-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-gray-subtler: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-gray-subtlest: var(--gray-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-gray-subtlest: var(--gray-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-background-danger-bold: var(--brandRed-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-danger: var(--brandRed-700);
+    }
+
+    [data-theme="dark"] {
+        --color-background-danger: var(--brandRed-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-danger-subtle: var(--brandRed-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-danger-subtle: var(--brandRed-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-danger-subtler: var(--brandRed-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-danger-subtler: var(--brandRed-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-danger-subtlest: var(--brandRed-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-danger-subtlest: var(--brandRed-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-warning-bold: var(--warning-800);
+    }
+
+    [data-theme="dark"] {
+        --color-background-warning-bold: var(--warning-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-warning: var(--warning-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-warning: var(--warning-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-warning-subtle: var(--warning-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-warning-subtle: var(--warning-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-warning-subtler: var(--warning-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-warning-subtler: var(--warning-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-warning-subtlest: var(--warning-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-warning-subtlest: var(--warning-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-success-bold: var(--success-800);
+    }
+
+    [data-theme="dark"] {
+        --color-background-success-bold: var(--success-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-success: var(--success-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-success: var(--success-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-success-subtle: var(--success-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-success-subtle: var(--success-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-success-subtler: var(--success-100); 
+    }
+
+    [data-theme="dark"] {
+        --color-background-success-subtler: var(--success-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-success-subtlest: var(--success-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-success-subtlest: var(--success-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-discovery-bold: var(--blueLight-800)
+    }
+
+    [data-theme="dark"] {
+        --color-background-discovery-bold: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-discovery: var(--blueLight-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-discovery: var(--blueLight-200);
+    }
+
+    [data-theme="light"]{
+        --color-background-discovery-subtle: var(--blueLight-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-discovery-subtle: var(--blueLight-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-discovery-subtler: var(--blueLight-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-discovery-subtler: var(--blueLight-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-discovery-subtlest: var(--blueLight-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-discovery-subtlest: var(--blueLight-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-information-bold: var(--blue-800);
+    }
+
+    [data-theme="dark"] {
+        --color-background-information-bold: var(--blue-100)
+    }
+
+    [data-theme="light"] {
+        --color-background-information: var(--blue-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-information: var(--blue-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-information-subtle: var(--blue-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-information-subtle: var(--blue-800);
+    }
+
+    [data-them="light"] {
+        --color-background-information-subtler: var(--blue-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-information-subtler: var(--blue-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-information-subtlest: var(--blue-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-information-subtlest: var(--blue-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-purple-bold: var(--purple-800);
+    }
+
+    [data-theme="dark"] {
+        --color-background-purple-bold: var(--blue-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-purple: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-purple: var(--blue-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-purple-subtle: var(--purple-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-purple-subtle: var(--purple-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-purple-subtler: var(--purple-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-purple-subtler: var(--purple-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-purple-subtlest: var(--purple-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-purple-subtlest: var(--purple-950);
+    }
+
+    [data-theme="light"] {
+        --color-background-pink-bold: var(--pink-800);
+    }
+
+    [data-theme="dark"] {
+        --color-background-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-background-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-background-pink: var(--pink-200);
+    }
+
+    [data-theme="light"] {
+        --color-background-pink-subtle: var(--pink-200);
+    }
+
+    [data-theme="dark"] {
+        --color-background-pink-subtle: var(--pink-800);
+    }
+
+    [data-theme="light"] {
+        --color-background-pink-subtler: var(--pink-100);
+    }
+
+    [data-theme="dark"] {
+        --color-background-pink-subtler: var(--pink-900);
+    }
+
+    [data-theme="light"] {
+        --color-background-pink-subtlest: var(--purple-50);
+    }
+
+    [data-theme="dark"] {
+        --color-background-pink-subtlest: var(--pink-950);
+    }
+
+
+
+    /* ----------------Blanket Color --------------- */
+    [data-theme="light"] {
+        --color-blanket: var(--darkBlue500-opacity20);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket: var(--darkBlue200-opacity20);
+    }
+
+
+
+    /* ----------------Skeleton Color --------------- */
+    [data-theme="light"] {
+        --color-skeleton: var(--gray-200);
+    }
+
+    [data-theme="dark"] {
+        --color-skeleton: var(--gray-800);
+    }
+
+
+
+    /* ----------------Surface Color --------------- */
+    [data-theme="light"] {
+        --color-surface-secondary: var(--gray-50);
+    }
+
+    [data-theme="dark"] {
+        --color-surface-secondary: var(--gray-950);
+    }
+
+    [data-theme="light"] {
+        --color-surface: var(--base-white);
+    }
+
+    [data-theme="dark"] {
+        --color-surface: var(--gray-900);
+    }
+
+    [data-theme="light"] {
+        --color-surface-hovered: var(--gray-100); 
+    }
+
+    [data-theme="dark"] {
+        --color-surface-hovered: var(--gray-800);
+    }
+
+    [data-theme="light"] {
+        --color-surface-pressed: var(--gray-200);
+    }
+
+    [data-theme="dark"] {
+        --color-surface-pressed: var(--gray-700);
+    }
+
+ 
+
+}
+
+/* -----------------Shadow and Blur----------------- */
+:root{
+    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);   
+    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
+
+    --blur-sm: blur(4px);
+    --blur-md: blur(8px);
+    --blur-lg: blur(12px);
+    --blur-xl: blur(20px);
+}
+
+.shadow-xs{
+    box-shadow: var(--shadow-xs);
+}
+
+.shadow-sm{
+    box-shadow: var(--shadow-sm);
+}
+
+.shadow-md{
+    box-shadow: var(--shadow-md);
+}
+
+.shadow-lg{
+    box-shadow: var(--shadow-lg);
+}
+
+.shadow-xl{
+    box-shadow: var(--shadow-xl);
+}
+
+.shadow-2xl{
+    box-shadow: var(--shadow-2xl);
+}
+
+.shadow-3xl{
+    box-shadow: var(--shadow-3xl);
+}
+
+.blur-sm{
+    backdrop-filter: var(--blur-sm);
+}
+
+.blur-md{
+    backdrop-filter: var(--blur-md);
+}
+
+.blur-lg{
+    backdrop-filter: var(--blur-lg);
+}
+
+.blur-xl{
+    backdrop-filter: var(--blur-xl);
+}
+
+
+/* -----------------Gradients----------------- */
+:root{
+    /* Gray Gradients */
+    /* --gray-gradient-600: linear-gradient(); */
+    --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));
+    --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));
+    --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));
+    --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));
+    --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));
+    --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));
+
+    /* Brand Dark Blue Gradients */
+    --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));
+    --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));
+    --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));
+    --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));
+    --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));
+    --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));
+
+    /* Brand Red Gradients */
+    --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));
+    --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));
+    --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));
+    --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));
+    --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));
+    --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));
+
+    /* Blue Gradients */
+    --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));
+    --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));
+    --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));
+    --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));
+    --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));
+    --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));
+}
+
+.gradient-gray-600-to-500-90d {
+    background: var(--gradient-gray-600-to-500-90d);
+}
+
+.gradient-gray-700-to-600-45d {
+    background: var(--gradient-gray-700-to-600-45d);
+}
+
+.gradient-gray-800-to-600-45d {
+    background: var(--gradient-gray-800-to-600-45d);
+}
+
+.gradient-gray-800-to-600-90d {
+    background: var(--gradient-gray-800-to-600-90d);
+}
+
+.gradient-gray-800-to-700265-d {
+    background: var(--gradient-gray-800-to-700265-d);
+}
+
+.gradient-gray-900-to-600-45d {
+    background: var(--gradient-gray-900-to-600-45d);
+}
+
+.gradient-darkBlue-500-to-400-90d{
+    background: var(--gradient-darkBlue-500-to-400-90d);
+}
+
+.gradient-darkBlue-700-to-500-45d{
+    background: var(--gradient-darkBlue-700-to-500-45d);
+}
+
+.gradient-darkBlue-700-to-400-45d{
+    background: var(--gradient-darkBlue-700-to-400-45d);
+}
+
+.gradient-darkBlue-800-to-500-90d{
+    background: var(--gradient-darkBlue-800-to-500-90d);
+}
+
+.gradient-darkBlue-800-to-600265-d{
+    background: var(--gradient-darkBlue-800-to-600265-d);
+}
+
+.gradient-darkBlue-900-to-600-45d{
+    background: var(--gradient-darkBlue-900-to-600-45d);
+}
+
+.gradient-red-500-to-400-90d{
+    background: var(--gradient-red-500-to-400-90d);
+}
+
+.gradient-red-700-to-500-45d{
+    background: var(--gradient-red-700-to-500-45d);
+}
+
+.gradient-red-700-to-400-45d{
+    background: var(--gradient-red-700-to-400-45d);
+}
+
+.gradient-red-800-to-500-90d{
+    background: var(--gradient-red-800-to-500-90d);
+}
+
+.gradient-red-800-to-600265-d{
+    background: var(--gradient-red-800-to-600265-d);
+}
+
+.gradient-red-900-to-600-45d{
+    background: var(--gradient-red-900-to-600-45d);
+}
+
+.gradient-blue-500-to-400-90d{
+    background: var(--gradient-blue-500-to-400-90d);
+}
+
+.gradient-blue-700-to-500-45d{
+    background: var(--gradient-blue-700-to-500-45d);
+}
+
+.gradient-blue-700-to-400-45d{
+    background: var(--gradient-blue-700-to-400-45d);
+}
+
+.gradient-blue-800-to-500-90d{
+    background: var(--gradient-blue-800-to-500-90d);
+}
+
+.gradient-blue-800-to-600265-d{
+    background: var(--gradient-blue-800-to-600265-d);
+}
+
+.gradient-blue-900-to-600-45d{
+    background: var(--gradient-blue-900-to-600-45d);
+}
+
+:root{
+    /* h1, p {
+        font-size: 1.75rem;
+        line-height: 1.25rem;
+    }
+      
+    h1::before, p::before{
+        content: "";
+        margin-bottom: -0.005em;
+        display: table;
+    }
+      
+    h1::after, p::after {
+        content: "";
+        margin-top: -0.025em;
+        display: table;
+    } */
+}
+:root{
+    /* Positive spacing */
+    --spacing-none: 0rem;
+    --spacing-half: 0.125rem;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-7: 2rem;
+    --spacing-8: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
+
+    /* Negative spacing */
+
+    --spacing-negative-half: -0.125rem;
+    --spacing-negative-1: -0.25rem;
+    --spacing-negative-2: -0.5rem;
+    --spacing-negative-3: -0.75rem;
+    --spacing-negative-4: -1rem;
+    --spacing-negative-5: -1.25rem;
+    --spacing-negative-6: -1.5rem;
+    --spacing-negative-7: -2rem;
+
+    /* Radius  */
+    --rounded-none: 0rem;
+    --rounded-xs: 0.25rem;
+    --rounded-sm: 0.5rem;
+    --rounded-md: 0.75rem;
+    --rounded-lg: 1rem;
+    --rounded-xl: 1.5rem;
+    --rounded-2xl: 2rem;
+    --rounded-full: 62.438rem;
+}
+@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
+
+:root {
+    --font-family: 'Sora';
+    --font-family-sans: sans-serif;
+    --font-style: normal;
+
+    /* ------------------base font sizes---------------- */
+    /* Display 2xl */
+    --display-2xl-bold-font-size: 4.5rem;
+    --display-2xl-bold-font-weight: 700;
+    --display-2xl-bold-line-height: 5rem;
+    --display-2xl-bold-letter-spacing: -0.09rem;
+
+    --display-2xl-semiBold-font-size: 4.5rem;
+    --display-2xl-semiBold-font-weight: 600;
+    --display-2xl-semiBold-line-height: 5rem;
+    --dispay-2xl-semiBold-letter-spacing: -0.09rem;
+
+    /* Display xl */
+    --display-xl-bold-font-size: 3.75rem;
+    --display-xl-bold-font-weight: 700;
+    --display-xl-bold-line-height: 4.25rem;
+    --display-xl-bold-letter-spacing: -0.075rem;
+
+    --display-xl-semiBold-font-size: 3.75rem;
+    --display-xl-semiBold-font-weight: 600;
+    --display-xl-semiBold-line-height: 4.25rem;
+    --display-xl-semiBold-letter-spacing: -0.075rem;
+
+    /* Display lg */
+    --display-lg-bold-font-size: 3rem;
+    --display-lg-bold-font-weight: 700;
+    --display-lg-bold-line-height: 4.25rem;
+    --display-lg-bold-letter-spacing: -0.075rem;
+
+    --display-lg-semiBold-font-size: 3rem;
+    --display-lg-semiBold-font-weight: 600;
+    --display-lg-semiBold-line-height: 4.25rem;
+    --display-lg-semiBold-letter-spacing: -0.075rem;
+
+    /* Display sm */
+    --display-sm-bold-font-size: 1.875rem;
+    --display-sm-bold-font-weight: 700;
+    --display-sm-bold-line-height: 2.375rem;
+    --display-sm-bold-letter-spacing: 0rem;
+
+    --display-sm-semiBold-font-size: 1.875rem;
+    --display-sm-semiBold-font-weight: 600;
+    --display-sm-semiBold-line-height: 2.375rem;
+    --display-sm-semiBold-letter-spacing: 0rem;
+
+    /* Display xs */
+    --display-xs-bold-font-size: 1.5rem;
+    --display-xs-bold-font-weight: 700;
+    --display-xs-bold-line-height: 2rem;
+    --display-xs-bold-letter-spacing: 0rem;
+
+    --display-xs-semiBold-font-size: 1.5rem;
+    --display-xs-semiBold-font-weight: 600;
+    --display-xs-semiBold-line-height: 2rem;
+    --display-xs-semiBold-letter-spacing: 0rem;
+
+    /* Text xl */
+    --text-xl-bold-font-size: 1.25rem;
+    --text-xl-bold-font-weight: 700;
+    --text-xl-bold-line-height: 1.875rem;
+
+    --text-xl-semiBold-font-size: 1.25rem;
+    --text-xl-semiBold-font-weight: 600;
+    --text-xl-semiBold-line-height: 1.875rem;
+
+    --text-xl-medium-font-size: 1.25rem;
+    --text-xl-medium-font-weight: 500;
+    --text-xl-medium-line-height: 1.875rem;
+
+    --text-xl-regular-font-size: 1.25rem;
+    --text-xl-regular-font-weight: 400;
+    --text-xl-regular-line-height: 1.875rem;
+
+    /* Text lg */
+    --text-lg-bold-font-size: 1.125rem;
+    --text-lg-bold-font-weight: 700;
+    --text-lg-bold-line-height: 1.75rem;
+
+    --text-lg-semiBold-font-size: 1.125rem;
+    --text-lg-semiBold-font-weight: 600;
+    --text-lg-semiBold-line-height: 1.75rem;
+
+    --text-lg-medium-font-size: 1.125rem;
+    --text-lg-medium-font-weight: 500;
+    --text-lg-medium-line-height: 1.75rem;
+
+    --text-lg-regular-font-size: 1.125rem;
+    --text-lg-regular-font-weight: 400;
+    --text-lg-regular-line-height: 1.75rem;
+
+    /* Text md */
+    --text-md-bold-font-size: 1rem;
+    --text-md-bold-font-weight: 700;
+    --text-md-bold-line-height: 1.5rem;
+
+    --text-md-semiBold-font-size: 1rem;
+    --text-md-semiBold-font-weight: 600;
+    --text-md-semiBold-line-height: 1.5rem;
+
+    --text-md-medium-font-size: 1rem;
+    --text-md-medium-font-weight: 500;
+    --text-md-medium-line-height: 1.5rem;
+
+    --text-md-regular-font-size: 1rem;
+    --text-md-regular-font-weight: 400;
+    --text-md-regular-line-height: 1.5rem;
+
+    /* Text sm */
+    --text-sm-bold-font-size: 0.875rem;
+    --text-sm-bold-font-weight: 700;
+    --text-sm-bold-line-height: 1.25rem;
+
+    --text-sm-semiBold-font-size: 0.875rem;
+    --text-sm-semiBold-font-weight: 600;
+    --text-sm-semiBold-line-height: 1.25rem;
+
+    --text-sm-medium-font-size: 0.875rem;
+    --text-sm-medium-font-weight: 500;
+    --text-sm-medium-line-height: 1.25rem;
+
+    --text-sm-regular-font-size: 0.875rem;
+    --text-sm-regular-font-weight: 400;
+    --text-sm-regular-line-height: 1.25rem;
+
+    /* Text xs */
+    --text-xs-bold-font-size: 0.75rem;
+    --text-xs-bold-font-weight: 700;
+    --text-xs-bold-line-height: 1.125rem;
+
+    --text-xs-semiBold-font-size: 0.75rem;
+    --text-xs-semiBold-font-weight: 600;
+    --text-xs-semiBold-line-height: 1.125rem;
+
+    --text-xs-medium-font-size: 0.75rem;
+    --text-xs-medium-font-weight: 500;
+    --text-xs-medium-line-height: 1.125rem;
+
+    --text-xs-regular-font-size: 0.75rem;
+    --text-xs-regular-font-weight: 400;
+    --text-xs-regular-line-height: 1.125rem;
+}
+
+/* ------------------Responsive adjustments---------------- */
+/* Medium screens */
+@media (max-width: 1199px){
+    :root{
+        /* Display 2xl */
+        --display-2xl-bold-font-size: 3.75rem;
+        --display-2xl-bold-font-weight: 700;
+        --display-2xl-bold-line-height: 4.25rem;
+        --display-2xl-bold-letter-spacing: -0.075rem;
+
+        --display-2xl-semiBold-font-size: 3.75rem;
+        --display-2xl-semiBold-font-weight: 600;
+        --display-2xl-semiBold-line-height: 4.25rem;
+        --display-2xl-semiBold-letter-spacing: -0.075rem;
+
+        /* Display xl */   
+        --display-xl-bold-font-size: 3.5rem;
+        --display-xl-bold-font-weight: 700;
+        --display-xl-bold-line-height: 3.75rem;
+        --display-xl-bold-letter-spacing: -0.065rem; 
+
+        --display-xl-semiBold-font-size: 3.5rem;
+        --display-xl-semiBold-font-weight: 600;
+        --display-xl-semiBold-line-height: 3.75rem;
+        --display-xl-semiBold-letter-spacing: -0.065rem; 
+
+        /* Display lg */   
+        --display-lg-bold-font-size: 2.75rem;
+        --display-lg-bold-font-weight: 700;
+        --display-lg-bold-line-height: 2.4375rem;
+        --display-lg-bold-letter-spacing: -0.045rem; 
+
+        --display-lg-semiBold-font-size: 2.75rem;
+        --display-lg-semiBold-font-weight: 600;
+        --display-lg-semiBold-line-height: 2.4375rem;
+        --display-lg-semiBold-letter-spacing: -0.045rem; 
+
+        /* Display md */   
+        --display-md-bold-font-size: 2.25rem;
+        --display-md-bold-font-weight: 700;
+        --display-md-bold-line-height: 2.75rem;
+        --display-md-bold-letter-spacing: -0.045rem; 
+
+        --display-md-semiBold-font-size: 2.25rem;
+        --display-md-semiBold-font-weight: 600;
+        --display-md-semiBold-line-height: 2.75rem;
+        --display-md-semiBold-letter-spacing: -0.045rem; 
+
+        /* Display sm */   
+        --display-sm-bold-font-size: 1.875rem;
+        --display-sm-bold-font-weight: 700;
+        --display-sm-bold-line-height: 2.375rem;
+        --display-sm-bold-letter-spacing: 0rem; 
+
+        --display-sm-semiBold-font-size: 1.875rem;
+        --display-sm-semiBold-font-weight: 600;
+        --display-sm-semiBold-line-height: 2.375rem;
+        --display-sm-semiBold-letter-spacing: 0rem; 
+
+        /* Display xs */   
+        --display-xs-bold-font-size: 1.5rem;
+        --display-xs-bold-font-weight: 700;
+        --display-xs-bold-line-height: 2rem;
+        --display-xs-bold-letter-spacing: 0rem; 
+
+        --display-xs-semiBold-font-size: 1.5rem;
+        --display-xs-semiBold-font-weight: 600;
+        --display-xs-semiBold-line-height: 2rem;
+        --display-xs-semiBold-letter-spacing: 0rem;
+    }
+}
+
+/* Small screens */
+@media (max-width: 743px){
+    :root{
+         /* Display 2xl */
+        --display-2xl-bold-font-size: 3rem;
+        --display-2xl-bold-font-weight: 700;
+        --display-2xl-bold-line-height: 3.375rem;
+        --display-2xl-bold-letter-spacing: -0.06rem;
+
+        --display-2xl-semiBold-font-size: 3.75rem;
+        --display-2xl-semiBold-font-weight: 600;
+        --display-2xl-semiBold-line-height: 3.375rem;
+        --display-2xl-semiBold-letter-spacing: -0.06rem;
+
+         /* Display xl */
+        --display-xl-bold-font-size: 2.5rem;
+        --display-xl-bold-font-weight: 700;
+        --display-xl-bold-line-height: 2.875rem;
+        --display-xl-bold-letter-spacing: -0.05rem;
+
+        --display-xl-semiBold-font-size: 2.5rem;
+        --display-xl-semiBold-font-weight: 600;
+        --display-xl-semiBold-line-height: 2.875rem;
+        --display-xl-semiBold-letter-spacing: -0.05rem;
+
+         /* Display lg */
+        --display-lg-bold-font-size: 2rem;
+        --display-lg-bold-font-weight: 700;
+        --display-lg-bold-line-height: 2.5rem;
+        --display-lg-bold-letter-spacing: -0.045rem;
+
+        --display-lg-semiBold-font-size: 2rem;
+        --display-lg-semiBold-font-weight: 600;
+        --display-lg-semiBold-line-height: 2.5rem;
+        --display-lg-semiBold-letter-spacing: -0.045rem;
+
+         /* Display md */
+        --display-md-bold-font-size: 1.75rem;
+        --display-md-bold-font-weight: 700;
+        --display-md-bold-line-height: 2.1375rem;
+        --display-md-bold-letter-spacing: 0rem;
+
+        --display-md-semiBold-font-size: 1.75rem;
+        --display-md-semiBold-font-weight: 600;
+        --display-md-semiBold-line-height: 2.1375rem;
+        --display-md-semiBold-letter-spacing: 0rem;
+
+         /* Display sm */
+        --display-sm-bold-font-size: 1.5rem;
+        --display-sm-bold-font-weight: 700;
+        --display-sm-bold-line-height: 2rem;
+        --display-sm-bold-letter-spacing: 0rem;
+
+        --display-sm-semiBold-font-size: 1.5rem;
+        --display-sm-semiBold-font-weight: 600;
+        --display-sm-semiBold-line-height: 2rem;
+        --display-sm-semiBold-letter-spacing: 0rem;
+
+         /* Display xs */
+        --display-xs-bold-font-size: 1.25rem;
+        --display-xs-bold-font-weight: 700;
+        --display-xs-bold-line-height: 1.75rem;
+        --display-xs-bold-letter-spacing: 0rem;
+
+        --display-xs-semiBold-font-size: 1.25rem;
+        --display-xs-semiBold-font-weight: 600;
+        --display-xs-semiBold-line-height: 1.75rem;
+        --display-xs-semiBold-letter-spacing: 0rem;
+    }
+}
+
+
+.display-2xl-bold{
+    font-size: var(--display-2xl-bold-font-size);
+    font-weight: var(--display-2xl-bold-font-weight);
+    line-height: var(--display-2xl-bold-line-height);
+    letter-spacing: var(--display-2xl-bold-letter-spacing);
+}
+
+.display-2xl-semiBold{
+    font-size: var(--display-2xl-semiBold-font-size);
+    font-weight: var(--display-2xl-semiBold-font-weight);
+    line-height: var(--display-2xl-semiBold-line-height);
+    letter-spacing: var(--display-2xl-semiBold-letter-spacing);
+}
+
+.display-xl-bold{
+    font-size: var(--display-xl-bold-font-size);
+    font-weight: var(--display-xl-bold-font-weight);
+    line-height: var(--display-xl-bold-line-height);
+    letter-spacing: var(--display-xl-bold-letter-spacing);
+}
+
+.display-xl-semiBold{
+    font-size: var(--display-xl-semiBold-font-size);
+    font-weight: var(--display-xl-semiBold-font-weight);
+    line-height: var(--display-xl-semiBold-line-height);
+    letter-spacing: var(--display-xl-semiBold-letter-spacing);
+}
+
+.display-lg-bold{
+    font-size: var(--display-lg-bold-font-size);
+    font-weight: var(--display-lg-bold-font-weight);
+    line-height: var(--display-lg-bold-line-height);
+    letter-spacing: var(--display-lg-bold-letter-spacing);
+}
+
+.display-lg-semiBold{
+    font-size: var(--display-lg-semiBold-font-size);
+    font-weight: var(--display-lg-semiBold-font-weight);
+    line-height: var(--display-lg-semiBold-line-height);
+    letter-spacing: var(--display-lg-semiBold-letter-spacing);
+}
+
+.display-md-bold{
+    font-size: var(--display-md-bold-font-size);
+    font-weight: var(--display-md-bold-font-weight);
+    line-height: var(--display-md-bold-line-height);
+    letter-spacing: var(--display-md-bold-letter-spacing);
+}
+
+.display-md-semiBold{
+    font-size: var(--display-md-semiBold-font-size);
+    font-weight: var(--display-md-semiBold-font-weight);
+    line-height: var(--display-md-semiBold-line-height);
+    letter-spacing: var(--display-md-semiBold-letter-spacing);
+}
+
+.display-sm-bold{
+    font-size: var(--display-sm-bold-font-size);
+    font-weight: var(--display-sm-bold-font-weight);
+    line-height: var(--display-sm-bold-line-height);
+    letter-spacing: var(--display-sm-bold-letter-spacing);
+}
+
+.display-sm-semiBold{
+    font-size: var(--display-sm-semiBold-font-size);
+    font-weight: var(--display-sm-semiBold-font-weight);
+    line-height: var(--display-sm-semiBold-line-height);
+    letter-spacing: var(--display-sm-semiBold-letter-spacing);
+}
+
+.display-xs-bold{
+    font-size: var(--display-xs-bold-font-size);
+    font-weight: var(--display-xs-bold-font-weight);
+    line-height: var(--display-xs-bold-line-height);
+    letter-spacing: var(--display-xs-bold-letter-spacing);
+}
+
+.display-xs-semiBold{
+    font-size: var(--display-xs-semiBold-font-size);
+    font-weight: var(--display-xs-semiBold-font-weight);
+    line-height: var(--display-xs-semiBold-line-height);
+    letter-spacing: var(--display-xs-semiBold-letter-spacing);
+}
+
+.text-xl-bold{
+    font-size: var(--text-xl-bold-font-size);
+    font-weight: var(--text-xl-bold-font-weight);
+    line-height: var(--text-xl-bold-line-height);
+}
+
+.text-xl-semiBold{
+    font-size: var(--text-xl-semiBold-font-size);
+    font-weight: var(--text-xl-semiBold-font-weight);
+    line-height: var(--text-xl-semiBold-line-height);
+}
+
+.text-xl-medium{
+    font-size: var(--text-xl-medium-font-size);
+    font-weight: var(--text-xl-medium-font-weight);
+    line-height: var(--text-xl-medium-line-height);
+}
+
+.text-xl-regular{
+    font-size: var(--text-xl-regular-font-size);
+    font-weight: var(--text-xl-regular-font-weight);
+    line-height: var(--text-xl-regular-line-height);
+}
+
+.text-lg-bold{
+    font-size: var(--text-lg-bold-font-size);
+    font-weight: var(--text-lg-bold-font-weight);
+    line-height: var(--text-lg-bold-line-height);
+}
+
+.text-lg-semiBold{
+    font-size: var(--text-lg-semiBold-font-size);
+    font-weight: var(--text-lg-semiBold-font-weight);
+    line-height: var(--text-lg-semiBold-line-height);
+}
+
+.text-lg-medium{
+    font-size: var(--text-lg-medium-font-size);
+    font-weight: var(--text-lg-medium-font-weight);
+    line-height: var(--text-lg-medium-line-height);
+}
+
+.text-lg-regular{
+    font-size: var(--text-lg-regular-font-size);
+    font-weight: var(--text-lg-regular-font-weight);
+    line-height: var(--text-lg-regular-line-height);
+}
+
+.text-md-bold{
+    font-size: var(--text-md-bold-font-size);
+    font-weight: var(--text-md-bold-font-weight);
+    line-height: var(--text-md-bold-line-height);
+}
+
+.text-md-semiBold{
+    font-size: var(--text-md-semiBold-font-size);
+    font-weight: var(--text-md-semiBold-font-weight);
+    line-height: var(--text-md-semiBold-line-height);
+}
+
+.text-md-medium{
+    font-size: var(--text-md-medium-font-size);
+    font-weight: var(--text-md-medium-font-weight);
+    line-height: var(--text-md-medium-line-height);
+}
+
+.text-md-regular{
+    font-size: var(--text-md-regular-font-size);
+    font-weight: var(--text-md-regular-font-weight);
+    line-height: var(--text-md-regular-line-height);
+}
+
+.text-sm-bold{
+    font-size: var(--text-sm-bold-font-size);
+    font-weight: var(--text-sm-bold-font-weight);
+    line-height: var(--text-sm-bold-line-height);
+}
+
+.text-sm-semiBold{
+    font-size: var(--text-sm-semiBold-font-size);
+    font-weight: var(--text-sm-semiBold-font-weight);
+    line-height: var(--text-sm-semiBold-line-height);
+}
+
+.text-sm-medium{
+    font-size: var(--text-sm-medium-font-size);
+    font-weight: var(--text-sm-medium-font-weight);
+    line-height: var(--text-sm-medium-line-height);
+}
+
+.text-sm-regular{
+    font-size: var(--text-sm-regular-font-size);
+    font-weight: var(--text-sm-regular-font-weight);
+    line-height: var(--text-sm-regular-line-height);
+}
+
+.text-xs-bold{
+    font-size: var(--text-xs-bold-font-size);
+    font-weight: var(--text-xs-bold-font-weight);
+    line-height: var(--text-xs-bold-line-height);
+}
+
+.text-xs-semiBold{
+    font-size: var(--text-xs-semiBold-font-size);
+    font-weight: var(--text-xs-semiBold-font-weight);
+    line-height: var(--text-xs-semiBold-line-height);
+}
+
+.text-xs-medium{
+    font-size: var(--text-xs-medium-font-size);
+    font-weight: var(--text-xs-medium-font-weight);
+    line-height: var(--text-xs-medium-line-height);
+}
+
+.text-xs-regular{
+    font-size: var(--text-xs-regular-font-size);
+    font-weight: var(--text-xs-regular-font-weight);
+    line-height: var(--text-xs-regular-line-height);
+}
+@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
+
+:root{
+    /* Font Sizes */
+    --font-size-d-2xl: 4.5rem;
+    --font-size-d-xl: 3.75rem;
+    --font-size-d-lg: 3rem;
+    --font-size-d-md: 2.25rem;
+    --font-size-d-sm: 1.875rem;
+    --font-size-d-xs: 1.5rem;
+    --font-size-t-xl: 1.25rem;
+    --font-size-t-lg: 1.125rem;
+    --font-size-t-md: 1rem;
+    --font-size-t-sm: 0.875rem;
+    --font-size-t-xs: 0.75rem;
+
+    /* Font Weights */
+    --font-weight-bold: 700;
+    --font-weight-semi-bold: 600;
+    --font-weight-medium: 500;
+    --font-weight-regular: 400; 
+
+    /* Line Heights */
+    --font-line-height-d-2xl: 5rem;
+    --font-line-height-d-xl: 4.25rem;
+    --font-line-height-d-lg: 4.25rem; /**/
+    --font-line-height-d-md: 2.75rem;
+    --font-line-height-d-sm: 2.375rem;   
+    --font-line-height-d-xs: 2rem;   
+    --font-line-height-t-xl: 1.875rem;
+    --font-line-height-t-lg: 1.75rem;
+    --font-line-height-t-md: 1.5rem;
+    --font-line-height-t-sm: 1.25rem;
+    --font-line-height-t-xs: 1.125rem;
+
+    /* Letter Spacings */
+    --font-letter-spacing-d-2xl: -0.09rem;
+    --font-letter-spacing-d-xl: -0.075rem;
+    --font-letter-spacing-d-lg: -0.075rem;
+    --font-letter-spacing-d-md: -0.045rem;
+    --font-letter-spacing-d-sm: 0rem;
+    --font-letter-spacing-d-xs: 0rem;
+
+    /* Font Families */
+    --font-family-title: 'Sora';
+    --font-family-body: 'Sora';
+}
+
+/* Media queries for medium screens (tablet) */
+@media (max-width: 1199px) {
+    :root{
+        /* Font Sizes */
+        --font-size-d-2xl: 3.75rem;
+        --font-size-d-xl: 3.5rem;
+        --font-size-d-lg: 2.75rem;
+        --font-size-d-md: 2.25rem;
+        --font-size-d-sm: 1.875rem;
+        --font-size-d-xs: 1.5rem;
+
+        /* Line Heights */
+        --font-line-height-d-2xl: 4.25rem;
+        --font-line-height-d-xl: 3.75rem;
+        --font-line-height-d-lg: 2.4375rem;
+        --font-line-height-d-md: 2.75rem;
+        --font-line-height-d-sm: 2.375rem;
+        --font-line-height-d-xs: 2rem;
+
+        /* Letter Spacings */
+        --font-letter-spacing-2xl: -0.075rem;
+        --font-letter-spacing-xl: -0.065rem;
+        --font-letter-spacing-lg: -0.045rem;
+        --font-letter-spacing-md: -0.045rem;
+        --font-letter-spacing-sm: 0rem;
+        --font-letter-spacing-xs: 0rem;
+    }
+}
+
+/* Media queries for smaller screens (mobile) */
+@media (max-width: 743px) {
+    :root{
+        /* Font Sizes */
+        --font-size-d-2xl: 3rem;
+        --font-size-d-xl: 2.5rem;
+        --font-size-d-lg: 2rem;
+        --font-size-d-md: 1.75rem;
+        --font-size-d-sm: 1.5rem;
+        --font-size-d-xs: 1.25rem;
+
+        /* Line Heights */
+        --font-line-height-d-2xl: 3.375rem;
+        --font-line-height-d-xl: 2.875rem;
+        --font-line-height-d-lg: 2.5rem;
+        --font-line-height-d-md: 2.1375rem;
+        --font-line-height-d-sm: 2rem;
+        --font-line-height-d-xs: 1.75rem;
+
+        /* Letter Spacings */
+        --font-letter-spacing-2xl: -0.06rem;
+        --font-letter-spacing-xl: -0.05rem;
+        --font-letter-spacing-lg: -0.045rem;
+        --font-letter-spacing-md: 0rem;
+        --font-letter-spacing-sm: 0rem;
+        --font-letter-spacing-xs: 0rem;
+    }
+}
+
+.display-2xl-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-2xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-2xl);
+    letter-spacing: var(--font-letter-spacing-d-2xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-2xl-bold::before,
+.display-2xl-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-2xl-bold::before{
+    margin-bottom: -0.135em;
+}
+
+.display-2xl-bold::after{
+    margin-top: -0.205em;
+}
+
+.display-2xl-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-2xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-2xl);
+    letter-spacing: var(--font-letter-spacing-d-2xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-2xl-semi-bold::before,
+.display-2xl-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-2xl-semi-bold::before{
+    margin-bottom: -0.135em;
+}
+
+.display-2xl-semi-bold::after{
+    margin-top: -0.205em;
+}
+
+.display-xl-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-xl);
+    letter-spacing: var(--font-letter-spacing-d-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xl-bold::before,
+.display-xl-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xl-bold::before{
+    margin-bottom: -0.145em;
+}
+
+.display-xl-bold::after{
+    margin-top: -0.215em;
+}
+
+.display-xl-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-xl);
+    letter-spacing: var(--font-letter-spacing-d-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xl-semi-bold::before,
+.display-xl-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xl-semi-bold::before{
+    margin-bottom: -0.145em;
+}
+
+.display-xl-semi-bold::after{
+    margin-top: -0.215em;
+}
+
+.display-lg-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-lg);
+    letter-spacing: var(--font-letter-spacing-d-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-lg-bold::before,
+.display-lg-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-lg-bold::before{
+    margin-bottom: -0.015em;
+}
+
+.display-lg-bold::after{
+    margin-top: -0.095em;
+}
+
+.display-lg-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-lg);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-lg);
+    letter-spacing: var(--font-letter-spacing-d-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-lg-semi-bold::before,
+.display-lg-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-lg-semi-bold::before{
+    margin-bottom: -0.015em;
+}
+
+.display-lg-semi-bold::after{
+    margin-top: -0.095em;
+}
+
+.display-md-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-md);
+    letter-spacing: var(--font-letter-spacing-d-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-md-bold::before,
+.display-md-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-md-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-md-bold::after{
+    margin-top: -0.255em;
+}
+
+.display-md-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-md);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-md);
+    letter-spacing: var(--font-letter-spacing-d-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-md-semi-bold::before,
+.display-md-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-md-semi-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-md-semi-bold::after{
+    margin-top: -0.255em;
+}
+
+.display-sm-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-sm);
+    letter-spacing: var(--font-letter-spacing-d-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-sm-bold::before,
+.display-sm-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-sm-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-sm-bold::after{
+    margin-top: -0.255em;
+}
+
+.display-sm-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-sm);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-sm);
+    letter-spacing: var(--font-letter-spacing-d-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-sm-semi-bold::before,
+.display-sm-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-sm-semi-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-sm-semi-bold::after{
+    margin-top: -0.255em;
+}
+
+.display-xs-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-xs);
+    letter-spacing: var(--font-letter-spacing-d-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xs-bold::before,
+.display-xs-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xs-bold::before{
+    margin-bottom: -0.199em;
+}
+
+.display-xs-bold::after{
+    margin-top: -0.195em; /* Continue from here */
+}
+
+.display-xs-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-xs);
+    letter-spacing: var(--font-letter-spacing-d-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xs-semi-bold::before,
+.display-xs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xs-semi-bold::before{
+    margin-bottom: -0.259em;
+}
+
+.display-xs-semi-bold::after{
+    margin-top: -0.295em;
+}
+
+.text-xl-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-bold::before,
+.text-xl-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-bold::before{
+    margin-bottom: -0.329em;
+}
+
+.text-xl-bold::after{
+    margin-top: -0.359em;
+}
+
+.text-xl-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-semi-bold::before,
+.text-xl-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-semi-bold::before{
+    margin-bottom: -0.329em;
+}
+
+.text-xl-semi-bold::after{
+    margin-top: -0.359em;
+}
+
+.text-xl-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-medium::before,
+.text-xl-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-medium::before{
+    margin-bottom: -0.339em;
+}
+
+.text-xl-medium::after{
+    margin-top: -0.399em;
+}
+
+.text-xl-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-regular::before,
+.text-xl-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-regular::before{
+    margin-bottom: -0.339em;
+}
+
+.text-xl-regular::after{
+    margin-top: -0.399em;
+}
+
+.text-lg-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-bold::before,
+.text-lg-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-bold::before{
+    margin-bottom: -0.339em;
+}
+
+.text-lg-bold::after{
+    margin-top: -0.399em;
+}
+
+.text-lg-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-semi-bold::before,
+.text-lg-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-semi-bold::before{
+    margin-bottom: -0.339em;
+}
+
+.text-lg-semi-bold::after{
+    margin-top: -0.399em;
+}
+
+.text-lg-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-medium::before,
+.text-lg-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-medium::before{
+    margin-bottom: -0.349em;
+}
+
+.text-lg-medium::after{
+    margin-top: -0.389em;
+}
+
+.text-lg-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-regular::before,
+.text-lg-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-regular::before{
+    margin-bottom: -0.349em;
+}
+
+.text-lg-regular::after{
+    margin-top: -0.389em;
+}
+
+.text-md-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-bold::before,
+.text-md-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-md-bold::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-bold::after{
+    margin-top: -0.389em;
+}
+
+.text-md-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-semi-bold::before,
+.text-md-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-md-semi-bold::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-semi-bold::after{
+    margin-top: -0.389em;
+}
+
+.text-md-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-medium::before,
+.text-md-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-md-medium::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-medium::after{
+    margin-top: -0.389em;
+}
+
+.text-md-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-regular::before,
+.text-md-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-md-regular::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-regular::after{
+    margin-top: -0.389em;
+}
+
+.text-sm-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-sm-bold::before,
+.text-sm-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-bold::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-bold::after{
+    margin-top: -0.349em;
+}
+
+.text-sm-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-sm-semi-bold::before,
+.text-sm-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-semi-bold::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-semi-bold::after{
+    margin-top: -0.349em;
+}
+
+.text-sm-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    position: relative;
+    display: inline-block;
+}
+
+.text-sm-medium::before,
+.text-sm-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-medium::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-medium::after{
+    margin-top: -0.299em;
+}
+
+.text-sm-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    position: relative;
+    display: inline-block;
+}
+
+.text-sm-regular::before,
+.text-sm-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-regular::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-regular::after{
+    margin-top: -0.299em;
+}
+
+.text-xs-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-bold::before,
+.text-xs-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xs-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xs-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-semi-bold::before,
+.text-xs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-semi-bold::before{
+    margin-bottom: -0.321em;
+}
+
+.text-xs-semi-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xs-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-medium::before,
+.text-xs-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-medium::before{
+    margin-bottom: -0.199em;
+}
+
+.text-xs-medium::after{
+    margin-top: -0.196em;
+}
+
+.text-xs-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-regular::before,
+.text-xs-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-regular::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xs-regular::after{
+    margin-top: -0.396em;
+}
+
+div{
+    display: inline-flex;
+    padding: var(--spacing-none) var(--spacing-1);
+    align-items: center;
+    gap: var(--spacing-none);
+    flex-shrink: 0;
+    text-align: center;
+    font-style: normal;
+    font-weight: var(--font-weight-medium, 500);
+    letter-spacing: 0.5px;
+}
+
+.label {
+    font-family: var(--font-family-body);
+    padding: 2px;
+}
+
+.icon {
+    display: flex;
+    align-items: center;
+}
+
+div.sm{
+    height: 22px;
+    min-height: 22px;
+    font-family: sans-serif;
+    font-size: var(--text-xs-medium-font-size, 12px);
+    line-height: var(--text-xs-medium-line-height, 18px); 
+}
+
+div.md {
+    height: var(--spacing-6);
+    min-height: var(--spacing-6);
+    font-family: sans-serif;
+    font-size: var(--text-sm-medium-font-size, 14px);
+    line-height: var(--text-sm-medium-line-height, 20px); 
+}
+
+div.lg {
+    height: 28px;
+    min-height: 28px;
+    padding: var(--spacing-none) var(--spacing-2);
+    font-family: sans-serif;
+    font-size: var(--text-sm-medium-font-size, 14px);
+    line-height: var(--text-sm-medium-line-height, 1.25rem);
+}
+
+div.pill_color {
+    border-radius: var(--rounded-full);
+}
+
+div.pill_color.gray,
+.badge_color.gray {
+    border: 1px solid #E3E8EF /*var(--color-boarder-subtler)*/;
+    background: #EEF2F6 /*var(--color-background-gray-subtler)*/;
+    color: #4B5565;
+}
+
+.pill_color.primary,
+.badge_color.primary {
+    border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;
+    background: #E4F0FC /*var(--color-background-information-subtlest)*/;
+    color: #212C65;
+}
+
+.pill_color.error,
+.badge_color.error {
+    border: 1px solid #FDE3E5 /*var(--color-border-danger-subtler)*/;
+    background: #FEF1F2 /*var(--color-background-danger-subtlest)*/;
+    color: #B51726;
+}
+
+.pill_color.warning,
+.badge_color.warning {
+    border: 1px solid #FEF0C7;
+    background: #FFFAEB;
+    color: #DC6803;
+}
+
+.pill_color.success,
+.badge_color.success {
+    border: 1px solid #DCFAE6;
+    background: #ECFDF3;
+    color: #079455;
+}
+
+.pill_color.discovery,
+.badge_color.discovery {
+    border: 1px solid #E0F2FE;
+    background: #F0F9FF;
+    color: #0086C9;
+}
+
+.pill_color.information,
+.badge_color.information {
+    border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;
+    background: #E4F0FC /*var(--color-background-information-subtlest)*/;
+    color: #064E94;
+}
+
+.pill_color.pink,
+.badge_color.pink {
+    border: 1px solid #FCE7F6;
+    background: #FDF2FA;
+    color: #DD2590;
+}
+
+.pill_color.purple,
+.badge_color.purple {
+    border: 1px solid #EBE9FE;
+    background: #F4F3FF;
+    color: #6938EF;
+}
+
+.pill_color svg,
+.badge_color svg,
+.pill_outline svg,
+.badge_modern svg {
+    width: var(--spacing-2);
+    height: var(--spacing-2);
+    display: flex;
+    align-items: center;
+    fill: currentColor; /* Use the current text color */
+    stroke: currentColor;
+}
+
+.gray svg path {
+    fill: #4B5565;
+    stroke:  #4B5565 /*var(--color-icon)*/;
+}
+
+.primary svg path {
+    fill: #212C65;
+    stroke: #212C65;
+}
+
+.error svg path {
+    fill: #B51726;
+    stroke: #B51726;
+}
+
+.warning svg path {
+    fill: #DC6803;
+    stroke: #DC6803;
+}
+
+.success svg path{
+    fill: #079455;
+    stroke: #079455;
+}
+
+.discovery svg path {
+    fill: #0BA5EC;
+    stroke: #0BA5EC/*Blue light/500*/;
+}
+
+.information svg path {
+    fill: #064E94;
+    stroke: #064E94;
+}
+
+.pink svg path{
+    fill: #DD2590;
+    stroke: #DD2590;
+}
+
+.purple svg path {
+    fill: #6938EF;
+    stroke: #6938EF;
+}
+
+.pill_outline {
+    border-radius: var(--rounded-full);
+}
+
+.pill_outline.gray {
+    border: 1.5px solid #4B5565;
+    color: #4B5565;
+}
+
+.pill_outline.primary {
+    border: 1.5px solid #212C65;
+    color:#212C65;
+}
+
+.pill_outline.error {
+    border: 1.5px solid #B51726;
+    color:#B51726;
+}
+
+.pill_outline.warning {
+    border: 1.5px solid #DC6803;
+    color:#DC6803;
+}
+
+.pill_outline.success {
+    border: 1.5px solid #079455;
+    color:#079455;
+}
+
+.pill_outline.discovery {
+    border: 1.5px solid #0086C9;
+    color: #0086C9;
+}
+
+.pill_outline.information {
+    border: 1.5px solid #064E94;
+    color: #064E94;
+}
+
+.pill_outline.pink {
+    border: 1.5px solid #DD2590;
+    color: #DD2590;
+}
+
+.pill_outline.purple {
+    border: 1.5px solid #6938EF;
+    color: #6938EF;
+}
+
+.badge_color {
+    border-radius: var(--rounded-xs);
+}
+
+.badge_modern {
+    border-radius: var(--rounded-xs);
+    border: 1px solid #E3E8EF;
+
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #4B5565;
+}
+
+.icon img {
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+    fill: currentColor;
+    stroke: currentColor;
+    /* Color handling for SVGs */
+}
+
+.icon.left-icon img,
+.icon.right-icon img {
+    color: currentColor; /* Ensures that the image color uses currentColor */
+}
+
+.gray .icon img {
+    color: #4B5565;
+}
+
+.primary .icon img {
+    color: #212C65;
+}
+
+.error .icon img {
+    color: #B51726;
+}
+
+.warning .icon img {
+    color: #DC6803;
+}
+
+.success .icon img {
+    color: #079455;
+}
+
+.discovery .icon img {
+    color: #0BA5EC;
+}
+
+.information .icon img {
+    color: #064E94;
+}
+
+.pink .icon img {
+    color: #DD2590;
+}
+
+.purple .icon img {
+    color: #6938EF;
+}
+
+#icon-only {
+    display: flex;
+    padding: var(--spacing-none);
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-1);
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+    flex-shrink: 0;
+    border-radius: var(--rounded-full);
+}