/*
  Do not edit directly
  Generated on Mon, 29 Mar 2021 19:05:43 GMT
*/

$breakpoint-base-sm: 640px !default;
$breakpoint-base-md: 768px !default;
$breakpoint-base-lg: 1024px !default;
$breakpoint-base-xl: 1280px !default;
$breakpoint-base-2xl: 1536px !default;
$breakpoint-screen-tablet: 640px !default;
$breakpoint-screen-laptop: 1024px !default;
$breakpoint-screen-desktop: 1280px !default;
$color-base-gray-100: #f6f6f6 !default;
$color-base-gray-200: #e4e4e4 !default;
$color-base-gray-300: #d3d3d3 !default;
$color-base-gray-400: #c1c1c1 !default;
$color-base-gray-500: #a7a7a7 !default;
$color-base-gray-600: #858585 !default;
$color-base-gray-700: #646464 !default;
$color-base-gray-800: #424242 !default;
$color-base-gray-900: #212121 !default;
$color-base-blue-gray-100: #f6f8fa !default;
$color-base-blue-gray-200: #eaeef4 !default;
$color-base-blue-gray-300: #e2e8f0 !default;
$color-base-blue-gray-400: #cbd0d8 !default;
$color-base-blue-gray-500: #9ea2a8 !default;
$color-base-blue-gray-600: #878b90 !default;
$color-base-blue-gray-700: #717478 !default;
$color-base-blue-gray-800: #5a5c60 !default;
$color-base-blue-gray-900: #434548 !default;
$color-base-red-100: #fdebeb !default;
$color-base-red-200: #f9c4c6 !default;
$color-base-red-300: #f59da1 !default;
$color-base-red-400: #f1767b !default;
$color-base-red-500: #ec3c43 !default;
$color-base-red-600: #a52a2e !default;
$color-base-red-700: #bc3035 !default;
$color-base-red-800: #d4363c !default;
$color-base-red-900: #8d2428 !default;
$color-base-orange-100: #ffe0b2 !default;
$color-base-orange-200: #ffcc80 !default;
$color-base-orange-300: #ffb74d !default;
$color-base-orange-400: #ffa726 !default;
$color-base-orange-500: #ff9800 !default;
$color-base-orange-600: #fb8c00 !default;
$color-base-orange-700: #f57c00 !default;
$color-base-orange-800: #ef6c00 !default;
$color-base-orange-900: #e65100 !default;
$color-base-deep-orange-100: #fdf3eb !default;
$color-base-deep-orange-200: #f9dcc4 !default;
$color-base-deep-orange-300: #f5c69d !default;
$color-base-deep-orange-400: #f1af76 !default;
$color-base-deep-orange-500: #ec8d3c !default;
$color-base-deep-orange-600: #d47e36 !default;
$color-base-deep-orange-700: #bc7030 !default;
$color-base-deep-orange-800: #a5622a !default;
$color-base-deep-orange-900: #8d5424 !default;
$color-base-yellow-100: #fef8e7 !default;
$color-base-yellow-200: #feebb7 !default;
$color-base-yellow-300: #fddf87 !default;
$color-base-yellow-400: #fcd257 !default;
$color-base-yellow-500: #fcbf10 !default;
$color-base-yellow-600: #e2ab0e !default;
$color-base-yellow-700: #c9980c !default;
$color-base-yellow-800: #b0850b !default;
$color-base-yellow-900: #977209 !default;
$color-base-green-100: #e5f9f4 !default;
$color-base-green-200: #b2eee0 !default;
$color-base-green-300: #7fe4cc !default;
$color-base-green-400: #4cd9b8 !default;
$color-base-green-500: #00c99a !default;
$color-base-green-600: #00b48a !default;
$color-base-green-700: #00a07b !default;
$color-base-green-800: #008c6b !default;
$color-base-green-900: #00785c !default;
$color-base-sea-green-100: #e8f7f8 !default;
$color-base-sea-green-200: #bbe8eb !default;
$color-base-sea-green-300: #8fd9de !default;
$color-base-sea-green-400: #62c9d1 !default;
$color-base-sea-green-500: #1fb3be !default;
$color-base-sea-green-600: #1ba1ab !default;
$color-base-sea-green-700: #188f98 !default;
$color-base-sea-green-800: #157d85 !default;
$color-base-sea-green-900: #126b72 !default;
$color-base-sky-blue-100: #e9f3fc !default;
$color-base-sky-blue-200: #d3e8fa !default;
$color-base-sky-blue-300: #a8d2f6 !default;
$color-base-sky-blue-400: #7dbcf2 !default;
$color-base-sky-blue-500: #3c9bec !default;
$color-base-sky-blue-600: #368bd4 !default;
$color-base-sky-blue-700: #307cbc !default;
$color-base-sky-blue-800: #2a6ca5 !default;
$color-base-sky-blue-900: #245d8d !default;
$color-base-blue-100: #eaeffd !default;
$color-base-blue-200: #c0cff9 !default;
$color-base-blue-300: #96b0f5 !default;
$color-base-blue-400: #6c90f1 !default;
$color-base-blue-500: #2e61ec !default;
$color-base-blue-600: #2957d4 !default;
$color-base-blue-700: #244dbc !default;
$color-base-blue-800: #2043a5 !default;
$color-base-blue-900: #1b3a8d !default;
$color-base-lavender-100: #e7ddfc !default;
$color-base-lavender-200: #d0bbfa !default;
$color-base-lavender-300: #b89af7 !default;
$color-base-lavender-400: #a178f5 !default;
$color-base-lavender-500: #8a57f3 !default;
$color-base-lavender-600: #7c4eda !default;
$color-base-lavender-700: #6e45c2 !default;
$color-base-lavender-800: #603caa !default;
$color-base-lavender-900: #523491 !default;
$color-base-magenta-100: #ffecf1 !default;
$color-base-magenta-200: #ffb5c9 !default;
$color-base-magenta-300: #ff90ae !default;
$color-base-magenta-400: #ff6b93 !default;
$color-base-magenta-500: #ff4678 !default;
$color-base-magenta-600: #e53f6c !default;
$color-base-magenta-700: #cc3860 !default;
$color-base-magenta-800: #b23154 !default;
$color-base-magenta-900: #992a48 !default;
$color-font-base-light: #777777 !default;
$color-font-base-dark: #ffffff !default;
$font-family-sans-serif-font1-family: Roboto !default;
$font-family-sans-serif-font1-weight: 500 !default;
$font-family-sans-serif-font2-family: Almarai !default;
$font-family-sans-serif-font2-weight: 500 !default;
$font-family-sans-serif-font3-family: Inter !default;
$font-family-sans-serif-font3-weight: 500 !default;
$font-family-sans-serif-font4-family: Arial !default;
$font-family-sans-serif-font4-weight: 500 !default;
$font-family-sans-serif-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Almarai", "Inter", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // default font-family full string
$font-family-serif-font1-family: Volkhov !default;
$font-family-serif-font1-weight: 500 !default;
$font-family-serif-font2-family: Libre Baskerville !default;
$font-family-serif-font2-weight: 500 !default;
$font-family-serif-font3-family: Georgia !default;
$font-family-serif-font3-weight: 500 !default;
$font-family-serif-base: ui-serif, "Volkhov", "Libre Baskerville", Georgia, serif !default; // default font-family full string
$font-family-mono-font1-family: Fira Mono !default;
$font-family-mono-font1-weight: 500 !default;
$font-family-mono-font2-family: Roboto Mono !default;
$font-family-mono-font2-weight: 600 !default;
$font-family-mono-font3-family: Oxygen Mono !default;
$font-family-mono-font3-weight: 500 !default;
$font-family-mono-font4-family: Consolas !default;
$font-family-mono-font4-weight: 500 !default;
$font-family-mono-base: ui-monospace, "Fira Mono", "Roboto Mono", "Oxygen Mono", Consolas, monospace !default; // default font-family full string
$font-line-height-xs: 1rem !default;
$font-line-height-sm: 1.25rem !default;
$font-line-height-base: 1.5rem !default;
$font-line-height-lg: 1.75rem !default;
$font-line-height-xl: 1.75rem !default;
$font-line-height-2x1: 2rem !default;
$font-line-height-3x1: 2.25rem !default;
$font-line-height-4x1: 2.5rem !default;
$font-line-height-5x1: 3rem !default;
$font-line-height-6x1: 3.75rem !default;
$font-line-height-7x1: 4.5rem !default;
$font-line-height-8x1: 6rem !default;
$font-line-height-9x1: 8rem !default;
$font-size-xs: 0.75rem !default;
$font-size-sm: 0.875rem !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.125rem !default;
$font-size-xl: 1.25rem !default;
$font-size-2x1: 1.5rem !default;
$font-size-3x1: 1.875rem !default;
$font-size-4x1: 2.25rem !default;
$font-size-5x1: 3rem !default;
$font-size-6x1: 3.75rem !default;
$font-size-7x1: 4.5rem !default;
$font-size-8x1: 6rem !default;
$font-size-9x1: 8rem !default;
$status-primary-color-light: #3c9bec !default;
$status-primary-color-dark: #7dbcf2 !default;
$status-secondary-color-light: #cbd0d8 !default;
$status-secondary-color-dark: #cbd0d8 !default;
$status-danger-color-light: #ec3c43 !default;
$status-danger-color-dark: #ec3c43 !default;
$status-success-color-light: #00c99a !default;
$status-success-color-dark: #00c99a !default;
$status-warning-color-light: #ff9800 !default;
$status-warning-color-dark: #ff9800 !default;

