:root {
    --regular-regular-m-font-family: "IBM Plex Arabic";
    --regular-regular-m-font-weight: 400;
    --regular-regular-m-font-size: 14px;
    --regular-regular-m-letter-spacing: 0px;
    --regular-regular-m-line-height: 22px;
    --regular-regular-m-font-style: normal;
    --bold-bold-3xl-font-family: "IBM Plex Arabic";
    --bold-bold-3xl-font-weight: 600;
    --bold-bold-3xl-font-size: 24px;
    --bold-bold-3xl-letter-spacing: 0px;
    --bold-bold-3xl-line-height: normal;
    --bold-bold-3xl-font-style: normal;
    --regular-regular-l-font-family: "IBM Plex Arabic";
    --regular-regular-l-font-weight: 400;
    --regular-regular-l-font-size: 16px;
    --regular-regular-l-letter-spacing: 0px;
    --regular-regular-l-line-height: normal;
    --regular-regular-l-font-style: normal;
    --bold-bold-xl-font-family: "IBM Plex Arabic";
    --bold-bold-xl-font-weight: 600;
    --bold-bold-xl-font-size: 18px;
    --bold-bold-xl-letter-spacing: 0px;
    --bold-bold-xl-line-height: 28px;
    --bold-bold-xl-font-style: normal;
    --bold-bold-m-font-family: "IBM Plex Arabic";
    --bold-bold-m-font-weight: 600;
    --bold-bold-m-font-size: 14px;
    --bold-bold-m-letter-spacing: 0px;
    --bold-bold-m-line-height: 22px;
    --bold-bold-m-font-style: normal;
    --bold-bold-4xl-font-family: "IBM Plex Arabic";
    --bold-bold-4xl-font-weight: 700;
    --bold-bold-4xl-font-size: 36px;
    --bold-bold-4xl-letter-spacing: 0px;
    --bold-bold-4xl-line-height: normal;
    --bold-bold-4xl-font-style: normal;
    --regular-regular-xl-font-family: "IBM Plex Arabic";
    --regular-regular-xl-font-weight: 400;
    --regular-regular-xl-font-size: 18px;
    --regular-regular-xl-letter-spacing: 0px;
    --regular-regular-xl-line-height: 28px;
    --regular-regular-xl-font-style: normal;
    --captions-caption-2-font-family: "IBM Plex Arabic";
    --captions-caption-2-font-weight: 400;
    --captions-caption-2-font-size: 16px;
    --captions-caption-2-letter-spacing: 0px;
    --captions-caption-2-line-height: 26px;
    --captions-caption-2-font-style: normal;
    --medium-medium-m-font-family: "IBM Plex Arabic";
    --medium-medium-m-font-weight: 500;
    --medium-medium-m-font-size: 14px;
    --medium-medium-m-letter-spacing: 0px;
    --medium-medium-m-line-height: 22px;
    --medium-medium-m-font-style: normal;



    --regular-regular-s-font-family: "IBM Plex Arabic";
    --regular-regular-s-font-weight: 400;
    --regular-regular-s-font-size: 12px;
    --regular-regular-s-letter-spacing: 0px;
    --regular-regular-s-line-height: 22px;
    --regular-regular-s-font-style: normal;

    
    --bold-bold-l-font-family: "IBM Plex Arabic";
    --bold-bold-l-font-weight: 600;
    --bold-bold-l-font-size: 16px;
    --bold-bold-l-letter-spacing: 0px;
    --bold-bold-l-line-height: normal;
    --bold-bold-l-font-style: normal;
    --shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
    --card-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.06);
    --colors-dark-white: rgba(255, 255, 255, 1);
    --colors-dark-dark-500: rgba(167, 167, 167, 1);
    --colors-primary-primary: rgba(169, 50, 15, 1);
    --colors-dark-dark-700: rgba(62, 62, 62, 1);
    --colors-dark-dark-800: rgba(15, 15, 15, 1);
    --colors-dark-dark-600: rgba(87, 87, 87, 1);
    --colors-dark-dark-300: rgba(211, 211, 211, 1);
    --colors-dark-dark-400: rgba(187, 187, 187, 1);
    --colors-dark-dark-200: rgba(238, 238, 238, 1);
    --colors-dark-dark-50: rgba(248, 248, 248, 1);
    --ui-colors-text-heading: rgba(16, 22, 30, 1);
    --spaces-space-3: 6px;
    --spaces-space-11: 24px;
    --spaces-space-2: 4px;
    --spaces-space-4: 8px;
    --spaces-space-10: 20px;
    --spaces-space-5: 10px;
    --spaces-space-18: 100px;
    --spaces-space-6: 12px;
    --spaces-space-17: 96px;
    --spaces-space-19: 140px;
    --spaces-space-7: 14px;
    --spaces-space-12: 32px;
    --spaces-space-8: 16px;
    --spaces-space-1: 2px;
    --spaces-space-15: 56px;
    --spaces-space-13: 40px;
    --spaces-space-16: 72px;
    --spacing-gap-between-items-SM-6: 4px;
    --spacing-gap-between-items-SM-3: 16px;
    --spacing-radius-small-box-2: 12px;
    --spacing-gap-between-items-SM-2: 20px;
    --spacing-radius-small-box: 16px;
  }
  
  /*
  
  To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:
  
  <body data-spacing-mode="mobile">
      <!-- the rest of your content -->
  </body>
  
  You can apply the theme on any DOM node, not just the `body`
  
  */
  
  [data-spacing-mode="mobile"] {
    --spacing-gap-between-items-SM-6: 2px;
    --spacing-gap-between-items-SM-3: 12px;
    --spacing-radius-small-box-2: 10px;
    --spacing-gap-between-items-SM-2: 16px;
    --spacing-radius-small-box: 12px;
  }
  
  [data-spacing-mode="web"] {
    --spacing-gap-between-items-SM-6: 4px;
    --spacing-gap-between-items-SM-3: 16px;
    --spacing-radius-small-box-2: 12px;
    --spacing-gap-between-items-SM-2: 20px;
    --spacing-radius-small-box: 16px;
  }