:root {
  /* Base Colors */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Gray (Light Mode) */
  --color-gray-50: #f9fafb;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #182230;
  --color-gray-900: #101828;
  --color-gray-900-dark: #F5F5F6;
  --color-gray-950: #0c111d;

  /* Equiti Teal */
  --color-teal-50: #effdfd;
  --color-teal-200: #99e5e1;
  --color-teal-300: #66d3cf;
  --color-teal-400: #33c1bd;
  --color-teal-500: #00afab;
  --color-teal-700: #006b67;
  --color-teal-800: #004a45;

    /* Blue Colors */
    --blue-500: #2e90fa;

  /* Error Colors */
  --color-error-50: #fef3f2;
  --color-error-700: #b42318;
  --color-error-800: #912018;

  --color-gray-dark-700-dark: #CECFD2;

  --text-brand-tertiary-600: #008D89;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;
  --spacing-48: 192px;
  --spacing-56: 224px;
  --spacing-64: 256px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-120: 480px;
  --spacing-140: 560px;
  --spacing-160: 640px;
  --spacing-180: 720px;
  --spacing-192: 768px;
  --spacing-248: 992px;
  --spacing-256: 1024px;
  --spacing-320: 1280px;
  --spacing-360: 1440px;
  --spacing-400: 1600px;
  --spacing-480: 1920px;

  /* English styles */
  --english-display-2xl-regular: var(--font-weight-regular) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-en);
  --english-display-2xl-medium: var(--font-weight-medium) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-en);
  --english-display-2xl-semibold: var(--font-weight-semibold) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-en);
  --english-display-2xl-bold: var(--font-weight-bold) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-en);

  --english-display-xl-regular: var(--font-weight-regular) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-en);
  --english-display-xl-medium: var(--font-weight-medium) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-en);
  --english-display-xl-semibold: var(--font-weight-semibold) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-en);
  --english-display-xl-bold: var(--font-weight-bold) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-en);

  --english-display-lg-regular: var(--font-weight-regular) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-en);
  --english-display-lg-medium: var(--font-weight-medium) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-en);
  --english-display-lg-semibold: var(--font-weight-semibold) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-en);
  --english-display-lg-bold: var(--font-weight-bold) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-en);

  --english-display-md-regular: var(--font-weight-regular) var(--font-size-display-md)/var(--line-height-display-md) var(--font-display-en);
  --english-display-md-medium: var(--font-weight-medium) var(--font-size-display-md)/var(--line-height-display-md) var(--font-display-en);
  --english-display-md-semibold: var(--font-weight-semibold) var(--font-size-display-md)/var(--line-height-display-smmd) var(--font-display-en);
  --english-display-md-bold: var(--font-weight-bold) var(--font-size-display-md)/var(--line-height-display-md) var(--font-display-en);

  --english-display-sm-regular: var(--font-weight-regular) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-en);
  --english-display-sm-medium: var(--font-weight-medium) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-en);
  --english-display-sm-semibold: var(--font-weight-semibold) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-en);
  --english-display-sm-bold: var(--font-weight-bold) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-en);

  --english-display-xs-regular: var(--font-weight-regular) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-en);
  --english-display-xs-medium: var(--font-weight-medium) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-en);
  --english-display-xs-semibold: var(--font-weight-semibold) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-en);
  --english-display-xs-bold: var(--font-weight-bold) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-en);

  --english-text-xl-regular: var(--font-weight-regular) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-en);
  --english-text-xl-medium: var(--font-weight-medium) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-en);
  --english-text-xl-semibold: var(--font-weight-semibold) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-en);
  --english-text-xl-bold: var(--font-weight-bold) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-en);

  --english-text-lg-regular: var(--font-weight-regular) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-en);
  --english-text-lg-medium: var(--font-weight-medium) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-en);
  --english-text-lg-semibold: var(--font-weight-semibold) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-en);
  --english-text-lg-bold: var(--font-weight-bold) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-en);

  --english-text-md-regular: var(--font-weight-regular) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-en);
  --english-text-md-medium: var(--font-weight-medium) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-en);
  --english-text-md-semibold: var(--font-weight-semibold) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-en);
  --english-text-md-bold: var(--font-weight-bold) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-en);

  --english-text-sm-regular: var(--font-weight-regular) var(--font-size-text-sm)/var(--line-height-text-smmd) var(--font-text-en);
  --english-text-sm-medium: var(--font-weight-medium) var(--font-size-text-sm)/var(--line-height-text-sm) var(--font-text-en);
  --english-text-sm-semibold: var(--font-weight-semibold) var(--font-size-text-sm)/var(--line-height-text-smmd) var(--font-text-en);
  --english-text-sm-bold: var(--font-weight-bold) var(--font-size-text-sm)/var(--line-height-text-sm) var(--font-text-en);

  --english-text-xs-regular: var(--font-weight-regular) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-en);
  --english-text-xs-medium: var(--font-weight-medium) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-en);
  --english-text-xs-semibold: var(--font-weight-semibold) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-en);
  --english-text-xs-bold: var(--font-weight-bold) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-en);

  /* Arabic styles */
  --arabic-display-2xl-regular: var(--font-weight-regular) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-ar);
  --arabic-display-2xl-medium: var(--font-weight-medium) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-ar);
  --arabic-display-2xl-semibold: var(--font-weight-semibold) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-ar);
  --arabic-display-2xl-bold: var(--font-weight-bold) var(--font-size-display-2xl)/var(--line-height-display-2xl) var(--font-display-ar);

  --arabic-display-xl-regular: var(--font-weight-regular) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-ar);
  --arabic-display-xl-medium: var(--font-weight-medium) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-ar);
  --arabic-display-xl-semibold: var(--font-weight-semibold) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-ar);
  --arabic-display-xl-bold: var(--font-weight-bold) var(--font-size-display-xl)/var(--line-height-display-xl) var(--font-display-ar);

  --arabic-display-lg-regular: var(--font-weight-regular) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-ar);
  --arabic-display-lg-medium: var(--font-weight-medium) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-ar);
  --arabic-display-lg-semibold: var(--font-weight-semibold) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-ar);
  --arabic-display-lg-bold: var(--font-weight-bold) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-display-ar);

  --arabic-display-md-regular: var(--font-weight-regular) var(--font-size-display-md)/var(--line-height-display-md) var(--font-display-ar);
  --arabic-display-md-medium: var(--font-weight-medium) var(--font-size-display-md)/var(--line-height-display-md) var(--font-display-ar);
  --arabic-display-md-semibold: var(--font-weight-semibold) var(--font-size-display-md)/var(--line-height-display-smmd) var(--font-display-ar);
  --arabic-display-md-bold: var(--font-weight-bold) var(--font-size-display-md)/var(--line-height-display-md) var(--font-display-ar);

  --arabic-display-sm-regular: var(--font-weight-regular) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-ar);
  --arabic-display-sm-medium: var(--font-weight-medium) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-ar);
  --arabic-display-sm-semibold: var(--font-weight-semibold) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-ar);
  --arabic-display-sm-bold: var(--font-weight-bold) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-display-ar);

  --arabic-display-xs-regular: var(--font-weight-regular) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-ar);
  --arabic-display-xs-medium: var(--font-weight-medium) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-ar);
  --arabic-display-xs-semibold: var(--font-weight-semibold) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-ar);
  --arabic-display-xs-bold: var(--font-weight-bold) var(--font-size-display-xs)/var(--line-height-display-xs) var(--font-display-ar);

  --arabic-text-xl-regular: var(--font-weight-regular) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-ar);
  --arabic-text-xl-medium: var(--font-weight-medium) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-ar);
  --arabic-text-xl-semibold: var(--font-weight-semibold) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-ar);
  --arabic-text-xl-bold: var(--font-weight-bold) var(--font-size-text-xl)/var(--line-height-text-xl) var(--font-text-ar);

  --arabic-text-lg-regular: var(--font-weight-regular) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-ar);
  --arabic-text-lg-medium: var(--font-weight-medium) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-ar);
  --arabic-text-lg-semibold: var(--font-weight-semibold) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-ar);
  --arabic-text-lg-bold: var(--font-weight-bold) var(--font-size-text-lg)/var(--line-height-text-lg) var(--font-text-ar);

  --arabic-text-md-regular: var(--font-weight-regular) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-ar);
  --arabic-text-md-medium: var(--font-weight-medium) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-ar);
  --arabic-text-md-semibold: var(--font-weight-semibold) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-ar);
  --arabic-text-md-bold: var(--font-weight-bold) var(--font-size-text-md)/var(--line-height-text-md) var(--font-text-ar);

  --arabic-text-sm-regular: var(--font-weight-regular) var(--font-size-text-sm)/var(--line-height-text-smmd) var(--font-text-ar);
  --arabic-text-sm-medium: var(--font-weight-medium) var(--font-size-text-sm)/var(--line-height-text-sm) var(--font-text-ar);
  --arabic-text-sm-semibold: var(--font-weight-semibold) var(--font-size-text-sm)/var(--line-height-text-smmd) var(--font-text-ar);
  --arabic-text-sm-bold: var(--font-weight-bold) var(--font-size-text-sm)/var(--line-height-text-sm) var(--font-text-ar);

  --arabic-text-xs-regular: var(--font-weight-regular) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-ar);
  --arabic-text-xs-medium: var(--font-weight-medium) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-ar);
  --arabic-text-xs-semibold: var(--font-weight-semibold) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-ar);
  --arabic-text-xs-bold: var(--font-weight-bold) var(--font-size-text-xs)/var(--line-height-text-xs) var(--font-text-ar);

  --text-case-none: none;
  --text-decoration-none: none;
  --text-decoration-underline: underline;
  --paragraph-indent-0: 0px;

  /*!* Text Colors *!*!*/
  --text-primary: var(--color-gray-900);
  --text-primary-dark: var(--color-gray-900-dark);
  --text-secondary: var(--color-gray-700);
  --text-tertiary: var(--color-gray-600);
  --text-quaternary: var(--color-gray-500);

  --fg-secondary: var(--color-gray-700);
  --fg-disabled: var(--color-gray-400);
  --fg-disabled-subtle: var(--color-gray-300);

  /* Buttons - Primary */
  --button-primary-bg: var(--color-teal-200);
  --button-primary-bg-hover: var(--color-teal-500);
  --button-primary-fg: var(--color-black);
  --button-primary-fg-hover: var(--color-white);
  --button-primary-border: var(--color-teal-200);
  --button-primary-border-hover: var(--color-teal-500);

  /* Buttons - Secondary */
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--color-gray-50);
  --button-secondary-fg: var(--color-gray-700);
  --button-secondary-fg-hover: var(--color-gray-800);
  --button-secondary-border: var(--color-gray-300);
  --button-secondary-border-hover: var(--color-gray-300);

  /* Buttons - Secondary Color */
  --button-secondary-color-bg: var(--color-white);
  --button-secondary-color-bg-hover: var(--color-teal-50);
  --button-secondary-color-fg: var(--color-teal-700);
  --button-secondary-color-fg-hover: var(--color-teal-800);
  --button-secondary-color-border: var(--color-teal-300);
  --button-secondary-color-border-hover: var(--color-teal-300);

  /* Buttons - Tertiary */
  --button-tertiary-fg: var(--color-gray-600);
  --button-tertiary-fg-hover: var(--color-gray-700);
  --button-tertiary-bg-hover: var(--color-gray-50);

  /* Buttons - Tertiary Color */
  --button-tertiary-color-fg: var(--color-teal-700);
  --button-tertiary-color-fg-hover: var(--color-teal-800);
  --button-tertiary-color-bg-hover: var(--color-teal-50);

  /* Buttons - Tertiary Error */
  --button-tertiary-error-fg: var(--color-error-700);
  --button-tertiary-error-fg-hover: var(--color-error-800);
  --button-tertiary-error-bg-hover: var(--color-error-50);

  /*MOBILE*/
    /* Font Families */
  --font-display-en: "Gilroy", sans-serif;
  --font-display-ar: "Noto Kufi Arabic", sans-serif;
  --font-text-en: "Inter", sans-serif;
  --font-text-ar: "Noto Naskh Arabic", sans-serif;

  /* Font Sizes */
  --font-size-text-md: 16px;
  --font-size-text-sm: 14px;
  --font-size-text-xs: 12px;

  /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Line Heights */
  --line-height-display-2xl: 90px;
  --line-height-display-xl: 72px;
  --line-height-display-lg: 60px;
  --line-height-display-md: 48px;
  --line-height-display-smmd: 44px;
  --line-height-display-sm: 38px;
  --line-height-display-xs: 32px;
  --line-height-text-xl: 32px;
  --line-height-text-lg: 28px;
  --line-height-text-md: 24px;
  --line-height-text-smmd: 20px;
  --line-height-text-sm: 14px;
  --line-height-text-xs: 12px;

  /*DESKTOP*/

  /* Font Sizes */
  --font-size-display-2xl: 72px;
  --font-size-display-xl: 60px;
  --font-size-display-lg: 48px;
  --font-size-display-md: 36px;
  --font-size-display-sm: 30px;
  --font-size-display-xs: 24px;
  --font-size-text-xl: 20px;
  --font-size-text-lg: 18px;

    /* Container Tokens */
  --container-max-width-desktop: var(--spacing-320);
  --container-padding-desktop: var(--spacing-8);
  --container-padding-mobile: var(--spacing-4);

    /* Width Tokens */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-sm: 480px;
  --width-md: 560px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-2xl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;

  /* Special Width Values */
  --heading-max-width: 720px;
  --paragraph-max-width: 720px;

    /* Spacing Tokens */
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

    /* Border Radius Tokens */
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;

    --button-xs: 24px;  /* wysokość */
  --button-sm: 32px;
  --button-md: 36px;  /* default */
  --button-lg: 40px;
  --button-lgxl: 44px;
  --button-xl: 48px;
  --button-2xl: 56px;

  /* BUTTONS */
  /* Colors - Error Primary */
  --button-error-primary-fg: #FFFFFF;
  --button-error-primary-bg: #D92D20;
  --button-error-primary-border: #D92D20;
  --button-error-primary-fg-hover: #FFFFFF;
  --button-error-primary-bg-hover: #B42318;
  --button-error-primary-border-hover: #B42318;

  /* Colors - Error Secondary */
  --button-error-secondary-fg: #B42318;
  --button-error-secondary-fg-hover: #912018;
  --button-error-secondary-bg: #FFFFFF;
  --button-error-secondary-bg-hover: #FEF3F2;
  --button-error-secondary-border: #FDA29B;
  --button-error-secondary-border-hover: #FDA29B;

  /* Colors - Error Tertiary */
  --button-error-tertiary-fg: #B42318;
  --button-error-tertiary-fg-hover: #912018;
  --button-error-tertiary-bg-hover: #FEF3F2;

  --bg-primary: #FFF;


  /* Borders */
  --border-secondary: #EAECF0;
  --border-primary: var(--color-gray-300);
}