@font-face {
   font-family: "Roobert PRO_Bold";
   src: url("../fonts/RoobertPRO-Bold.ttf");
   font-weight: 700;
 }

 @font-face {
   font-family: "Roobert PRO_Regular";
   src: url("../fonts/RoobertPRO-Regular.ttf");
   font-weight: 400;
 }

 :root {
   /* Color */
   --color-dimgray: #737373;
   --color-lightsteelblue: #bec9ff;
   --color-gray-200: rgba(255, 255, 255, 0.12);
   --color-gray-100: rgba(255, 255, 255, 0.8);
   --color-mediumslateblue: #7e56d9;

   /* Gap */
   --gap-8: 8px;
   --gap-10: 10px;
   --gap-16: 16px;
   --gap-32: 32px;

   /* Padding */
   --padding-10: 10px;
   --padding-18: 18px;

   /* Font */
   --font-roobert-pro: Roobert PRO_Bold;
   --font-roobert-pro-reg: Roobert PRO_Regular;

   /* FontSize */
   --font-size-16: 16px;

   --Shadows-shadow-lg:
     0px 12px 16px -4px rgba(10, 13, 18, 0.08),
     0px 4px 6px -2px rgba(10, 13, 18, 0.03),
     0px 2px 2px -1px rgba(10, 13, 18, 0.04);
   --Shadows-shadow-xs-skeuomorphic:
     0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset,
     0px -2px 0px rgba(10, 13, 18, 0.05) inset,
     0px 1px 2px rgba(10, 13, 18, 0.05);

   /* Figma Variables */

   /* Spacing */
   --radius-none: 0px;
   --spacing-xxs: 2px;
   --spacing-xs: 4px;
   --spacing-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 10px;
   --spacing-lg: 12px;
   --Font-size-text-sm: 14px;
   --spacing-xl: 16px;
   --Font-size-text-md: 16px;
   --radius-2xl: 16px;
   --Font-size-text-lg: 18px;
   --spacing-2xl: 20px;
   --Font-size-text-xl: 20px;
   --Line-height-text-sm: 20px;
   --Line-height-text-md: 24px;
   --spacing-3xl: 24px;
   --Line-height-text-lg: 28px;
   --Line-height-text-xl: 30px;
   --Font-size-display-sm: 30px;
   --container-padding-desktop: 32px;
   --spacing-4xl: 32px;
   --Font-size-display-md: 36px;
   --Line-height-display-sm: 38px;
   --spacing-5xl: 40px;
   --Line-height-display-md: 44px;
   --spacing-6xl: 48px;
   --Font-size-display-lg: 48px;
   --Space-1200: 48px;
   --Line-height-display-lg: 60px;
   --spacing-7xl: 64px;
   --Font-size-display-2xl: 72px;
   --Line-height-display-2xl: 90px;
   --Space-2400: 96px;
   --spacing-9xl: 96px;
   --width-sm: 480px;
   --width-xl: 768px;
   --width-2xl: 1024px;
   --container-max-width-desktop: 1280px;
   --radius-full: 9999px;

   /* Color */
   --Colors-Foreground-fg-quaternary-400: #a4a7ae;
   --Colors-Text-text-quaternary-500: #717680;
   --Colors-Border-border-secondary: #e9eaeb;
   --Miscellaneous-Sidebar-Fill-Selected: #fff;
   --Colors-Text-text-tertiary-on-brand: #e9d7fe;
   --Colors-Background-bg-quaternary: #e9eaeb;
   --Colors-Background-bg-tertiary: #f5f5f5;
   --Component-colors-Components-Icons-Featured-icons-featured-icon-light-fg-success: #079455;
   --Colors-Background-bg-success-secondary: #dcfae6;
   --Colors-Effects-Shadows-shadow-lg-02: rgba(10, 13, 18, 0.03);
   --Colors-Effects-Shadows-shadow-lg-03: rgba(10, 13, 18, 0.04);
   --Colors-Border-border-secondary-alt: rgba(0, 0, 0, 0.08);
   --Colors-Effects-Shadows-shadow-lg-01: rgba(10, 13, 18, 0.08);
   --Colors-Text-text-brand-secondary-700: #6941c6;
   --Colors-Text-text-primary-900: #181d27;
   --Colors-Background-bg-secondary: #fafafa;
   --Colors-Blue-dark-600: #155eef;
   --Colors-Text-text-tertiary-600: #535862;
   --pushmyroi-Primary: #102694;
   --pushmyroi-Secondary: #00b9f2;
   --Component-colors-Utility-Purple-utility-purple-700: #5925dc;
   --Component-colors-Utility-Purple-utility-purple-50: #f4f3ff;
   --Component-colors-Utility-Purple-utility-purple-200: #d9d6fe;
   --Colors-Text-text-white: #fff;
   --Colors-Text-text-primary-on-brand: #fff;
   --Colors-Background-bg-brand-solid: #7f56d9;
   --Colors-Text-text-secondary-700: #414651;
   --Colors-Effects-Shadows-shadow-skeumorphic-inner-border: rgba(10,
       13,
       18,
       0.18);
   --Colors-Effects-Shadows-shadow-xs: rgba(10, 13, 18, 0.05);
   --Colors-Effects-Shadows-shadow-skeumorphic-inner: rgba(10, 13, 18, 0.05);
   --Colors-Border-border-primary: #d5d7da;
   --Colors-Text-text-secondary-on-brand: #e9d7fe;
   --Colors-Background-bg-primary: #fff;
   --Colors-Foreground-fg-white: #fff;

   /* Font */
   --Font-family-font-family-body: Inter;
   --Font-family-font-family-display: Inter;
 }