:root {
  --Global-spacing-3xl: 24px;
  --black: rgba(8, 0, 49, 1);
  --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-medium-font-weight: 500;
  --text-md-medium-font-size: 16px;
  --text-md-medium-letter-spacing: 0px;
  --text-md-medium-line-height: 24px;
  --text-md-medium-font-style: normal;
  --display-xl-semibold-font-size: 60px;
  --display-xl-semibold-font-weight: 600;
  --display-xl-semibold-line-height: 72px;
  --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-sm-bold-font-weight: 700;
  --text-sm-regular-font-weight: 400;
  --display-sm-bold-font-size: 30px;
  --display-sm-bold-letter-spacing: 0px;
  --display-sm-bold-line-height: 38px;
  --display-sm-bold-font-style: normal;
  --text-sm-regular-font-size: 14px;
  --text-sm-regular-letter-spacing: 0px;
  --text-sm-regular-line-height: 20px;
  --text-sm-regular-font-style: normal;
  --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-regular-underlined-font-weight: 400;
  --text-sm-regular-underlined-font-size: 14px;
  --text-sm-regular-underlined-letter-spacing: 0px;
  --text-sm-regular-underlined-line-height: 20px;
  --text-sm-regular-underlined-font-style: normal;
  --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-semibold-font-weight: 600;
  --text-sm-semibold-font-size: 14px;
  --text-sm-semibold-letter-spacing: 0px;
  --text-sm-semibold-line-height: 20px;
  --text-sm-semibold-font-style: normal;
  --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xs-regular-font-weight: 400;
  --text-xs-regular-font-size: 12px;
  --text-xs-regular-letter-spacing: 0px;
  --text-xs-regular-line-height: normal;
  --radius-radius-lg-duplicate: 16px;

  --text-xs-regular-font-style: normal;
  --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xl-regular-font-weight: 400;
  --text-xl-regular-font-size: 20px;
  --text-xl-regular-letter-spacing: 0px;
  --text-xl-regular-line-height: 30px;
  --text-xl-regular-font-style: normal;
  --display-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-md-medium-font-weight: 500;
  --display-md-medium-font-size: 36px;
  --display-md-medium-letter-spacing: -0.72px;
  --display-md-medium-line-height: 44px;
  --display-md-medium-font-style: normal;
  --display-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-lg-medium-font-weight: 500;
  --display-lg-medium-font-size: 48px;
  --display-lg-medium-letter-spacing: -0.96px;
  --display-lg-medium-line-height: 60px;
  --display-lg-medium-font-style: normal;
  --text-xl-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xl-medium-font-weight: 500;
  --text-xl-medium-font-size: 20px;
  --text-xl-medium-letter-spacing: 0px;
  --text-xl-medium-line-height: 30px;
  --text-xl-medium-font-style: normal;
  --text-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-bold-font-weight: 700;
  --text-lg-bold-font-size: 18px;
  --text-lg-bold-letter-spacing: 0px;
  --text-lg-bold-line-height: 28px;
  --text-lg-bold-font-style: normal;
  --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-regular-font-weight: 400;
  --text-lg-regular-font-size: 18px;
  --text-lg-regular-letter-spacing: 0px;
  --text-lg-regular-line-height: 28px;
  --text-lg-regular-font-style: normal;
  --text-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-medium-font-weight: 500;
  --text-lg-medium-font-size: 18px;
  --text-lg-medium-letter-spacing: 0px;
  --text-lg-medium-line-height: 28px;
  --text-lg-medium-font-style: normal;
  --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-lg-semibold-font-weight: 600;
  --display-lg-semibold-font-size: 48px;
  --display-lg-semibold-letter-spacing: -0.96px;
  --display-lg-semibold-line-height: 60px;
  --display-lg-semibold-font-style: normal;
  --display-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-md-regular-font-weight: 400;
  --display-md-regular-font-size: 36px;
  --display-md-regular-letter-spacing: -0.72px;
  --display-md-regular-line-height: 44px;
  --display-md-regular-font-style: normal;
  --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-regular-font-weight: 400;
  --text-md-regular-font-size: 16px;
  --text-md-regular-letter-spacing: 0px;
  --text-md-regular-line-height: 24px;
  --text-md-regular-font-style: normal;
  --display-xs-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-xs-semibold-font-weight: 600;
  --display-xs-semibold-font-size: 24px;
  --display-xs-semibold-letter-spacing: 0px;
  --display-xs-semibold-line-height: 32px;
  --display-xs-semibold-font-style: normal;
  --display-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-lg-bold-font-weight: 700;
  --display-lg-bold-font-size: 48px;
  --display-lg-bold-letter-spacing: -0.96px;
  --display-lg-bold-line-height: 60px;
  --display-lg-bold-font-style: normal;
  --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-medium-font-weight: 500;
  --text-sm-medium-font-size: 14px;
  --text-sm-medium-letter-spacing: 0px;
  --text-sm-medium-line-height: 20px;
  --text-sm-medium-font-style: normal;
  --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xs-medium-font-weight: 500;
  --text-xs-medium-font-size: 12px;
  --text-xs-medium-letter-spacing: 0px;
  --text-xs-medium-line-height: 18px;
  --text-xs-medium-font-style: normal;
  --text-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-bold-font-weight: 700;
  --text-sm-bold-font-size: 14px;
  --text-sm-bold-letter-spacing: 0px;
  --text-sm-bold-line-height: 20px;
  --text-sm-bold-font-style: normal;
  --primitives-colors-green-600: rgba(7, 148, 85, 1);
  --shadows-shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  --themes-stepper-stepper-button-completed: var(--primitives-colors-primary-SA-flag-600-primary);
  --spacing-global-spacing-5xl-duplicate: var(--primitives-spacing-10-40px-duplicate);
  --themes-text-text-primary-sa-flag: var(--primitives-colors-primary-SA-flag-800);

  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --themes-background-background-success: var(--primitives-colors-green-600);
  --themes-background-background-body: var(--primitives-colors-neutral-50);
  --themes-text-text-oncolor-primary: var(--primitives-colors-base-white);
  --themes-text-text-oncolor-secondary: #FFFFFFCC;
  --Form-field-border-error: #B42318;
  --Form-icon-enteredtext: 8px;
  --themes-link-link-oncolor: var(--primitives-colors-base-white);
  --themes-text-text-default: var(--primitives-colors-base-black);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500);
  --themes-text-text-display: var(--primitives-colors-neutral-800);
  --themes-text-text-tertiary: var(--primitives-colors-tertiary-lavendar-500-primary);
  --themes-text-text-secondary: var(--primitives-colors-secondary-gold-600-primary);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-text-text-oncolor-primary-duplicate: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-200);
  --themes-background-background-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-background-background-white: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-menu: var(--primitives-colors-base-white-duplicate);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300);
  --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-tertiary-50: var(--primitives-colors-tertiary-lavendar-50);
  --themes-icon-background-warning-light: var(--themes-background-background-warning-50);
  --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50);
  --themes-background-background-white-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-warning-50: var(--primitives-colors-yellow-50);
  --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30);
  --themes-background-background-neutral-100: var(--primitives-colors-neutral-100-duplicate);
  --themes-background-background-card: var(--primitives-colors-base-white-duplicate);
  --themes-alpha-alpha-warning-10: var(--primitives-colors-alpha-alpha-yellow-10);
  --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10);
  --themes-button-button-background-black-default: var(--primitives-colors-neutral-950-duplicate);
  --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-button-button-background-oncolor-default: var(--primitives-colors-base-white);
  --themes-alpha-alpha-warning-20: var(--primitives-colors-alpha-alpha-yellow-20);
  --themes-background-background-card-duplicate: var(--primitives-colors-base-white);
  --themes-border-border-background-white: var(--primitives-colors-neutral-100-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-SA-flag: var(--primitives-colors-green-900);
  --themes-text-text-secondary-paragraph-duplicate: var(--primitives-colors-neutral-500-duplicate);
  --themes-background-background-neutral-400: var(--primitives-colors-neutral-400);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100);
  --themes-border-border-white-40: var(--themes-alpha-alpha-white-40);
  --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20);
  --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700);
  --themes-button-button-background-oncolor-hovered: var(--themes-alpha-alpha-white-80);
  --themes-button-button-background-black-hovered: var(--primitives-colors-neutral-800);
  --themes-alpha-alpha-white-80: var(--primitives-colors-alpha-alpha-white-80);
  --themes-border-border-black: var(--primitives-colors-base-black-duplicate);
  --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80);
  --primitives-colors-neutral-50: rgba(249, 250, 251, 1);
  --primitives-colors-base-white: rgba(255, 255, 255, 1);
  --primitives-colors-base-black: rgba(22, 22, 22, 1);
  --primitives-colors-neutral-500: rgba(108, 115, 127, 1);
  --primitives-colors-neutral-800: rgba(31, 42, 55, 1);
  --primitives-colors-tertiary-lavendar-500-primary: rgba(128, 81, 159, 1);
  --primitives-colors-secondary-gold-600-primary: rgba(219, 161, 2, 1);
  --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1);
  --primitives-colors-neutral-700: rgba(56, 66, 80, 1);
  --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1);
  --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1);
  --primitives-colors-neutral-200: rgba(229, 231, 235, 1);
  --primitives-spacing-1-4px: 4px;
  --primitives-spacing-6-24px: 24px;
  --primitives-colors-neutral-900: rgba(17, 25, 39, 1);
  --primitives-spacing-4-16px: 16px;
  --primitives-spacing-0-0px: 0px;
  --primitives-spacing-3-12px: 12px;
  --primitives-colors-neutral-300: rgba(210, 214, 219, 1);
  --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1);
  --primitives-colors-tertiary-lavendar-50: rgba(249, 245, 250, 1);
  --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1);
  --primitives-spacing-2-8px-duplicate: 8px;
  --primitives-colors-neutral-50-duplicate: rgba(249, 250, 251, 1);
  --primitives-colors-secondary-gold-400: rgba(247, 213, 77, 1);
  --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1);
  --primitives-colors-neutral-100: rgba(243, 244, 246, 1);
  --primitives-colors-neutral-600: rgba(77, 87, 97, 1);
  --primitives-colors-neutral-950: rgba(13, 18, 28, 1);
  --primitives-colors-neutral-800-duplicate: rgba(31, 42, 55, 1);
  --primitives-colors-yellow-50: rgba(255, 250, 235, 1);
  --primitives-radius-radius-4: 4px;
  --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3);
  --primitives-colors-neutral-100-duplicate: rgba(243, 244, 246, 1);
  --primitives-colors-neutral-500-duplicate: rgba(108, 115, 127, 1);
  --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1);
  --primitives-colors-tertiary-lavendar-400: rgba(165, 123, 186, 1);
  --primitives-colors-alpha-alpha-yellow-10: rgba(220, 104, 3, 0.1);
  --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1);
  --primitives-colors-alpha-alpha-yellow-20: rgba(220, 104, 3, 0.2);
  --primitives-colors-green-900: rgba(7, 77, 49, 1);
  --primitives-colors-neutral-200-duplicate: rgba(229, 231, 235, 1);
  --primitives-colors-neutral-400: rgba(157, 164, 174, 1);
  --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4);
  --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2);
  --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1);
  --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8);
  --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4);
  --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2);
  --primitives-colors-alpha-alpha-black-80: rgba(22, 22, 22, 0.8);
  --primitives-colors-primary-SA-flag-50-duplicate: rgba(243, 252, 246, 1);
  --primitives-colors-neutral-900-duplicate: rgba(17, 25, 39, 1);
  --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1);
  --primitives-colors-alpha-alpha-600-primary-10-duplicate: rgba(27, 131, 84, 0.1);
  --radius-radius-full: 9999px;
  --radius-radius-full-duplicate: 9999px;
  --radius-radius-lg: 16px;
  --radius-radius-md: 8px;
  --radius-radius-sm: 4px;
  --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px);
  --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px);
  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-none: var(--primitives-spacing-0-0px);
  --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px);
  --spacing-global-spacing-xl: var(--primitives-spacing-4-16px);
  --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px);
  --spacing-tab-tab-button-gap: var(--primitives-spacing-1-4px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-xs: var(--primitives-spacing-1-4px);
  --spacing-spacing-md: var(--primitives-spacing-2-8px);
  --spacing-spacing-xl: var(--primitives-spacing-4-16px-duplicate);
  --spacing-spacing-xs: var(--primitives-spacing-1-4px-duplicate);
  --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate);
  --spacing-spacing-3xl: var(--primitives-spacing-6-24px-duplicate);
  --spacing-spacing-4xl: var(--primitives-spacing-8-32px);
  --spacing-spacing-5xl: var(--primitives-spacing-10-40px);
  --primitives-spacing-2-8px: 8px;
  --primitives-spacing-4-16px-duplicate: 16px;
  --primitives-spacing-1-4px-duplicate: 4px;
  --primitives-spacing-6-24px-duplicate: 24px;
  --primitives-spacing-8-32px: 32px;
  --primitives-spacing-10-40px: 40px;
  --Form-Input-container-padding-right: 16px;
  --Form-Input-container-padding-left: 8px;
  --radius-lg: 16px;
  --radius-radius-radius-sm: var(--primitives-radius-radius-4);

  /* added manual */
  --Table-table-text-body: #161616;
  --Text-text-default: #161616;
  --Size-Text-typo-size-text-xs: 12px;
  --Line-Height-Text-line-heights-text-xs: 18px;
  --radius-radius-md: 8px;
  --Size-Text-typo-size-text-md: 16px;
  --Text-text-display: #1F2A37;
  --Controls-control-border: #6C737F;
  --Table-table-text-head: #384250;
  --Table-table-cell-v-padding: 8px;
  --Table-table-cell-h-padding: 16px;
  --Global-spacing-xl: 16px;
  --radius-radius-sm: 4px;
  --Border-border-neutral-primary: #D2D6DB;
  --Form-field-text-placeholder: #6C737F;
  --tag-border-error-light: #FECDCA;
  --Form-field-text-label: #161616;
  --tag-background-error-light: #FEF3F2;
  --tag-text-error: #912018;
  --text-typo-size-text-xs: 12px;
  --text-line-heights-text-xs: 18px;
  --Icon-background-success-light: #ECFDF3;
  --radius-md: 8px;
  --Form-field-background-darker: #F3F4F6;
  --Button-background-neutral-secondary: #F3F4F6;
  --border-neutral-secondary: rgb(229, 231, 235);
  --themes-button-button-background-primary-pressed: #104631;
  --Background-background-card: #FFF;
  --Link-link-primary: rgb(27, 131, 84);
  --Tag-tag-background-info-light: #EFF8FF;
  --Tag-tag-border-info-light: #B2DDFF;
  --Tag-tag-text-info: #1849A9;
  --Card-card-lg-gap: 24px;
  --Global-spacing-8xl: 80px;
  --Radius-radius-lg: 16px;
  --Text-text-primary: #1B8354;
  --Background-background-body: #F9FAFB;
  --Text-text-primary-paragraph: #384250;
  --Size-Text-typo-size-text-sm: 14px;
  --radius-full: 9999px;
  --Icon-Bg-icon-brand-light: #F3FCF6;
  --Border-border-background-neutral: #d2d6db;
  --Background-background-white: #fff;
  --Global-spacing-5xl: 40px;
  --Border-border-neutral-primary: #D2D6DB;
  --Button-button-background-black-default: #0D121C;
  --Width-width-xxs: 320px;
  --Radius-radius-sm: 4px;
  --Button-buttons-lg-gap: 4px;
  --Text-text-oncolor-primary: #FFF;
  --Button-buttons-lg-padding: 16px;
  --Border-border-background-white: #F3F4F6;
  --Link-link-neutral: #384250;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-themes-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-themes-mode="light"] {
  --themes-background-background-body: var(--primitives-colors-neutral-50);
  --themes-text-text-default: var(--primitives-colors-base-black);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500);
  --themes-text-text-display: var(--primitives-colors-neutral-800);
  --themes-text-text-tertiary: var(--primitives-colors-tertiary-lavendar-500-primary);
  --themes-text-text-secondary: var(--primitives-colors-secondary-gold-600-primary);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-200);
  --themes-background-background-white: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-menu: var(--primitives-colors-base-white-duplicate);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300);
  --themes-background-background-tertiary-50: var(--primitives-colors-tertiary-lavendar-50);
  --themes-icon-background-warning-light: var(--themes-background-background-warning-50);
  --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50);
  --themes-background-background-white-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-warning-50: var(--primitives-colors-yellow-50);
  --themes-background-background-neutral-100: var(--primitives-colors-neutral-100-duplicate);
  --themes-background-background-card: var(--primitives-colors-base-white-duplicate);
  --themes-alpha-alpha-warning-10: var(--primitives-colors-alpha-alpha-yellow-10);
  --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10);
  --themes-button-button-background-oncolor-default: var(--primitives-colors-base-white);
  --themes-alpha-alpha-warning-20: var(--primitives-colors-alpha-alpha-yellow-20);
  --themes-background-background-card-duplicate: var(--primitives-colors-base-white);
  --themes-border-border-background-white: var(--primitives-colors-neutral-100-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-SA-flag: var(--primitives-colors-green-900);
  --themes-text-text-secondary-paragraph-duplicate: var(--primitives-colors-neutral-500-duplicate);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20);
  --themes-alpha-alpha-white-80: var(--primitives-colors-alpha-alpha-white-80);
  --themes-border-border-black: var(--primitives-colors-base-black-duplicate);
  --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate);
}

