text: // @flow
  
  // Default color palette
  export const colors = {
      error03: '#7A141F',
      error04: '#A21B29',
      error05: '#CB2233',
      error06: '#E04757',
      error08: '#EAA7AD',
  
      primary01: '#00112D',
      primary02: '#00225A',
      primary03: '#003486',
      primary04: '#0045B3',
      primary05: '#0056E0',
      primary06: '#246FE5',
      primary07: '#669AEC',
      primary08: '#99BBF3',
      primary09: '#CCDDF9',
      primary10: '#17A0DB',
  
      surface00: '#111111',
      surface01: '#040404',
      surface02: '#141414',
      surface03: '#292929',
      surface04: '#3D3D3D',
      surface05: '#525252',
      surface06: '#666',
      surface07: '#858585',
      surface08: '#A3A3A3',
      surface09: '#C2C2C2',
      surface10: '#E0E0E0',
      surface11: '#FFF',
      surface12: '#AAAAAA',
  
      success04: '#189B55',
      success05: '#1EC26A',
  
      warning05: '#F8AE1A',
      warning06: '#ED9E1B'
  };
  
  // Mapping between the token used and the color
  export const colorMap = {
      // Default page background
      uiBackground: 'surface01',
  
      // Container background
      ui01: 'surface02',
      ui02: 'surface03',
      ui03: 'surface04',
      ui04: 'surface05',
      ui05: 'surface06',
  
      // Primary buttons
      action01: 'primary05',
  
      // Screen header
      screen01Header: 'primary10',
  
      // Hover state for primary buttons
      action01Hover: 'primary06',
  
      // Active state for primary buttons
      action01Active: 'primary04',
  
      // Focus border color
      action01Focus: 'primary08',
  
      // Disabled state for primary buttons
      action01Disabled: 'primary02',
  
      // Secondary buttons
      action02: 'surface04',
  
      // Hover state for secondary buttons
      action02Hover: 'surface05',
  
      // Active state for secondary buttons
      action02Active: 'surface03',
  
      // Focus border color
      action02Focus: 'surface07',
  
      // Disabled state for secondary buttons
      action02Disabled: 'surface02',
  
      // Tertiary buttons
      action03: 'transparent',
  
      // Hover state for tertiary buttons
      action03Hover: 'surface05',
  
      // Active state for tertiary buttons
      action03Active: 'surface03',
  
      // Focus border color
      action03Focus: 'surface07',
  
      // Disabled state for tertiary buttons
      action03Disabled: 'transparent',
  
      // Danger button background
      actionDanger: 'error05',
  
      // Hover state for danger buttons
      actionDangerHover: 'error06',
  
      // Active state for danger buttons
      actionDangerActive: 'error04',
  
      // Focus border color
      actionDangerFocus: 'error08',
  
      // Disabled state for danger buttons
      actionDangerDisabled: 'error03',
  
      // Bottom sheet background
      bottomSheet: 'surface00',
  
      // Primary text – default color for body copy & headers
      text01: 'surface11',
  
      // Secondary text with medium contrast
      text02: 'surface09',
  
      // Tertiary text with low contrast – placeholders, disabled actions, label for disabled buttons
      text03: 'surface07',
  
      // Text for bottom sheet items
      text04: 'surface12',
  
      // error messages
      textError: 'error06',
  
      // Primary color for icons
      icon01: 'surface11',
  
      // Secondary color for input fields
      icon02: 'surface09',
  
      // Tertiary color for disabled actions
      icon03: 'surface07',
  
      // Error message
      iconError: 'error06',
  
      // Forms
      // Default background for input fields
      field01: 'surface01',
  
      // Hover background for input fields
      field01Hover: 'surface03',
  
      // Focus border color
      field01Focus: 'primary05',
  
      // Disabled background for input fields
      field01Disabled: 'surface05',
  
      // Background for high-contrast input fields
      field02: 'surface11',
  
      // Color for the section divider
      dividerColor: 'surface12',
  
      // Background for high-contrast input fields on hover
      field02Hover: 'primary09',
  
      // Focus border color
      field02Focus: 'primary05',
  
      // Disabled background for high-contrast input fields
      field02Disabled: 'surface06',
  
      // Background for section header
      section01: 'surface10',
  
      // Active color for section header
      section01Active: 'primary04',
  
      // Inactive color for section header
      section01Inactive: 'surface01',
  
      // Borders
      // Border for the input fields in hover state
      border01: 'surface08',
  
      // Border for the input fields
      border02: 'surface06',
  
      // Line separators
      border03: 'surface04',
  
      // Color for error border & message
      borderError: 'error06',
  
      // Links
      // Default color for links
      link01: 'primary07',
  
      // Color for links in the hover state
      link01Hover: 'primary08',
  
      // Color for links in the active state
      link01Active: 'primary06',
  
      // Support
      // Color for positive messages applied to icons & borders
      success01: 'success05',
  
      // Color for positive messages applied to backgrounds
      success02: 'success05',
  
      // Color for warning messages applied to icons, borders & backgrounds
      warning01: 'warning05',
  
      // Color for indicating a raised hand
      warning02: 'warning06'
  };
  
  
  export const font = {
      weightRegular: '400',
      weightSemiBold: '600'
  };
  
  export const shape = {
      borderRadius: 6,
      boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)'
  };
  
  export const spacing
      = [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128 ];
  
  export const typography = {
      labelRegular: {
          fontSize: 12,
          lineHeight: 16,
          fontWeight: font.weightRegular,
          letterSpacing: 0.16
      },
  
      labelBold: {
          fontSize: 12,
          lineHeight: 16,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0.16
      },
  
      labelButton: {
          fontSize: 14,
          lineHeight: 24,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      labelButtonLarge: {
          fontSize: 16,
          lineHeight: 24,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      bodyShortRegular: {
          fontSize: 14,
          lineHeight: 18,
          fontWeight: font.weightRegular,
          letterSpacing: 0
      },
  
      bodyShortBold: {
          fontSize: 14,
          lineHeight: 18,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      bodyShortRegularLarge: {
          fontSize: 16,
          lineHeight: 24,
          fontWeight: font.weightRegular,
          letterSpacing: 0
      },
  
      bodyShortBoldLarge: {
          fontSize: 16,
          lineHeight: 24,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      bodyLongRegular: {
          fontSize: 14,
          lineHeight: 24,
          fontWeight: font.weightRegular,
          letterSpacing: 0
      },
  
      bodyLongBold: {
          fontSize: 14,
          lineHeight: 24,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading1: {
          fontSize: 54,
          lineHeight: 64,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading2: {
          fontSize: 42,
          lineHeight: 50,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading3: {
          fontSize: 32,
          lineHeight: 40,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading4: {
          fontSize: 28,
          lineHeight: 36,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading5: {
          fontSize: 20,
          lineHeight: 28,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading6: {
          fontSize: 16,
          lineHeight: 26,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      },
  
      heading7: {
          fontSize: 14,
          lineHeight: 24,
          fontWeight: font.weightSemiBold,
          letterSpacing: 0
      }
  };
  
  export const breakpoints = {
      values: {
          '0': 0,
          '320': 320,
          '400': 400,
          '480': 480
      }
  };
  