globuswebcomponents 2.11.1 → 2.12.1

package/dist/collection/components/gb-rich-text/gb-rich-text.css

@@ -0,0 +1,2916 @@
+/* @import 'tailwind.css'; */
+@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
+/**
+ * Global styles for portal-based dropdowns
+ * Applied outside shadow DOM context
+ */
+
+.portal_dropdown_wrapper {
+  width: 9.5rem;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-md);
+  position: absolute;
+  z-index: 9999; /* High z-index to appear above sticky columns */
+  overflow: hidden;
+}
+
+.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {
+  display: block;
+  width: 100%;
+}
+
+/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {
+  background: var(--color-background-gray-subtler, #eef2f6);
+} */
+
+
+:root {
+  /* --------------------------------------Primary Colors--------------------------------------------- */
+  /* base color palette */
+  --base-white: #fff;
+  --base-black: #000;
+
+  /* gray color palette  */
+  --gray-25: #f9fafb;
+  --gray-50: #f6f8fa;
+  --gray-100: #eef2f6;
+  --gray-200: #e3e8ef;
+  --gray-300: #cdd5df;
+  --gray-400: #808c9e;
+  --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--------------------------------------  */
+  /* 0% opacity */
+  /* White */
+  --white-opacity0: rgba(255, 255, 255, 0);
+
+  /* Gray */
+  --gray25-opacity0: rgba(249, 250, 251, 0);
+  --gray900-opacity0: rgba(18, 25, 38, 0);
+  --gray950-opacity0: rgba(13, 18, 28, 0);
+
+  /* 20% opacity */
+  /* White */
+  --white-opacity20: rgba(255, 255, 255, 0.2);
+
+  /* Dark Blue */
+  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
+  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
+
+  /* Gray */
+  --gray25-opacity20: rgba(249, 250, 251, 0.2);
+  --gray900-opacity20: rgba(18, 25, 38, 0.2);
+  --gray950-opacity20: rgba(13, 18, 28, 0.2);
+
+  /* 30% opacity */
+  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+  /* 40% opacity */
+  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
+  /* 50% opacity */
+  /* White */
+  --white-opacity50: rgba(255, 255, 255, 0.5);
+
+  /* Gray */
+  --gray25-opacity50: rgba(249, 250, 251, 0.5);
+  --gray900-opacity50: rgba(18, 25, 38, 0.5);
+  --gray950-opacity50: rgba(13, 18, 28, 0.5);
+
+  /* ------------------------------------------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-300);
+  }
+
+  [data-theme='light'] {
+    --color-text-subtle: var(--gray-500);
+  }
+
+  [data-theme='dark'] {
+    --color-text-subtle: var(--gray-400);
+  }
+
+  [data-theme='light'] {
+    --color-text-disabled: var(--gray-400);
+  }
+
+  [data-theme='dark'] {
+    --color-text-disabled: var(--gray-500);
+  }
+
+  [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-100);
+  }
+
+  [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-bold: var(--brandRed-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-danger-bold: var(--brandRed-100);
+  }
+
+  [data-theme='light'] {
+    --color-text-danger: var(--brandRed-700);
+  }
+
+  [data-theme='dark'] {
+    --color-text-danger: var(--brandRed-200);
+  }
+
+  [data-theme='light'] {
+    --color-text-danger-subtle: var(--brandRed-600);
+  }
+
+  [data-theme='dark'] {
+    --color-text-danger-subtle: var(--brandRed-300);
+  }
+
+  [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-warning-bold: var(--warning-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-warning-bold: var(--warning-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-subtle: var(--warning-500);
+  }
+
+  [data-theme='dark'] {
+    --color-text-warning-subtle: var(--warning-400);
+  }
+
+  [data-theme='light'] {
+    --color-text-success-bold: var(--success-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-success-bold: var(--success-100);
+  }
+
+  [data-theme='light'] {
+    --color-text-success: var(--success-600);
+  }
+
+  [data-theme='dark'] {
+    --color-text-success: var(--success-300);
+  }
+
+  [data-theme='light'] {
+    --color-text-success-subtle: var(--success-600);
+  }
+
+  [data-theme='dark'] {
+    --color-text-success-subtle: var(--success-300);
+  }
+
+  [data-theme='light'] {
+    --color-text-discovery-bold: var(--lightBlue-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-discovery-bold: var(--lightBlue-100);
+  }
+
+  [data-theme='light'] {
+    --color-text-discovery: var(--lightBlue-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-discovery: var(--lightBlue-100);
+  }
+
+  [data-theme='light'] {
+    --color-text-discovery-subtle: var(--lightBlue-400);
+  }
+
+  [data-theme='dark'] {
+    --color-text-discovery-subtle: var(--lightBlue-100);
+  }
+
+  [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-information: var(--blue-600);
+  }
+
+  [data-theme='dark'] {
+    --color-text-information: var(--blue-300);
+  }
+
+  [data-theme='light'] {
+    --color-text-information-subtle: var(--blue-500);
+  }
+
+  [data-theme='dark'] {
+    --color-text-information-subtle: var(--blue-400);
+  }
+
+  [data-theme='light'] {
+    --color-text-purple-bold: var(--purple-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-purple-bold: var(--purple-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-subtle: var(--purple-500);
+  }
+
+  [data-theme='dark'] {
+    --color-text-purple-subtle: var(--purple-400);
+  }
+
+  [data-theme='light'] {
+    --color-text-pink-bold: var(--pink-800);
+  }
+
+  [data-theme='dark'] {
+    --color-text-pink-bold: var(--pink-100);
+  }
+
+  [data-theme='light'] {
+    --color-text-pink: var(--pink-600);
+  }
+
+  [data-theme='dark'] {
+    --color-text-pink: var(--pink-300);
+  }
+
+  [data-theme='light'] {
+    --color-text-pink-subtle: var(--pink-500);
+  }
+
+  [data-theme='dark'] {
+    --color-text-pink-subtle: var(--pink-400);
+  }
+
+  /* --------------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(--lightBlue-600);
+  }
+
+  [data-theme='dark'] {
+    --color-link-visited: var(--lightBlue-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-300);
+  }
+
+  [data-theme='light'] {
+    --color-icon-subtle: var(--gray-500);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-subtle: var(--gray-400);
+  }
+
+  [data-theme='light'] {
+    --color-icon-disabled: var(--gray-400);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-disabled: var(--gray-500);
+  }
+
+  [data-theme='light'] {
+    --color-icon-inverse: var(--base-white);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-inverse: var(--gray-800);
+  }
+
+  [data-theme='light'] {
+    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-brandDarkBlue: 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-selected: var(--blue-500);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-selected: var(--blue-300);
+  }
+
+  [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-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-warning-bold: var(--warning-800);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-warning-bold: var(--warning-100);
+  }
+
+  [data-theme='light'] {
+    --color-icon-warning: var(--warning-600);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-warning: var(--warning-300);
+  }
+
+  [data-theme='light'] {
+    --color-icon-success-bold: var(--success-800);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-success-bold: var(--success-100);
+  }
+
+  [data-theme='light'] {
+    --color-icon-success: var(--success-600);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-success: var(--success-300);
+  }
+
+  [data-theme='light'] {
+    --color-icon-discovery-bold: var(--lightBlue-800);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-discovery-bold: var(--lightBlue-100);
+  }
+
+  [data-theme='light'] {
+    --color-icon-discovery: var(--lightBlue-600);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-discovery: var(--lightBlue-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-information: var(--blue-600);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-information: var(--blue-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-purple: var(--purple-600);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-purple: var(--purple-300);
+  }
+
+  [data-theme='light'] {
+    --color-icon-pink-bold: var(--pink-800);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-pink-bold: var(--pink-100);
+  }
+
+  [data-theme='light'] {
+    --color-icon-pink: var(--pink-600);
+  }
+
+  [data-theme='dark'] {
+    --color-icon-pink: var(--pink-300);
+  }
+
+  /* ----------------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-brandDarkBlue: var(--brandDarkBlue-500);
+  }
+
+  [data-theme='dark'] {
+    --color-border-brandDarkBlue: 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-success-bold: var(--success-800);
+  }
+
+  [data-theme='dark'] {
+    --color-border-success-bold: var(--success-100);
+  }
+
+  [data-theme='light'] {
+    --color-border-success: var(--success-600);
+  }
+
+  [data-theme='dark'] {
+    --color-border-success: var(--success-300);
+  }
+
+  [data-theme='light'] {
+    --color-border-success-subtle: var(--success-200);
+  }
+
+  [data-theme='dark'] {
+    --color-border-success-subtle: var(--success-800);
+  }
+
+  [data-theme='light'] {
+    --color-border-success-subtler: var(--success-100);
+  }
+
+  [data-theme='dark'] {
+    --color-border-success-subtler: var(--success-900);
+  }
+
+  [data-theme='light'] {
+    --color-border-discovery-bold: var(--lightBlue-800);
+  }
+
+  [data-theme='dark'] {
+    --color-border-discovery-bold: var(--lightBlue-100);
+  }
+
+  [data-theme='light'] {
+    --color-border-discovery: var(--lightBlue-600);
+  }
+
+  [data-theme='dark'] {
+    --color-border-discovery: var(--lightBlue-300);
+  }
+
+  [data-theme='light'] {
+    --color-border-discovery-subtle: var(--lightBlue-200);
+  }
+
+  [data-theme='dark'] {
+    --color-border-discovery-subtle: var(--lightBlue-800);
+  }
+
+  [data-theme='light'] {
+    --color-border-discovery-subtler: var(--lightBlue-100);
+  }
+
+  [data-theme='dark'] {
+    --color-border-discovery-subtler: var(--lightBlue-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-btn-disabled: var(--gray-100);
+  }
+
+  [data-theme='dark'] {
+    --color-background-btn-disabled: var(--gray-700);
+  }
+
+  [data-theme='light'] {
+    --color-background-selected: var(--blue-500);
+  }
+
+  [data-theme='dark'] {
+    --color-background-selected: var(--blue-300);
+  }
+
+  [data-theme='light'] {
+    --color-background-brandDarkblue: var(--brandDarkBlue-500);
+  }
+
+  [data-theme='dark'] {
+    --color-background-brandDarkblue: 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-950);
+  }
+
+  [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(--lightBlue-800);
+  }
+
+  [data-theme='dark'] {
+    --color-background-discovery-bold: var(--lightBlue-100);
+  }
+
+  [data-theme='light'] {
+    --color-background-discovery: var(--lightBlue-600);
+  }
+
+  [data-theme='dark'] {
+    --color-background-discovery: var(--lightBlue-200);
+  }
+
+  [data-theme='light'] {
+    --color-background-discovery-subtle: var(--lightBlue-200);
+  }
+
+  [data-theme='dark'] {
+    --color-background-discovery-subtle: var(--lightBlue-800);
+  }
+
+  [data-theme='light'] {
+    --color-background-discovery-subtler: var(--lightBlue-100);
+  }
+
+  [data-theme='dark'] {
+    --color-background-discovery-subtler: var(--lightBlue-900);
+  }
+
+  [data-theme='light'] {
+    --color-background-discovery-subtlest: var(--lightBlue-50);
+  }
+
+  [data-theme='dark'] {
+    --color-background-discovery-subtlest: var(--lightBlue-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-theme='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);
+  }
+
+  [data-theme='light'] {
+    --color-blanket-subtle: var(--darkBlue500-opacity30);
+  }
+
+  [data-theme='dark'] {
+    --color-blanket-subtle: var(--darkBlue200-opacity30);
+  }
+
+  [data-theme='light'] {
+    --color-blanket-subtler: var(--darkBlue500-opacity40);
+  }
+
+  [data-theme='dark'] {
+    --color-blanket-subtler: var(--darkBlue200-opacity40);
+  }
+
+  /* ----------------Skeleton Color --------------- */
+  [data-theme='light'] {
+    --color-skeleton: var(--gray-200);
+  }
+
+  [data-theme='dark'] {
+    --color-skeleton: var(--gray-800);
+  }
+
+  [data-theme='light'] {
+    --color-skeleton-bold: var(--gray-300);
+  }
+
+  [data-theme='dark'] {
+    --color-skeleton-bold: var(--gray-700);
+  }
+
+  /* ----------------Surface Color --------------- */
+  [data-theme='light'] {
+    --color-surface-bold: var(--gray-50);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-bold: 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);
+  }
+
+  /* ----------------Transparent Color --------------- */
+  [data-theme='light'] {
+    --color-surface-transparent50: var(--white-opacity50);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-transparent50: var(--gray900-opacity50);
+  }
+
+  [data-theme='light'] {
+    --color-surface-transparent20: var(--white-opacity20);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-transparent20: var(--gray900-opacity20);
+  }
+
+  [data-theme='light'] {
+    --color-surface-transparent-full: var(--white-opacity0);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-transparent-full: var(--gray900-opacity0);
+  }
+
+  [data-theme='light'] {
+    --color-surface-bold-transparent50: var(--gray25-opacity50);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-bold-transparent50: var(--gray950-opacity50);
+  }
+
+  [data-theme='light'] {
+    --color-surface-bold-transparent20: var(--gray25-opacity20);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-bold-transparent20: var(--gray950-opacity20);
+  }
+
+  [data-theme='light'] {
+    --color-surface-bold-transparent-full: var(--gray25-opacity0);
+  }
+
+  [data-theme='dark'] {
+    --color-surface-bold-transparent-full: var(--gray950-opacity0);
+  }
+}
+
+/* -----------------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.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 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);
+}
+
+/* Spacing Styles */
+: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;
+}
+
+/* Typography Styles */
+
+: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-size-t-xxs: 0.625rem;
+
+  /* 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: 3.75rem;
+  --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: 2rem;
+  --font-line-height-t-lg: 1.875rem;
+  --font-line-height-t-md: 1.688rem;
+  --font-line-height-t-sm: 1.5rem;
+  --font-line-height-t-xs: 1.25rem;
+  --font-line-height-t-xxs: 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: 0;
+  --font-letter-spacing-d-xs: 0;
+  --font-letter-spacing-d-xxs: 0;
+
+  /* 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.285em;
+}
+
+.text-xs-medium::after {
+  margin-top: -0.396em;
+}
+
+.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;
+}
+
+.text-xxs-bold {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-t-xxs);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--font-line-height-t-xxs);
+  margin: var(--spacing-none);
+  padding: var(--spacing-none);
+  display: inline-block;
+  position: relative;
+}
+
+.text-xxs-bold::before,
+.text-xxs-bold::after {
+  content: '';
+  display: table;
+}
+
+.text-xxs-bold::before {
+  margin-bottom: -0.291em;
+}
+
+.text-xxs-bold::after {
+  margin-top: -0.416em;
+}
+
+.text-xxs-semi-bold {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-t-xxs);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--font-line-height-t-xxs);
+  margin: var(--spacing-none);
+  padding: var(--spacing-none);
+  display: inline-block;
+  position: relative;
+}
+
+.text-xxs-semi-bold::before,
+.text-xxs-semi-bold::after {
+  content: '';
+  display: table;
+}
+
+.text-xxs-semi-bold::before {
+  margin-bottom: -0.291em;
+}
+
+.text-xxs-semi-bold::after {
+  margin-top: -0.416em;
+}
+
+.text-xxs-medium {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-t-xxs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-t-xxs);
+  margin: var(--spacing-none);
+  padding: var(--spacing-none);
+  display: inline-block;
+  position: relative;
+}
+
+.text-xxs-medium::before,
+.text-xxs-medium::after {
+  content: '';
+  display: table;
+}
+
+.text-xxs-medium::before {
+  margin-bottom: -0.291em;
+}
+
+.text-xxs-medium::after {
+  margin-top: -0.416em;
+}
+
+.text-xxs-regular {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-t-xxs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-t-xxs);
+  margin: var(--spacing-none);
+  padding: var(--spacing-none);
+  display: inline-block;
+  position: relative;
+}
+
+.text-xxs-regular::before,
+.text-xxs-regular::after {
+  content: '';
+  display: table;
+}
+
+.text-xxs-regular::before {
+  margin-bottom: -0.291em;
+}
+
+.text-xxs-regular::after {
+  margin-top: -0.416em;
+}
+
+/* Button slot styles */
+/* .slotted_button_text.primary {
+  color: var(--color-text-inverse, #ffffff) !important;
+}
+
+.slotted_button_text.secondary_gray {
+  color: var(--color-text, #4b5565) !important;
+}
+
+.slotted_button_text.secondary_color {
+  color: var(--color-text-brandRed, #e21b2e) !important;
+}
+
+.slotted_button_text.tertiary_gray {
+  color: var(--color-text, #4b5565) !important;
+}
+
+.slotted_button_text.tertiary_color {
+  color: var(--color-text-brandRed, #e21b2e) !important;
+}
+
+.slotted_button_text.link_gray {
+  color: var(--color-text, #4b5565) !important;
+}
+
+.slotted_button_text.link_color {
+  color: var(--color-link, #075db2) !important;
+}
+
+.slotted_button_text.primary.destructive {
+  color: var(--color-text-inverse, #ffffff) !important;
+}
+
+#slotted_button_text.primary.disabled,
+#slotted_button_text.secondary_gray.disabled,
+#slotted_button_text.secondary_color.disabled,
+#slotted_button_text.tertiary_gray.disabled,
+#slotted_button_text.tertiary_color.disabled,
+#slotted_button_text.link_gray.disabled,
+#slotted_button_text.link_color.disabled {
+  color: var(--color-text-disabled, #9aa4b2) !important;
+}
+
+#slotted_button_text.secondary_gray.default.destructive,
+#slotted_button_text.secondary_color.default.destructive,
+#slotted_button_text.tertiary_gray.default.destructive,
+#slotted_button_text.tertiary_color.default.destructive,
+#slotted_button_text.link_gray.default.destructive,
+#slotted_button_text.link_color.default.destructive {
+  color: var(--color-text-danger, #b51726) !important;
+} */
+
+
+.gb-rich-text {
+  display: flex;
+  width: 100%;
+  height: 15.375rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+/* === Wrapper === */
+.gb-rich-text__wrapper {
+  position: relative;
+  width: 100%;
+  background: var(--color-background-card, #FFFFFF);
+  border: 1px solid var(--color-border-input, #cdd5df);
+  border-radius: 0.5rem;
+  transition: border-color 0.2s;
+}
+
+/* === Focus State (purple glow) === */
+.gb-rich-text--focused .gb-rich-text__wrapper {
+  border: 1.3px solid var(--color-border-selected, #075db2);
+  /* box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15); */
+}
+
+/* === Error State === */
+.gb-rich-text--error .gb-rich-text__wrapper {
+  border: 1.3px solid var(--color-border-danger, #B51726);
+}
+.gb-rich-text--error .gb-rich-text__hint {
+  color: var(--color-text-danger, #B51726);
+}
+
+/* === Toolbar === */
+.gb-rich-text__toolbar {
+  display: flex;
+  gap: 2px;
+  padding: 6px 8px;
+  /* border-bottom: 1px solid #2a2a40; */
+}
+.gb-rich-text__toolbar button {
+  background: none;
+  border: none;
+  color: #9090b0;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.gb-rich-text__toolbar button:hover,
+.gb-rich-text__toolbar button.active {
+  background: #2a2a50;
+  color: #fff;
+}
+
+/* === Editor Content Area === */
+.gb-rich-text__content .ProseMirror {
+  /* margin-left: 1rem; */
+  padding: 10px 12px;
+  min-height: 12.5rem;
+  color: var(--color-text, #4b5565);
+  font-family: var(--Font-Family-Body, Sora);
+  font-size: var(--Font-Size-T-md, 1rem);
+  font-style: normal;
+  font-weight: var(--Font-Weight-Regular, 400);
+  line-height: var(--Font-Line-height-T-md, 1.6875rem); /* 168.75% */
+  letter-spacing: var(--Font-Letter-spacing-T-md, 0);
+  outline: none;
+}
+
+/* === Placeholder === */
+.gb-rich-text__content .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--color-text-disabled, #808c9e);
+  pointer-events: none;
+  /* float: left; */
+  height: 0;
+  font-family: var(--Font-Family-Body, Sora);
+  font-size: var(--Font-Size-T-md, 1rem);
+  font-style: normal;
+  font-weight: var(--Font-Weight-Regular, 400);
+  line-height: var(--Font-Line-height-T-md, 1.6875rem); /* 168.75% */
+  letter-spacing: var(--Font-Letter-spacing-T-md, 0);
+}
+
+.gb-rich-text__content .ProseMirror ul,
+.gb-rich-text__content .ProseMirror ol {
+  margin-left: 1rem;
+}
+
+/* === Hint Text === */
+.gb-rich-text__hint {
+  color: var(--color-text-subtle, #697586);
+}
+
+/* === Label === */
+.gb-rich-text__label {
+  color: var(--color-text, #4b5565);
+}
+
+.alert_circle{
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+}