[data-themes-mode="dark"] {
  --themes-background-background-body: var(--primitives-colors-neutral-900);
  --themes-text-text-default: var(--primitives-colors-base-white-duplicate);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200);
  --themes-text-text-display: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-tertiary: var(--primitives-colors-tertiary-lavendar-400);
  --themes-text-text-secondary: var(--primitives-colors-secondary-gold-400);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-600);
  --themes-background-background-white: var(--primitives-colors-neutral-950);
  --themes-background-background-menu: var(--primitives-colors-neutral-800-duplicate);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500-duplicate);
  --themes-background-background-tertiary-50: var(--primitives-colors-neutral-800-duplicate);
  --themes-icon-background-warning-light: var(--themes-alpha-alpha-warning-10);
  --themes-icon-background-brand-light: var(--themes-alpha-alpha-primary-10);
  --themes-background-background-white-duplicate: var(--primitives-colors-neutral-950-duplicate);
  --themes-background-background-warning-50: var(--themes-alpha-alpha-warning-20);
  --themes-background-background-neutral-100: var(--primitives-colors-neutral-800-duplicate);
  --themes-background-background-card: var(--primitives-colors-neutral-800-duplicate);
  --themes-alpha-alpha-warning-10: rgba(181, 71, 8, 0.1);
  --themes-alpha-alpha-primary-10: rgba(22, 106, 69, 0.1);
  --themes-button-button-background-oncolor-default: var(--primitives-colors-base-black-duplicate);
  --themes-alpha-alpha-warning-20: rgba(181, 71, 8, 0.2);
  --themes-background-background-card-duplicate: var(--primitives-colors-neutral-800);
  --themes-border-border-background-white: var(--primitives-colors-neutral-600);
  --themes-background-background-menu-duplicate: var(--primitives-colors-neutral-800);
  --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-text-text-secondary-paragraph-duplicate: var(--primitives-colors-neutral-200-duplicate);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20);
  --themes-alpha-alpha-white-80: var(--primitives-colors-alpha-alpha-black-80);
  --themes-border-border-black: var(--primitives-colors-base-white);
  --themes-icon-bg-icon-brand-light: var(--themes-alpha-alpha-primary-10-duplicate);
  --themes-alpha-alpha-primary-10-duplicate: rgba(22, 106, 69, 0.1);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-900-duplicate);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-alpha-alpha-600-primary-10-duplicate);
}