$tokens: (
  'breakpoint': (
    'base': (
      'sm': $breakpoint-base-sm,
      'md': $breakpoint-base-md,
      'lg': $breakpoint-base-lg,
      'xl': $breakpoint-base-xl,
      '2xl': $breakpoint-base-2xl
    ),
    'screen': (
      'tablet': $breakpoint-screen-tablet,
      'laptop': $breakpoint-screen-laptop,
      'desktop': $breakpoint-screen-desktop
    )
  ),
  'color': (
    'base': (
      'gray': (
        '100': $color-base-gray-100,
        '200': $color-base-gray-200,
        '300': $color-base-gray-300,
        '400': $color-base-gray-400,
        '500': $color-base-gray-500,
        '600': $color-base-gray-600,
        '700': $color-base-gray-700,
        '800': $color-base-gray-800,
        '900': $color-base-gray-900
      ),
      'blue-gray': (
        '100': $color-base-blue-gray-100,
        '200': $color-base-blue-gray-200,
        '300': $color-base-blue-gray-300,
        '400': $color-base-blue-gray-400,
        '500': $color-base-blue-gray-500,
        '600': $color-base-blue-gray-600,
        '700': $color-base-blue-gray-700,
        '800': $color-base-blue-gray-800,
        '900': $color-base-blue-gray-900
      ),
      'red': (
        '100': $color-base-red-100,
        '200': $color-base-red-200,
        '300': $color-base-red-300,
        '400': $color-base-red-400,
        '500': $color-base-red-500,
        '600': $color-base-red-600,
        '700': $color-base-red-700,
        '800': $color-base-red-800,
        '900': $color-base-red-900
      ),
      'orange': (
        '100': $color-base-orange-100,
        '200': $color-base-orange-200,
        '300': $color-base-orange-300,
        '400': $color-base-orange-400,
        '500': $color-base-orange-500,
        '600': $color-base-orange-600,
        '700': $color-base-orange-700,
        '800': $color-base-orange-800,
        '900': $color-base-orange-900
      ),
      'deep-orange': (
        '100': $color-base-deep-orange-100,
        '200': $color-base-deep-orange-200,
        '300': $color-base-deep-orange-300,
        '400': $color-base-deep-orange-400,
        '500': $color-base-deep-orange-500,
        '600': $color-base-deep-orange-600,
        '700': $color-base-deep-orange-700,
        '800': $color-base-deep-orange-800,
        '900': $color-base-deep-orange-900
      ),
      'yellow': (
        '100': $color-base-yellow-100,
        '200': $color-base-yellow-200,
        '300': $color-base-yellow-300,
        '400': $color-base-yellow-400,
        '500': $color-base-yellow-500,
        '600': $color-base-yellow-600,
        '700': $color-base-yellow-700,
        '800': $color-base-yellow-800,
        '900': $color-base-yellow-900
      ),
      'green': (
        '100': $color-base-green-100,
        '200': $color-base-green-200,
        '300': $color-base-green-300,
        '400': $color-base-green-400,
        '500': $color-base-green-500,
        '600': $color-base-green-600,
        '700': $color-base-green-700,
        '800': $color-base-green-800,
        '900': $color-base-green-900
      ),
      'sea-green': (
        '100': $color-base-sea-green-100,
        '200': $color-base-sea-green-200,
        '300': $color-base-sea-green-300,
        '400': $color-base-sea-green-400,
        '500': $color-base-sea-green-500,
        '600': $color-base-sea-green-600,
        '700': $color-base-sea-green-700,
        '800': $color-base-sea-green-800,
        '900': $color-base-sea-green-900
      ),
      'sky-blue': (
        '100': $color-base-sky-blue-100,
        '200': $color-base-sky-blue-200,
        '300': $color-base-sky-blue-300,
        '400': $color-base-sky-blue-400,
        '500': $color-base-sky-blue-500,
        '600': $color-base-sky-blue-600,
        '700': $color-base-sky-blue-700,
        '800': $color-base-sky-blue-800,
        '900': $color-base-sky-blue-900
      ),
      'blue': (
        '100': $color-base-blue-100,
        '200': $color-base-blue-200,
        '300': $color-base-blue-300,
        '400': $color-base-blue-400,
        '500': $color-base-blue-500,
        '600': $color-base-blue-600,
        '700': $color-base-blue-700,
        '800': $color-base-blue-800,
        '900': $color-base-blue-900
      ),
      'lavender': (
        '100': $color-base-lavender-100,
        '200': $color-base-lavender-200,
        '300': $color-base-lavender-300,
        '400': $color-base-lavender-400,
        '500': $color-base-lavender-500,
        '600': $color-base-lavender-600,
        '700': $color-base-lavender-700,
        '800': $color-base-lavender-800,
        '900': $color-base-lavender-900
      ),
      'magenta': (
        '100': $color-base-magenta-100,
        '200': $color-base-magenta-200,
        '300': $color-base-magenta-300,
        '400': $color-base-magenta-400,
        '500': $color-base-magenta-500,
        '600': $color-base-magenta-600,
        '700': $color-base-magenta-700,
        '800': $color-base-magenta-800,
        '900': $color-base-magenta-900
      )
    ),
    'font': (
      'base': (
        'light': $color-font-base-light,
        'dark': $color-font-base-dark
      )
    )
  ),
  'font': (
    'family': (
      'sans-serif': (
        'font1': (
          'family': $font-family-sans-serif-font1-family,
          'weight': $font-family-sans-serif-font1-weight
        ),
        'font2': (
          'family': $font-family-sans-serif-font2-family,
          'weight': $font-family-sans-serif-font2-weight
        ),
        'font3': (
          'family': $font-family-sans-serif-font3-family,
          'weight': $font-family-sans-serif-font3-weight
        ),
        'font4': (
          'family': $font-family-sans-serif-font4-family,
          'weight': $font-family-sans-serif-font4-weight
        ),
        'base': $font-family-sans-serif-base
      ),
      'serif': (
        'font1': (
          'family': $font-family-serif-font1-family,
          'weight': $font-family-serif-font1-weight
        ),
        'font2': (
          'family': $font-family-serif-font2-family,
          'weight': $font-family-serif-font2-weight
        ),
        'font3': (
          'family': $font-family-serif-font3-family,
          'weight': $font-family-serif-font3-weight
        ),
        'base': $font-family-serif-base
      ),
      'mono': (
        'font1': (
          'family': $font-family-mono-font1-family,
          'weight': $font-family-mono-font1-weight
        ),
        'font2': (
          'family': $font-family-mono-font2-family,
          'weight': $font-family-mono-font2-weight
        ),
        'font3': (
          'family': $font-family-mono-font3-family,
          'weight': $font-family-mono-font3-weight
        ),
        'font4': (
          'family': $font-family-mono-font4-family,
          'weight': $font-family-mono-font4-weight
        ),
        'base': $font-family-mono-base
      )
    ),
    'line-height': (
      'xs': $font-line-height-xs,
      'sm': $font-line-height-sm,
      'base': $font-line-height-base,
      'lg': $font-line-height-lg,
      'xl': $font-line-height-xl,
      '2x1': $font-line-height-2x1,
      '3x1': $font-line-height-3x1,
      '4x1': $font-line-height-4x1,
      '5x1': $font-line-height-5x1,
      '6x1': $font-line-height-6x1,
      '7x1': $font-line-height-7x1,
      '8x1': $font-line-height-8x1,
      '9x1': $font-line-height-9x1
    ),
    'size': (
      'xs': $font-size-xs,
      'sm': $font-size-sm,
      'base': $font-size-base,
      'lg': $font-size-lg,
      'xl': $font-size-xl,
      '2x1': $font-size-2x1,
      '3x1': $font-size-3x1,
      '4x1': $font-size-4x1,
      '5x1': $font-size-5x1,
      '6x1': $font-size-6x1,
      '7x1': $font-size-7x1,
      '8x1': $font-size-8x1,
      '9x1': $font-size-9x1
    )
  ),
  'status': (
    'primary': (
      'color': (
        'light': $status-primary-color-light,
        'dark': $status-primary-color-dark
      )
    ),
    'secondary': (
      'color': (
        'light': $status-secondary-color-light,
        'dark': $status-secondary-color-dark
      )
    ),
    'danger': (
      'color': (
        'light': $status-danger-color-light,
        'dark': $status-danger-color-dark
      )
    ),
    'success': (
      'color': (
        'light': $status-success-color-light,
        'dark': $status-success-color-dark
      )
    ),
    'warning': (
      'color': (
        'light': $status-warning-color-light,
        'dark': $status-warning-color-dark
      )
    )
  )
);