[data-spacing-mode="desktop"] {
  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
}

[data-spacing-mode="tablet"] {
  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
}

[data-spacing-mode="mobile"] {
  --spacing-card-card-lg-gap: var(--primitives-spacing-4-16px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-3-12px);
}









:root {
  --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-medium-font-weight: 500;
  --text-md-medium-font-size: 16px;
  --text-md-medium-letter-spacing: 0px;
  --text-md-medium-line-height: 24px;
  --text-md-medium-font-style: normal;
  --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-regular-font-weight: 400;
  --text-sm-regular-font-size: 14px;
  --text-sm-regular-letter-spacing: 0px;
  --text-sm-regular-line-height: 20px;
  --text-sm-regular-font-style: normal;
  --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-regular-underlined-font-weight: 400;
  --text-sm-regular-underlined-font-size: 14px;
  --text-sm-regular-underlined-letter-spacing: 0px;
  --text-sm-regular-underlined-line-height: 20px;
  --text-sm-regular-underlined-font-style: normal;
  --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-semibold-font-weight: 600;
  --text-sm-semibold-font-size: 14px;
  --text-sm-semibold-letter-spacing: 0px;
  --text-sm-semibold-line-height: 20px;
  --text-sm-semibold-font-style: normal;
  --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xs-regular-font-weight: 400;
  --text-xs-regular-font-size: 12px;
  --text-xs-regular-letter-spacing: 0px;
  --text-xs-regular-line-height: normal;
  --text-xs-regular-font-style: normal;
  --text-md-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-semibold-font-weight: 600;
  --text-md-semibold-font-size: 16px;
  --text-md-semibold-letter-spacing: 0px;
  --text-md-semibold-line-height: 24px;
  --text-md-semibold-font-style: normal;
  --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-medium-font-weight: 500;
  --text-sm-medium-font-size: 14px;
  --text-sm-medium-letter-spacing: 0px;
  --text-sm-medium-line-height: 20px;
  --text-sm-medium-font-style: normal;
  --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-regular-font-weight: 400;
  --text-md-regular-font-size: 16px;
  --text-md-regular-letter-spacing: 0px;
  --text-md-regular-line-height: 24px;
  --text-md-regular-font-style: normal;
  --display-xs-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-xs-semibold-font-weight: 600;
  --display-xs-semibold-font-size: 24px;
  --display-xs-semibold-letter-spacing: 0px;
  --display-xs-semibold-line-height: 32px;
  --display-xs-semibold-font-style: normal;
  --text-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-medium-font-weight: 500;
  --text-lg-medium-font-size: 18px;
  --text-lg-medium-letter-spacing: 0px;
  --text-lg-medium-line-height: 28px;
  --text-lg-medium-font-style: normal;
  --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-regular-font-weight: 400;
  --text-lg-regular-font-size: 18px;
  --text-lg-regular-letter-spacing: 0px;
  --text-lg-regular-line-height: 28px;
  --text-lg-regular-font-style: normal;
  --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xl-regular-font-weight: 400;
  --text-xl-regular-font-size: 20px;
  --text-xl-regular-letter-spacing: 0px;
  --text-xl-regular-line-height: 30px;
  --text-xl-regular-font-style: normal;
  --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-lg-semibold-font-weight: 600;
  --display-lg-semibold-font-size: 48px;
  --display-lg-semibold-letter-spacing: -0.96px;
  --display-lg-semibold-line-height: 60px;
  --display-lg-semibold-font-style: normal;
  --display-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-md-regular-font-weight: 400;
  --display-md-regular-font-size: 36px;
  --display-md-regular-letter-spacing: -0.72px;
  --display-md-regular-line-height: 44px;
  --display-md-regular-font-style: normal;
  --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xs-medium-font-weight: 500;
  --text-xs-medium-font-size: 12px;
  --text-xs-medium-letter-spacing: 0px;
  --text-xs-medium-line-height: 18px;
  --text-xs-medium-font-style: normal;
  --text-md-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-regular-underlined-font-weight: 400;
  --text-md-regular-underlined-font-size: 16px;
  --text-md-regular-underlined-letter-spacing: 0px;
  --text-md-regular-underlined-line-height: 24px;
  --text-md-regular-underlined-font-style: normal;
  --text-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-bold-font-weight: 700;
  --text-sm-bold-font-size: 14px;
  --text-sm-bold-letter-spacing: 0px;
  --text-sm-bold-line-height: 20px;
  --text-sm-bold-font-style: normal;
  --text-lg-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-bold-font-weight: 700;
  --text-lg-bold-font-size: 18px;
  --text-lg-bold-letter-spacing: 0px;
  --text-lg-bold-line-height: 28px;
  --text-lg-bold-font-style: normal;
  --shadows-shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  --shadows-shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
  --themes-background-background-body: var(--primitives-colors-neutral-50);
  --themes-text-text-oncolor-primary: var(--primitives-colors-base-white);
  --themes-link-link-oncolor: var(--primitives-colors-base-white);
  --themes-text-text-display: var(--primitives-colors-neutral-800);
  --themes-text-text-default: var(--primitives-colors-base-black);
  --themes-link-link-oncolor-pressed: #FFFFFF99;
  --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-form-field-text-label: var(--themes-text-text-default);
  --themes-form-field-text-placeholder: var(--themes-text-text-secondary-paragraph);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-200);
  --themes-background-background-white: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-nav-header: var(--primitives-colors-primary-SA-flag-800);
  --themes-background-background-menu: var(--primitives-colors-base-white-duplicate);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500);
  --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300);
  --themes-background-background-primary-400: var(--primitives-colors-primary-SA-flag-400);
  --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50);
  --themes-background-background-white-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate);
  --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30);
  --themes-background-background-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate);
  --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10);
  --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-border-border-black: var(--primitives-colors-base-black);
  --themes-background-background-card: var(--primitives-colors-base-white);
  --themes-background-background-card-duplicate: var(--primitives-colors-base-white-duplicate);
  --themes-border-border-black-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-base-white);
  --themes-form-field-background-default: var(--themes-background-background-card);
  --themes-background-background-SA-flag: var(--primitives-colors-green-900);
  --themes-form-field-border-default: var(--primitives-colors-neutral-400);
  --themes-background-background-notification-white: var(--primitives-colors-base-white);
  --themes-background-background-neutral-400: var(--primitives-colors-neutral-400);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100);
  --themes-global-text-default-disabled: var(--primitives-colors-neutral-400);
  --themes-link-link-neutral: var(--primitives-colors-neutral-700);
  --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500);
  --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80);
  --themes-form-field-border-hovered: var(--primitives-colors-neutral-700);
  --themes-form-field-border-error: var(--themes-border-border-error);
  --themes-border-border-error: var(--primitives-colors-red-700);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100);
  --themes-border-border-white-40: var(--themes-alpha-alpha-white-40);
  --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700);
  --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate);
  --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-background-background-neutral-100: var(--primitives-colors-neutral-100);
  --primitives-colors-neutral-50: rgba(249, 250, 251, 1);
  --primitives-colors-base-white: rgba(255, 255, 255, 1);
  --primitives-colors-neutral-800: rgba(31, 42, 55, 1);
  --primitives-colors-base-black: rgba(22, 22, 22, 1);
  --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1);
  --primitives-colors-neutral-700: rgba(56, 66, 80, 1);
  --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1);
  --primitives-spacing-2-8px: 8px;
  --primitives-colors-neutral-200: rgba(229, 231, 235, 1);
  --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1);
  --primitives-colors-primary-SA-flag-800: rgba(20, 87, 58, 1);
  --primitives-spacing-1-4px: 4px;
  --primitives-colors-neutral-900: rgba(17, 25, 39, 1);
  --primitives-colors-neutral-500: rgba(108, 115, 127, 1);
  --primitives-spacing-4-16px: 16px;
  --primitives-spacing-0-0px: 0px;
  --primitives-spacing-3-12px: 12px;
  --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1);
  --primitives-colors-neutral-300: rgba(210, 214, 219, 1);
  --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1);
  --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1);
  --primitives-spacing-2-8px-duplicate: 8px;
  --primitives-colors-neutral-50-duplicate: rgba(249, 250, 251, 1);
  --primitives-colors-neutral-100: rgba(243, 244, 246, 1);
  --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1);
  --primitives-colors-neutral-800-duplicate: rgba(31, 42, 55, 1);
  --primitives-colors-neutral-200-duplicate: rgba(229, 231, 235, 1);
  --primitives-radius-radius-4: 4px;
  --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3);
  --primitives-spacing-6-24px: 24px;
  --primitives-colors-neutral-950: rgba(13, 18, 28, 1);
  --primitives-colors-neutral-600: rgba(77, 87, 97, 1);
  --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1);
  --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1);
  --primitives-colors-neutral-900-duplicate: rgba(17, 25, 39, 1);
  --primitives-colors-neutral-600-duplicate: rgba(77, 87, 97, 1);
  --primitives-spacing-10-40px: 40px;
  --primitives-colors-green-900: rgba(7, 77, 49, 1);
  --primitives-colors-neutral-400: rgba(157, 164, 174, 1);
  --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8);
  --primitives-colors-alpha-alpha-white-60: rgba(255, 255, 255, 0.6);
  --primitives-colors-red-700: rgba(180, 35, 24, 1);
  --primitives-spacing-0-5-2px: 2px;
  --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1);
  --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4);
  --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2);
  --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4);
  --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2);
  --primitives-colors-primary-SA-flag-50-duplicate: rgba(243, 252, 246, 1);
  --primitives-colors-alpha-alpha-600-primary-10-duplicate: rgba(27, 131, 84, 0.1);
  --spacing-global-spacing-md: var(--primitives-spacing-2-8px);
  --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px);
  --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px);
  --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-none: var(--primitives-spacing-0-0px);
  --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px);
  --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px);
  --spacing-link-link-md-gap: var(--primitives-spacing-2-8px);
  --spacing-tab-tab-button-gap: var(--primitives-spacing-1-4px);
  --spacing-pagination-pagination-item-lg-padding: var(--primitives-spacing-2-8px);
  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --spacing-global-spacing-xs: var(--primitives-spacing-1-4px);
  --spacing-form-label-gap: var(--primitives-spacing-1-4px);
  --spacing-form-icon-enteredtext: var(--primitives-spacing-2-8px);
  --spacing-global-spacing-xl: var(--primitives-spacing-4-16px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-form-input-container-padding-left: var(--primitives-spacing-2-8px);
  --spacing-form-input-container-padding-right: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-lg: var(--primitives-spacing-3-12px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px);
  --spacing-form-input-gap: var(--primitives-spacing-0-0px);
  --spacing-global-spacing-5xl: var(--primitives-spacing-10-40px);
  --spacing-pagination-pagination-items-padding: var(--primitives-spacing-2-8px);
  --spacing-form-input-padding: var(--primitives-spacing-0-0px);
  --spacing-notification-notification-gap: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px);
  --spacing-form-field-label-gap: var(--primitives-spacing-2-8px);
  --spacing-global-spacing-xxs: var(--primitives-spacing-0-5-2px);
  --radius-radius-full: 9999px;
  --radius-radius-full-duplicate: 9999px;
  --radius-radius-sm: 4px;
  --radius-radius-lg: 16px;
  --radius-radius-md: 8px;
  --radius-radius-none: 0px;
  --spacing-spacing-xl: var(--primitives-spacing-4-16px-duplicate);
  --spacing-spacing-xs: var(--primitives-spacing-1-4px-duplicate);
  --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate);
  --spacing-spacing-3xl: var(--primitives-spacing-6-24px-duplicate);
  --spacing-spacing-4xl: var(--primitives-spacing-8-32px);
  --spacing-spacing-5xl: var(--primitives-spacing-10-40px-duplicate);
  --primitives-spacing-4-16px-duplicate: 16px;
  --primitives-spacing-1-4px-duplicate: 4px;
  --primitives-spacing-6-24px-duplicate: 24px;
  --primitives-spacing-8-32px: 32px;
  --primitives-spacing-10-40px-duplicate: 40px;
  --radius-radius-radius-sm: var(--primitives-radius-radius-4);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-themes-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-themes-mode="light"] {
  --themes-background-background-body: var(--primitives-colors-neutral-50);
  --themes-text-text-display: var(--primitives-colors-neutral-800);
  --themes-text-text-default: var(--primitives-colors-base-black);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-200);
  --themes-background-background-white: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-menu: var(--primitives-colors-base-white-duplicate);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300);
  --themes-icon-background-brand-light: var(--primitives-colors-primary-SA-flag-50);
  --themes-background-background-white-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate);
  --themes-alpha-alpha-primary-10: var(--primitives-colors-alpha-alpha-600-primary-10);
  --themes-border-border-black: var(--primitives-colors-base-black);
  --themes-background-background-card: var(--primitives-colors-base-white);
  --themes-background-background-card-duplicate: var(--primitives-colors-base-white-duplicate);
  --themes-border-border-black-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-base-white);
  --themes-form-field-background-default: var(--themes-background-background-card);
  --themes-background-background-SA-flag: var(--primitives-colors-green-900);
  --themes-form-field-border-default: var(--primitives-colors-neutral-400);
  --themes-background-background-notification-white: var(--primitives-colors-base-white);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100);
  --themes-link-link-neutral: var(--primitives-colors-neutral-700);
  --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500);
  --themes-form-field-border-hovered: var(--primitives-colors-neutral-700);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate);
  --themes-icon-bg-icon-brand-light: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-alpha-alpha-primary-10-duplicate: rgba(27, 131, 84, 0.1);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50-duplicate);
  --themes-background-background-neutral-100: var(--primitives-colors-neutral-100);
}

[data-themes-mode="dark"] {
  --themes-background-background-body: var(--primitives-colors-neutral-900);
  --themes-text-text-display: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-default: var(--primitives-colors-base-white);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-white-duplicate);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400-duplicate);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-600);
  --themes-background-background-white: var(--primitives-colors-neutral-950-duplicate);
  --themes-background-background-menu: var(--primitives-colors-neutral-800-duplicate);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200-duplicate);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500);
  --themes-icon-background-brand-light: var(--themes-alpha-alpha-primary-10);
  --themes-background-background-white-duplicate: var(--primitives-colors-neutral-950);
  --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-600-duplicate);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-900-duplicate);
  --themes-alpha-alpha-primary-10: rgba(22, 106, 69, 0.1);
  --themes-border-border-black: var(--primitives-colors-base-white);
  --themes-background-background-card: var(--primitives-colors-neutral-800);
  --themes-background-background-card-duplicate: var(--primitives-colors-neutral-800-duplicate);
  --themes-border-border-black-duplicate: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-neutral-800);
  --themes-form-field-background-default: var(--primitives-colors-neutral-800);
  --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-form-field-border-default: var(--primitives-colors-neutral-500);
  --themes-background-background-notification-white: var(--primitives-colors-neutral-900-duplicate);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700);
  --themes-link-link-neutral: var(--primitives-colors-neutral-200-duplicate);
  --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-400);
  --themes-form-field-border-hovered: var(--primitives-colors-neutral-200-duplicate);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700);
  --themes-icon-bg-icon-brand-light: var(--themes-alpha-alpha-primary-10-duplicate);
  --themes-alpha-alpha-primary-10-duplicate: rgba(22, 106, 69, 0.1);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400);
  --themes-background-background-primary-50: var(--primitives-colors-alpha-alpha-600-primary-10-duplicate);
  --themes-background-background-neutral-100: var(--primitives-colors-neutral-800);
}

[data-spacing-mode="desktop"] {
  --spacing-link-link-md-gap: var(--primitives-spacing-2-8px);
  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px);
  --spacing-pagination-pagination-items-padding: var(--primitives-spacing-2-8px);
  --spacing-notification-notification-gap: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px);
}

[data-spacing-mode="tablet"] {
  --spacing-link-link-md-gap: var(--primitives-spacing-2-8px);
  --spacing-card-card-lg-gap: var(--primitives-spacing-6-24px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px);
  --spacing-pagination-pagination-items-padding: var(--primitives-spacing-2-8px);
  --spacing-notification-notification-gap: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px);
}

[data-spacing-mode="mobile"] {
  --spacing-link-link-md-gap: var(--primitives-spacing-1-4px);
  --spacing-card-card-lg-gap: var(--primitives-spacing-4-16px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-3-12px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-1-4px);
  --spacing-pagination-pagination-items-padding: var(--primitives-spacing-1-4px);
  --spacing-notification-notification-gap: var(--primitives-spacing-2-8px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-3-12px);
}








:root {
  --text-md-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-medium-font-weight: 500;
  --text-md-medium-font-size: 16px;
  --text-md-medium-letter-spacing: 0px;
  --text-md-medium-line-height: 24px;
  --text-md-medium-font-style: normal;
  --text-sm-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-regular-font-weight: 400;
  --text-sm-regular-font-size: 14px;
  --text-sm-regular-letter-spacing: 0px;
  --text-sm-regular-line-height: 20px;
  --text-sm-regular-font-style: normal;
  --text-sm-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-regular-underlined-font-weight: 400;
  --text-sm-regular-underlined-font-size: 14px;
  --text-sm-regular-underlined-letter-spacing: 0px;
  --text-sm-regular-underlined-line-height: 20px;
  --text-sm-regular-underlined-font-style: normal;
  --text-sm-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-semibold-font-weight: 600;
  --text-sm-semibold-font-size: 14px;
  --text-sm-semibold-letter-spacing: 0px;
  --text-sm-semibold-line-height: 20px;
  --text-sm-semibold-font-style: normal;
  --text-xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xs-regular-font-weight: 400;
  --text-xs-regular-font-size: 12px;
  --text-xs-regular-letter-spacing: 0px;
  --text-xs-regular-line-height: normal;
  --text-xs-regular-font-style: normal;
  --text-md-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-semibold-font-weight: 600;
  --text-md-semibold-font-size: 16px;
  --text-md-semibold-letter-spacing: 0px;
  --text-md-semibold-line-height: 24px;
  --text-md-semibold-font-style: normal;
  --text-sm-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-medium-font-weight: 500;
  --text-sm-medium-font-size: 14px;
  --text-sm-medium-letter-spacing: 0px;
  --text-sm-medium-line-height: 20px;
  --text-sm-medium-font-style: normal;
  --text-lg-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-regular-font-weight: 400;
  --text-lg-regular-font-size: 18px;
  --text-lg-regular-letter-spacing: 0px;
  --text-lg-regular-line-height: 28px;
  --text-lg-regular-font-style: normal;
  --text-lg-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-lg-medium-font-weight: 500;
  --text-lg-medium-font-size: 18px;
  --text-lg-medium-letter-spacing: 0px;
  --text-lg-medium-line-height: 28px;
  --text-lg-medium-font-style: normal;
  --text-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-regular-font-weight: 400;
  --text-md-regular-font-size: 16px;
  --text-md-regular-letter-spacing: 0px;
  --text-md-regular-line-height: 24px;
  --text-md-regular-font-style: normal;
  --text-xl-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xl-regular-font-weight: 400;
  --text-xl-regular-font-size: 20px;
  --text-xl-regular-letter-spacing: 0px;
  --text-xl-regular-line-height: 30px;
  --text-xl-regular-font-style: normal;
  --display-lg-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-lg-semibold-font-weight: 600;
  --display-lg-semibold-font-size: 48px;
  --display-lg-semibold-letter-spacing: -0.96px;
  --display-lg-semibold-line-height: 60px;
  --display-lg-semibold-font-style: normal;
  --display-md-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --display-md-regular-font-weight: 400;
  --display-md-regular-font-size: 36px;
  --display-md-regular-letter-spacing: -0.72px;
  --display-md-regular-line-height: 44px;
  --display-md-regular-font-style: normal;
  --text-xs-medium-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-xs-medium-font-weight: 500;
  --text-xs-medium-font-size: 12px;
  --text-xs-medium-letter-spacing: 0px;
  --text-xs-medium-line-height: 18px;
  --text-xs-medium-font-style: normal;
  --text-md-regular-underlined-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-md-regular-underlined-font-weight: 400;
  --text-md-regular-underlined-font-size: 16px;
  --text-md-regular-underlined-letter-spacing: 0px;
  --text-md-regular-underlined-line-height: 24px;
  --text-md-regular-underlined-font-style: normal;
  --text-2xs-semibold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-2xs-semibold-font-weight: 600;
  --text-2xs-semibold-font-size: 10px;
  --text-2xs-semibold-letter-spacing: 0px;
  --text-2xs-semibold-line-height: 14px;
  --text-2xs-semibold-font-style: normal;
  --text-2xs-regular-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-2xs-regular-font-weight: 400;
  --text-2xs-regular-font-size: 10px;
  --text-2xs-regular-letter-spacing: 0px;
  --text-2xs-regular-line-height: 14px;
  --text-2xs-regular-font-style: normal;
  --text-sm-bold-font-family: "IBM Plex Sans Arabic", Helvetica;
  --text-sm-bold-font-weight: 700;
  --text-sm-bold-font-size: 14px;
  --text-sm-bold-letter-spacing: 0px;
  --text-sm-bold-line-height: 20px;
  --text-sm-bold-font-style: normal;
  --shadows-shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
  --themes-background-background-body: var(--primitives-colors-neutral-50);
  --themes-text-text-oncolor-primary: var(--primitives-colors-base-white);
  --themes-link-link-oncolor: var(--primitives-colors-base-white);
  --themes-text-text-display: var(--primitives-colors-neutral-800);
  --themes-text-text-default: var(--primitives-colors-base-black);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-200);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300);
  --themes-background-background-white: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-nav-header: var(--primitives-colors-primary-SA-flag-800);
  --themes-background-background-menu: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-primary-400: var(--primitives-colors-primary-SA-flag-400);
  --themes-background-background-white-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate);
  --themes-border-border-oncolor-transparent-30: var(--primitives-colors-alpha-alpha-white-30);
  --themes-border-border-primary: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate);
  --themes-button-button-background-black-default: var(--primitives-colors-neutral-950);
  --themes-button-button-background-primary-default: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-SA-flag: var(--primitives-colors-green-900);
  --themes-background-background-notification-white: var(--primitives-colors-base-white);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500);
  --themes-background-background-neutral-400: var(--primitives-colors-neutral-400);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100);
  --themes-global-text-default-disabled: var(--primitives-colors-neutral-400);
  --themes-link-link-neutral: var(--primitives-colors-neutral-700);
  --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500);
  --themes-link-link-oncolor-hovered: var(--primitives-colors-alpha-alpha-white-80);
  --themes-border-border-white-40: var(--themes-alpha-alpha-white-40);
  --themes-button-button-background-transparent-hovered: var(--themes-alpha-alpha-white-20);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20);
  --themes-button-button-background-primary-hovered: var(--primitives-colors-primary-SA-flag-700);
  --themes-button-button-background-black-hovered: var(--primitives-colors-neutral-800);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50);
  --themes-border-border-black: var(--primitives-colors-base-black);
  --primitives-colors-neutral-50: rgba(249, 250, 251, 1);
  --primitives-colors-base-white: rgba(255, 255, 255, 1);
  --primitives-colors-neutral-800: rgba(31, 42, 55, 1);
  --primitives-colors-base-black: rgba(22, 22, 22, 1);
  --primitives-colors-neutral-700: rgba(56, 66, 80, 1);
  --primitives-colors-base-black-duplicate: rgba(22, 22, 22, 1);
  --primitives-colors-primary-SA-flag-600-primary: rgba(27, 131, 84, 1);
  --primitives-spacing-2-8px: 8px;
  --primitives-colors-neutral-200: rgba(229, 231, 235, 1);
  --primitives-colors-neutral-300: rgba(210, 214, 219, 1);
  --primitives-colors-base-white-duplicate: rgba(255, 255, 255, 1);
  --primitives-colors-primary-SA-flag-800: rgba(20, 87, 58, 1);
  --primitives-spacing-1-4px: 4px;
  --primitives-colors-neutral-900: rgba(17, 25, 39, 1);
  --primitives-spacing-4-16px: 16px;
  --primitives-spacing-0-0px: 0px;
  --primitives-spacing-3-12px: 12px;
  --primitives-colors-primary-SA-flag-400: rgba(84, 192, 138, 1);
  --primitives-spacing-2-8px-duplicate: 8px;
  --primitives-colors-neutral-100: rgba(243, 244, 246, 1);
  --primitives-colors-primary-SA-flag-400-duplicate: rgba(84, 192, 138, 1);
  --primitives-colors-neutral-500: rgba(108, 115, 127, 1);
  --primitives-colors-neutral-800-duplicate: rgba(31, 42, 55, 1);
  --primitives-colors-neutral-200-duplicate: rgba(229, 231, 235, 1);
  --primitives-radius-radius-4: 4px;
  --primitives-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3);
  --primitives-colors-primary-SA-flag-600-primary-duplicate: rgba(27, 131, 84, 1);
  --primitives-colors-neutral-50-duplicate: rgba(249, 250, 251, 1);
  --primitives-colors-neutral-950: rgba(13, 18, 28, 1);
  --primitives-colors-neutral-600: rgba(77, 87, 97, 1);
  --primitives-colors-neutral-950-duplicate: rgba(13, 18, 28, 1);
  --primitives-colors-neutral-600-duplicate: rgba(77, 87, 97, 1);
  --primitives-colors-neutral-900-duplicate: rgba(17, 25, 39, 1);
  --primitives-spacing-10-40px-duplicate: 40px;
  --primitives-spacing-6-24px-duplicate: 24px;
  --primitives-colors-green-900: rgba(7, 77, 49, 1);
  --primitives-colors-neutral-400: rgba(157, 164, 174, 1);
  --primitives-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8);
  --primitives-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4);
  --primitives-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2);
  --primitives-colors-primary-SA-flag-700: rgba(22, 106, 69, 1);
  --primitives-colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4);
  --primitives-colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.2);
  --primitives-colors-primary-SA-flag-50: rgba(243, 252, 246, 1);
  --primitives-colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.1);
  --spacing-global-spacing-md: var(--primitives-spacing-2-8px);
  --spacing-button-buttons-lg-gap: var(--primitives-spacing-1-4px);
  --spacing-button-buttons-md-gap: var(--primitives-spacing-1-4px);
  --spacing-button-buttons-lg-padding: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-none: var(--primitives-spacing-0-0px);
  --spacing-button-buttons-md-padding: var(--primitives-spacing-3-12px);
  --spacing-link-link-sm-gap: var(--primitives-spacing-1-4px);
  --spacing-link-link-md-gap: var(--primitives-spacing-2-8px);
  --spacing-tab-tab-button-gap: var(--primitives-spacing-1-4px);
  --spacing-global-spacing-xs: var(--primitives-spacing-1-4px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-lg: var(--primitives-spacing-3-12px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px);
  --spacing-global-spacing-5xl: var(--primitives-spacing-10-40px-duplicate);
  --spacing-notification-notification-gap: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px);
  --spacing-global-spacing-xl: var(--primitives-spacing-4-16px);
  --radius-radius-full: 9999px;
  --radius-radius-full-duplicate: 9999px;
  --radius-radius-sm: 4px;
  --radius-radius-md: 8px;
  --spacing-spacing-xl: var(--primitives-spacing-4-16px-duplicate);
  --spacing-spacing-xs: var(--primitives-spacing-1-4px-duplicate);
  --spacing-spacing-5xl: var(--primitives-spacing-10-40px);
  --spacing-spacing-md-duplicate: var(--primitives-spacing-2-8px-duplicate);
  --spacing-spacing-3xl: var(--primitives-spacing-6-24px);
  --spacing-spacing-8xl: var(--primitives-spacing-20-80px);
  --spacing-spacing-4xl: var(--primitives-spacing-8-32px);
  --spacing-spacing-lg: var(--primitives-spacing-3-12px-duplicate);
  --spacing-spacing-sm: var(--primitives-spacing-1-5-6px);
  --primitives-spacing-4-16px-duplicate: 16px;
  --primitives-spacing-1-4px-duplicate: 4px;
  --primitives-spacing-10-40px: 40px;
  --primitives-spacing-6-24px: 24px;
  --primitives-spacing-20-80px: 80px;
  --primitives-spacing-8-32px: 32px;
  --primitives-spacing-3-12px-duplicate: 12px;
  --primitives-spacing-1-5-6px: 6px;
  --radius-radius-radius-sm: var(--primitives-radius-radius-4);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-themes-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-themes-mode="light"] {
  --themes-background-background-body: var(--primitives-colors-neutral-50);
  --themes-text-text-display: var(--primitives-colors-neutral-800);
  --themes-text-text-default: var(--primitives-colors-base-black);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-700);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-black-duplicate);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-600-primary);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-200);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-300);
  --themes-background-background-white: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-menu: var(--primitives-colors-base-white-duplicate);
  --themes-background-background-white-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-200-duplicate);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-50-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-base-white);
  --themes-background-background-SA-flag: var(--primitives-colors-green-900);
  --themes-background-background-notification-white: var(--primitives-colors-base-white);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-500);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-100);
  --themes-link-link-neutral: var(--primitives-colors-neutral-700);
  --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-500);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-white-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-white-20);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-100);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-200-duplicate);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-800);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-primary-50: var(--primitives-colors-primary-SA-flag-50);
  --themes-border-border-black: var(--primitives-colors-base-black);
}

[data-themes-mode="dark"] {
  --themes-background-background-body: var(--primitives-colors-neutral-900);
  --themes-text-text-display: var(--primitives-colors-neutral-50-duplicate);
  --themes-text-text-default: var(--primitives-colors-base-white);
  --themes-text-text-primary-paragraph: var(--primitives-colors-neutral-100);
  --themes-text-text-default-duplicate: var(--primitives-colors-base-white-duplicate);
  --themes-text-text-primary: var(--primitives-colors-primary-SA-flag-400-duplicate);
  --themes-background-background-neutral-200: var(--primitives-colors-neutral-600);
  --themes-border-border-neutral-primary: var(--primitives-colors-neutral-500);
  --themes-background-background-white: var(--primitives-colors-neutral-950-duplicate);
  --themes-background-background-menu: var(--primitives-colors-neutral-800-duplicate);
  --themes-background-background-white-duplicate: var(--primitives-colors-neutral-950);
  --themes-background-background-neutral-200-duplicate: var(--primitives-colors-neutral-600-duplicate);
  --themes-background-background-neutral-50: var(--primitives-colors-neutral-900-duplicate);
  --themes-background-background-menu-duplicate: var(--primitives-colors-neutral-800);
  --themes-background-background-SA-flag: var(--primitives-colors-primary-SA-flag-600-primary-duplicate);
  --themes-background-background-notification-white: var(--primitives-colors-neutral-900-duplicate);
  --themes-text-text-secondary-paragraph: var(--primitives-colors-neutral-200-duplicate);
  --themes-button-button-background-neutral-hovered: var(--primitives-colors-neutral-700);
  --themes-link-link-neutral: var(--primitives-colors-neutral-200-duplicate);
  --themes-link-link-neutral-hovered: var(--primitives-colors-neutral-400);
  --themes-alpha-alpha-white-40: var(--primitives-colors-alpha-alpha-black-40);
  --themes-alpha-alpha-white-20: var(--primitives-colors-alpha-alpha-black-20);
  --themes-button-button-background-neutral-default: var(--primitives-colors-neutral-800);
  --themes-border-border-neutral-secondary: var(--primitives-colors-neutral-700);
  --themes-tag-tag-text-neutral: var(--primitives-colors-neutral-100);
  --themes-tag-tag-background-neutral-light: var(--primitives-colors-neutral-800);
  --themes-text-text-primary-duplicate: var(--primitives-colors-primary-SA-flag-400);
  --themes-background-background-primary-50: var(--primitives-colors-alpha-alpha-600-primary-10);
  --themes-border-border-black: var(--primitives-colors-base-white);
}

[data-spacing-mode="desktop"] {
  --spacing-link-link-md-gap: var(--primitives-spacing-2-8px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px);
  --spacing-notification-notification-gap: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px);
}

[data-spacing-mode="tablet"] {
  --spacing-link-link-md-gap: var(--primitives-spacing-2-8px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-4-16px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-2-8px);
  --spacing-notification-notification-gap: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-6-24px-duplicate);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-4-16px);
}

[data-spacing-mode="mobile"] {
  --spacing-link-link-md-gap: var(--primitives-spacing-1-4px);
  --spacing-tab-horizontal-tab-md-button-h-padding: var(--primitives-spacing-3-12px);
  --spacing-button-button-menu-gap: var(--primitives-spacing-1-4px);
  --spacing-notification-notification-gap: var(--primitives-spacing-2-8px);
  --spacing-notification-notification-toast-desktop-h-padding: var(--primitives-spacing-4-16px);
  --spacing-notification-notification-toast-v-padding: var(--primitives-spacing-3-12px);
}